@crediball/elements 0.2.0 → 0.3.0

package/dist/{chunk-VW5SGSLN.js → chunk-AEVAHMRY.js}

@@ -331,8 +331,8 @@ var CrediballPaywallElement = class extends CrediballElement {
                    <span class="sym">${escapeHtml(currencySymbolFor(currency))}</span>
                    <input class="custom-input" inputmode="decimal" placeholder="${custom?.minEur ?? ""}" aria-label="Custom amount" />
                    <button class="custom-add" type="button">Add</button>
-                 </div>
-                 <p class="error" hidden></p>` : ""}
+                 </div>` : ""}
+          <p class="error" hidden></p>
           <button class="close" part="close" type="button">Not now</button>
         </div>
       </div>
@@ -352,7 +352,9 @@ var CrediballPaywallElement = class extends CrediballElement {
           }
         } else if (kind === "plan") {
           const plan = plans.find((p) => p.id === btn.dataset.id);
-          if (plan) this.emit("crediball-select-plan", plan);
+          if (plan && this.emit("crediball-select-plan", plan)) {
+            void this.startSubscriptionCheckout(plan.id);
+          }
         } else if (kind === "amount") {
           const amount = Number(btn.dataset.amount);
           if (this.emit("crediball-topup", { amount })) {
@@ -394,12 +396,24 @@ var CrediballPaywallElement = class extends CrediballElement {
     this.dispatchEvent(ev);
     return !ev.defaultPrevented;
   }
-  /** Start the built-in Stripe Checkout and redirect. Errors are surfaced in the dialog. */
-  async startCheckout(input) {
-    if (!this.client) return;
+  returnPath() {
+    return typeof window !== "undefined" ? window.location.pathname + window.location.search : void 0;
+  }
+  /** Start the built-in top-up Checkout and redirect. Errors are surfaced in the dialog. */
+  startCheckout(input) {
+    if (!this.client) return Promise.resolve();
+    return this.redirect(this.client.createCheckout({ ...input, returnPath: this.returnPath() }));
+  }
+  /** Start the built-in recurring subscription Checkout and redirect. */
+  startSubscriptionCheckout(planId) {
+    if (!this.client) return Promise.resolve();
+    return this.redirect(
+      this.client.createSubscriptionCheckout({ planId, returnPath: this.returnPath() })
+    );
+  }
+  async redirect(session) {
     try {
-      const returnPath = typeof window !== "undefined" ? window.location.pathname + window.location.search : void 0;
-      const { url } = await this.client.createCheckout({ ...input, returnPath });
+      const { url } = await session;
       if (typeof window !== "undefined") window.location.assign(url);
     } catch (err) {
       const errEl = this.shadow.querySelector(".error");

package/dist/crediball-elements.iife.js

@@ -122,22 +122,11 @@ var Crediball = (() => {
       this.costOf = (event) => {
         return this.store.get().costs[event]?.costCredits;
       };
-      this.createCheckout = async (input) => {
-        const { publishableKey, userId } = this.config;
-        const res = await fetch(`${this.apiUrl}/public/topup/checkout`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${publishableKey}`
-          },
-          body: JSON.stringify({ userId, ...input })
-        });
-        if (!res.ok) {
-          const body = await res.json().catch(() => null);
-          const message = body && typeof body === "object" && "error" in body && String(body.error) || `Checkout request failed with ${res.status}`;
-          throw new Error(message);
-        }
-        return res.json();
+      this.createCheckout = (input) => {
+        return this.postCheckout("/public/topup/checkout", input);
+      };
+      this.createSubscriptionCheckout = (input) => {
+        return this.postCheckout("/public/subscriptions/checkout", input);
       };
       this.refresh = async () => {
         const { publishableKey, userId } = this.config;
@@ -199,6 +188,23 @@ var Crediball = (() => {
       this.apiUrl = (config.apiUrl ?? DEFAULT_API_URL).replace(/\/$/, "");
       this.pollIntervalMs = config.pollIntervalMs ?? DEFAULT_POLL_MS;
     }
+    async postCheckout(path, input) {
+      const { publishableKey, userId } = this.config;
+      const res = await fetch(`${this.apiUrl}${path}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${publishableKey}`
+        },
+        body: JSON.stringify({ userId, ...input })
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => null);
+        const message = body && typeof body === "object" && "error" in body && String(body.error) || `Checkout request failed with ${res.status}`;
+        throw new Error(message);
+      }
+      return res.json();
+    }
     pause() {
       this.stopPolling();
       this.disconnectSse();
@@ -629,8 +635,8 @@ var Crediball = (() => {
                    <span class="sym">${escapeHtml(currencySymbolFor(currency))}</span>
                    <input class="custom-input" inputmode="decimal" placeholder="${custom?.minEur ?? ""}" aria-label="Custom amount" />
                    <button class="custom-add" type="button">Add</button>
-                 </div>
-                 <p class="error" hidden></p>` : ""}
+                 </div>` : ""}
+          <p class="error" hidden></p>
           <button class="close" part="close" type="button">Not now</button>
         </div>
       </div>
@@ -650,7 +656,9 @@ var Crediball = (() => {
             }
           } else if (kind === "plan") {
             const plan = plans.find((p) => p.id === btn.dataset.id);
-            if (plan) this.emit("crediball-select-plan", plan);
+            if (plan && this.emit("crediball-select-plan", plan)) {
+              void this.startSubscriptionCheckout(plan.id);
+            }
           } else if (kind === "amount") {
             const amount = Number(btn.dataset.amount);
             if (this.emit("crediball-topup", { amount })) {
@@ -692,12 +700,24 @@ var Crediball = (() => {
       this.dispatchEvent(ev);
       return !ev.defaultPrevented;
     }
-    /** Start the built-in Stripe Checkout and redirect. Errors are surfaced in the dialog. */
-    async startCheckout(input) {
-      if (!this.client) return;
+    returnPath() {
+      return typeof window !== "undefined" ? window.location.pathname + window.location.search : void 0;
+    }
+    /** Start the built-in top-up Checkout and redirect. Errors are surfaced in the dialog. */
+    startCheckout(input) {
+      if (!this.client) return Promise.resolve();
+      return this.redirect(this.client.createCheckout({ ...input, returnPath: this.returnPath() }));
+    }
+    /** Start the built-in recurring subscription Checkout and redirect. */
+    startSubscriptionCheckout(planId) {
+      if (!this.client) return Promise.resolve();
+      return this.redirect(
+        this.client.createSubscriptionCheckout({ planId, returnPath: this.returnPath() })
+      );
+    }
+    async redirect(session) {
       try {
-        const returnPath = typeof window !== "undefined" ? window.location.pathname + window.location.search : void 0;
-        const { url } = await this.client.createCheckout({ ...input, returnPath });
+        const { url } = await session;
         if (typeof window !== "undefined") window.location.assign(url);
       } catch (err) {
         const errEl = this.shadow.querySelector(".error");

package/dist/index.d.ts

@@ -92,16 +92,13 @@ declare class CrediballLowCreditWarningElement extends CrediballElement {
  * subscription-plans catalog. Call `.open()` / `.close()`, or toggle the `open`
  * attribute.
  *
- * Top-ups pay out of the box: picking a package or entering a custom amount
- * starts a Crediball-hosted Stripe Checkout (using the publishable key) and
- * redirects — the developer only has to connect payouts in the dashboard. Each
- * choice still first dispatches a bubbling, CANCELABLE event
- * (`crediball-select-package` / `crediball-topup`); call `event.preventDefault()`
- * in a listener to suppress the built-in checkout and run your own flow instead.
- *
- * Subscription plans have no built-in checkout (they need recurring billing your
- * backend sets up): picking one only dispatches `crediball-select-plan` for the
- * host to fulfil server-side.
+ * Everything pays out of the box: picking a package, entering a custom amount, or
+ * choosing a subscription plan starts a Crediball-hosted Stripe Checkout (using the
+ * publishable key) and redirects — the developer only has to connect payouts in the
+ * dashboard. Subscriptions bill recurringly and grant credits each period. Each
+ * choice first dispatches a bubbling, CANCELABLE event (`crediball-select-package` /
+ * `crediball-topup` / `crediball-select-plan`); call `event.preventDefault()` in a
+ * listener to suppress the built-in checkout and run your own flow instead.
  */
 declare class CrediballPaywallElement extends CrediballElement {
     private shadow;
@@ -112,8 +109,12 @@ declare class CrediballPaywallElement extends CrediballElement {
     protected render(): void;
     /** Dispatch a cancelable option event; returns true when the host did NOT preventDefault. */
     private emit;
-    /** Start the built-in Stripe Checkout and redirect. Errors are surfaced in the dialog. */
+    private returnPath;
+    /** Start the built-in top-up Checkout and redirect. Errors are surfaced in the dialog. */
     private startCheckout;
+    /** Start the built-in recurring subscription Checkout and redirect. */
+    private startSubscriptionCheckout;
+    private redirect;
 }
 
 export { CrediballBalanceElement, CrediballElement, CrediballLowCreditWarningElement, CrediballPaywallElement, CrediballTopUpButtonElement, CrediballUsageElement };

package/dist/index.js

@@ -5,7 +5,7 @@ import {
   CrediballPaywallElement,
   CrediballTopUpButtonElement,
   CrediballUsageElement
-} from "./chunk-VW5SGSLN.js";
+} from "./chunk-AEVAHMRY.js";
 export {
   CrediballBalanceElement,
   CrediballElement,

package/dist/register.js

@@ -4,7 +4,7 @@ import {
   CrediballPaywallElement,
   CrediballTopUpButtonElement,
   CrediballUsageElement
-} from "./chunk-VW5SGSLN.js";
+} from "./chunk-AEVAHMRY.js";
 
 // src/register.ts
 function define(name, ctor) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediball/elements",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Framework-agnostic web components for showing Crediball credits inside your AI app.",
   "license": "MIT",
   "author": "Filippo Rezzadore <filipporezzadore@gmail.com>",
@@ -56,7 +56,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@crediball/core": "^0.1.1"
+    "@crediball/core": "^0.2.0"
   },
   "devDependencies": {
     "tsup": "^8.3.5",