@crediball/elements 0.1.0 → 0.2.0

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

@@ -164,6 +164,10 @@ function formatMoney(amount, currency) {
     return `${amount.toFixed(2)} ${currency}`;
   }
 }
+var CURRENCY_SYMBOLS = { EUR: "\u20AC", USD: "$", GBP: "\xA3" };
+function currencySymbolFor(currency) {
+  return CURRENCY_SYMBOLS[currency.toUpperCase()] ?? currency;
+}
 var HTML_ESCAPES = {
   "&": "&",
   "<": "&lt;",
@@ -217,6 +221,33 @@ var STYLE = `
     border-radius: var(--crediball-radius, 9999px);
   }
   button.option .meta { opacity: 0.85; font-size: 14px; }
+  .custom-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
+  .custom-row .sym { font-size: 14px; color: var(--crediball-ink-muted, #7a7a7a); }
+  .custom-row input {
+    flex: 1;
+    min-width: 0;
+    appearance: none;
+    font: inherit;
+    font-size: 15px;
+    padding: 10px 14px;
+    border-radius: var(--crediball-radius, 9999px);
+    border: 1px solid var(--crediball-hairline, #e0e0e0);
+    background: var(--crediball-canvas, #ffffff);
+    color: var(--crediball-ink, #1d1d1f);
+    outline: none;
+  }
+  button.custom-add {
+    appearance: none;
+    border: none;
+    cursor: pointer;
+    background: var(--crediball-accent, #0066cc);
+    color: var(--crediball-on-accent, #ffffff);
+    font: inherit;
+    font-size: 15px;
+    padding: 10px 18px;
+    border-radius: var(--crediball-radius, 9999px);
+  }
+  p.error { margin: 8px 0 0; font-size: 13px; color: var(--crediball-accent, #0066cc); }
   button.close {
     width: 100%;
     margin-top: 12px;
@@ -261,6 +292,8 @@ var CrediballPaywallElement = class extends CrediballElement {
     const legacyAmounts = amountsAttr ? amountsAttr.split(",").map((s) => Number(s.trim())).filter((n) => Number.isFinite(n)) : [5, 10];
     const packages = pkgs?.packages ?? [];
     const plans = pkgs?.activeSubscription ? [] : pkgs?.subscriptionPlans ?? [];
+    const custom = pkgs?.customTopup;
+    const showCustom = Boolean(custom?.enabled);
     this.shadow.innerHTML = `
       <style>${STYLE}</style>
       <div class="overlay" part="overlay">
@@ -287,13 +320,19 @@ var CrediballPaywallElement = class extends CrediballElement {
                     <span>${escapeHtml(p.name)}</span>
                     <span class="meta">${formatMoney(p.price, currency)} \xB7 ${formatCredits(p.credits)} cr</span>
                   </button>`
-    ).join("") : legacyAmounts.map(
+    ).join("") : showCustom ? "" : legacyAmounts.map(
       (a) => `
                   <button class="option" data-kind="amount" data-amount="${a}">
                     <span>Add ${a}</span>
                   </button>`
     ).join("")}
           </div>
+          ${showCustom ? `<div class="custom-row">
+                   <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>` : ""}
           <button class="close" part="close" type="button">Not now</button>
         </div>
       </div>
@@ -308,28 +347,76 @@ var CrediballPaywallElement = class extends CrediballElement {
         const kind = btn.dataset.kind;
         if (kind === "package") {
           const pkg = packages.find((p) => p.id === btn.dataset.id);
-          if (pkg) {
-            this.dispatchEvent(
-              new CustomEvent("crediball-select-package", { detail: pkg, bubbles: true, composed: true })
-            );
+          if (pkg && this.emit("crediball-select-package", pkg)) {
+            void this.startCheckout({ packageId: pkg.id });
           }
         } else if (kind === "plan") {
           const plan = plans.find((p) => p.id === btn.dataset.id);
-          if (plan) {
-            this.dispatchEvent(
-              new CustomEvent("crediball-select-plan", { detail: plan, bubbles: true, composed: true })
-            );
-          }
+          if (plan) this.emit("crediball-select-plan", plan);
         } else if (kind === "amount") {
           const amount = Number(btn.dataset.amount);
-          this.dispatchEvent(
-            new CustomEvent("crediball-topup", { detail: { amount }, bubbles: true, composed: true })
-          );
+          if (this.emit("crediball-topup", { amount })) {
+            void this.startCheckout({ eurAmount: amount });
+          }
         }
       });
     });
+    if (showCustom) {
+      const input = this.shadow.querySelector(".custom-input");
+      const addBtn = this.shadow.querySelector(".custom-add");
+      const errEl = this.shadow.querySelector(".error");
+      const submit = () => {
+        const amount = Number(input?.value);
+        const sym = currencySymbolFor(currency);
+        if (!Number.isFinite(amount) || amount <= 0) {
+          return showError(errEl, "Enter a valid amount.");
+        }
+        if (custom?.minEur != null && amount < custom.minEur) {
+          return showError(errEl, `Minimum is ${sym}${custom.minEur}.`);
+        }
+        if (custom?.maxEur != null && amount > custom.maxEur) {
+          return showError(errEl, `Maximum is ${sym}${custom.maxEur}.`);
+        }
+        showError(errEl, null);
+        if (this.emit("crediball-topup", { amount })) {
+          void this.startCheckout({ eurAmount: amount });
+        }
+      };
+      addBtn?.addEventListener("click", submit);
+      input?.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") submit();
+      });
+    }
+  }
+  /** Dispatch a cancelable option event; returns true when the host did NOT preventDefault. */
+  emit(name, detail) {
+    const ev = new CustomEvent(name, { detail, bubbles: true, composed: true, cancelable: true });
+    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;
+    try {
+      const returnPath = typeof window !== "undefined" ? window.location.pathname + window.location.search : void 0;
+      const { url } = await this.client.createCheckout({ ...input, returnPath });
+      if (typeof window !== "undefined") window.location.assign(url);
+    } catch (err) {
+      const errEl = this.shadow.querySelector(".error");
+      showError(errEl, err instanceof Error ? err.message : "Checkout failed. Please try again.");
+    }
   }
 };
+function showError(el, message) {
+  if (!el) return;
+  if (message) {
+    el.textContent = message;
+    el.hidden = false;
+  } else {
+    el.textContent = "";
+    el.hidden = true;
+  }
+}
 
 export {
   CrediballElement,

package/dist/crediball-elements.iife.js

@@ -122,6 +122,23 @@ 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.refresh = async () => {
         const { publishableKey, userId } = this.config;
         const headers = { Authorization: `Bearer ${publishableKey}` };
@@ -445,6 +462,10 @@ var Crediball = (() => {
       return `${amount.toFixed(2)} ${currency}`;
     }
   }
+  var CURRENCY_SYMBOLS = { EUR: "\u20AC", USD: "$", GBP: "\xA3" };
+  function currencySymbolFor(currency) {
+    return CURRENCY_SYMBOLS[currency.toUpperCase()] ?? currency;
+  }
   var HTML_ESCAPES = {
     "&": "&",
     "<": "&lt;",
@@ -498,6 +519,33 @@ var Crediball = (() => {
     border-radius: var(--crediball-radius, 9999px);
   }
   button.option .meta { opacity: 0.85; font-size: 14px; }
+  .custom-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
+  .custom-row .sym { font-size: 14px; color: var(--crediball-ink-muted, #7a7a7a); }
+  .custom-row input {
+    flex: 1;
+    min-width: 0;
+    appearance: none;
+    font: inherit;
+    font-size: 15px;
+    padding: 10px 14px;
+    border-radius: var(--crediball-radius, 9999px);
+    border: 1px solid var(--crediball-hairline, #e0e0e0);
+    background: var(--crediball-canvas, #ffffff);
+    color: var(--crediball-ink, #1d1d1f);
+    outline: none;
+  }
+  button.custom-add {
+    appearance: none;
+    border: none;
+    cursor: pointer;
+    background: var(--crediball-accent, #0066cc);
+    color: var(--crediball-on-accent, #ffffff);
+    font: inherit;
+    font-size: 15px;
+    padding: 10px 18px;
+    border-radius: var(--crediball-radius, 9999px);
+  }
+  p.error { margin: 8px 0 0; font-size: 13px; color: var(--crediball-accent, #0066cc); }
   button.close {
     width: 100%;
     margin-top: 12px;
@@ -542,6 +590,8 @@ var Crediball = (() => {
       const legacyAmounts = amountsAttr ? amountsAttr.split(",").map((s) => Number(s.trim())).filter((n) => Number.isFinite(n)) : [5, 10];
       const packages = pkgs?.packages ?? [];
       const plans = pkgs?.activeSubscription ? [] : pkgs?.subscriptionPlans ?? [];
+      const custom = pkgs?.customTopup;
+      const showCustom = Boolean(custom?.enabled);
       this.shadow.innerHTML = `
       <style>${STYLE}</style>
       <div class="overlay" part="overlay">
@@ -568,13 +618,19 @@ var Crediball = (() => {
                     <span>${escapeHtml(p.name)}</span>
                     <span class="meta">${formatMoney(p.price, currency)} \xB7 ${formatCredits(p.credits)} cr</span>
                   </button>`
-      ).join("") : legacyAmounts.map(
+      ).join("") : showCustom ? "" : legacyAmounts.map(
         (a) => `
                   <button class="option" data-kind="amount" data-amount="${a}">
                     <span>Add ${a}</span>
                   </button>`
       ).join("")}
           </div>
+          ${showCustom ? `<div class="custom-row">
+                   <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>` : ""}
           <button class="close" part="close" type="button">Not now</button>
         </div>
       </div>
@@ -589,28 +645,76 @@ var Crediball = (() => {
           const kind = btn.dataset.kind;
           if (kind === "package") {
             const pkg = packages.find((p) => p.id === btn.dataset.id);
-            if (pkg) {
-              this.dispatchEvent(
-                new CustomEvent("crediball-select-package", { detail: pkg, bubbles: true, composed: true })
-              );
+            if (pkg && this.emit("crediball-select-package", pkg)) {
+              void this.startCheckout({ packageId: pkg.id });
             }
           } else if (kind === "plan") {
             const plan = plans.find((p) => p.id === btn.dataset.id);
-            if (plan) {
-              this.dispatchEvent(
-                new CustomEvent("crediball-select-plan", { detail: plan, bubbles: true, composed: true })
-              );
-            }
+            if (plan) this.emit("crediball-select-plan", plan);
           } else if (kind === "amount") {
             const amount = Number(btn.dataset.amount);
-            this.dispatchEvent(
-              new CustomEvent("crediball-topup", { detail: { amount }, bubbles: true, composed: true })
-            );
+            if (this.emit("crediball-topup", { amount })) {
+              void this.startCheckout({ eurAmount: amount });
+            }
           }
         });
       });
+      if (showCustom) {
+        const input = this.shadow.querySelector(".custom-input");
+        const addBtn = this.shadow.querySelector(".custom-add");
+        const errEl = this.shadow.querySelector(".error");
+        const submit = () => {
+          const amount = Number(input?.value);
+          const sym = currencySymbolFor(currency);
+          if (!Number.isFinite(amount) || amount <= 0) {
+            return showError(errEl, "Enter a valid amount.");
+          }
+          if (custom?.minEur != null && amount < custom.minEur) {
+            return showError(errEl, `Minimum is ${sym}${custom.minEur}.`);
+          }
+          if (custom?.maxEur != null && amount > custom.maxEur) {
+            return showError(errEl, `Maximum is ${sym}${custom.maxEur}.`);
+          }
+          showError(errEl, null);
+          if (this.emit("crediball-topup", { amount })) {
+            void this.startCheckout({ eurAmount: amount });
+          }
+        };
+        addBtn?.addEventListener("click", submit);
+        input?.addEventListener("keydown", (e) => {
+          if (e.key === "Enter") submit();
+        });
+      }
+    }
+    /** Dispatch a cancelable option event; returns true when the host did NOT preventDefault. */
+    emit(name, detail) {
+      const ev = new CustomEvent(name, { detail, bubbles: true, composed: true, cancelable: true });
+      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;
+      try {
+        const returnPath = typeof window !== "undefined" ? window.location.pathname + window.location.search : void 0;
+        const { url } = await this.client.createCheckout({ ...input, returnPath });
+        if (typeof window !== "undefined") window.location.assign(url);
+      } catch (err) {
+        const errEl = this.shadow.querySelector(".error");
+        showError(errEl, err instanceof Error ? err.message : "Checkout failed. Please try again.");
+      }
     }
   };
+  function showError(el, message) {
+    if (!el) return;
+    if (message) {
+      el.textContent = message;
+      el.hidden = false;
+    } else {
+      el.textContent = "";
+      el.hidden = true;
+    }
+  }
 
   // src/register.ts
   function define(name, ctor) {

package/dist/index.d.ts

@@ -88,13 +88,20 @@ declare class CrediballLowCreditWarningElement extends CrediballElement {
 /**
  * <crediball-paywall publishable-key="cb_pub_..." user-id="u123" title="..." description="..."></crediball-paywall>
  *
- * A themeable top-up dialog driven by the live packages/subscription-plans
- * catalog. Call `.open()` / `.close()`, or toggle the `open` attribute.
- * Purchases are never made client-side (the publishable key can't authorize
- * money movement) — selecting an option dispatches a bubbling event
- * (`crediball-select-package`, `crediball-select-plan`, or `crediball-topup`
- * for the legacy `amounts` fallback) that the host page listens for and
- * fulfils server-side, then calls `.close()`.
+ * A themeable top-up dialog driven by the live packages/custom-topup/
+ * 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.
  */
 declare class CrediballPaywallElement extends CrediballElement {
     private shadow;
@@ -103,6 +110,10 @@ declare class CrediballPaywallElement extends CrediballElement {
     open(): void;
     close(): void;
     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 startCheckout;
 }
 
 export { CrediballBalanceElement, CrediballElement, CrediballLowCreditWarningElement, CrediballPaywallElement, CrediballTopUpButtonElement, CrediballUsageElement };

package/dist/index.js

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

package/dist/register.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediball/elements",
-  "version": "0.1.0",
+  "version": "0.2.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.0"
+    "@crediball/core": "^0.1.1"
   },
   "devDependencies": {
     "tsup": "^8.3.5",