@crediball/react 0.4.0 → 0.6.0

package/dist/CrediballProvider.d.ts

@@ -27,16 +27,32 @@ export interface CrediballProviderProps {
      */
     amounts?: number[];
     /**
-     * Called when the user picks an amount to top up (legacy flat-amount flow).
-     * Wire this to your checkout or server-side top-up route. If omitted,
-     * picking an amount just closes the modal.
+     * Optional override for the custom-amount top-up. If omitted, the paywall
+     * starts a Crediball-hosted Stripe Checkout itself (using publishableKey +
+     * userId) and redirects — no backend wiring needed, just connect payouts in the
+     * dashboard. Provide this only to run your own top-up/checkout flow instead.
      */
     onTopup?: (amount: number) => void | Promise<void>;
-    /** Called when the user picks a one-time package. Call `meter.topup({ userId, packageId })` server-side. */
+    /**
+     * Optional override for one-time packages. If omitted, the paywall starts a
+     * Crediball-hosted Stripe Checkout itself and redirects (connect payouts in the
+     * dashboard). Provide this only to run your own flow (e.g. `meter.topup({ userId,
+     * packageId })` server-side).
+     */
     onSelectPackage?: (pkg: PackageOption) => void | Promise<void>;
-    /** Called when the user picks a subscription plan. Call `meter.subscribe({ userId, planId })` server-side. */
+    /**
+     * Optional override for subscription plans. If omitted, the paywall starts a
+     * recurring Stripe Checkout itself (connect payouts in the dashboard) and Stripe
+     * grants the plan's credits each period. Provide this only to run your own flow
+     * (e.g. `meter.subscribe({ userId, planId })` server-side).
+     */
     onSelectPlan?: (plan: SubscriptionPlanOption) => void | Promise<void>;
-    /** Called when the user cancels their subscription. Call `meter.cancelSubscription({ userId, subscriptionId })` server-side. */
+    /**
+     * Called when the user cancels their subscription. Cancellation is server-side
+     * only (it needs your secret key), so the paywall shows a Cancel button on the
+     * active-subscription banner ONLY when this is provided — wire it to
+     * `meter.cancelSubscription({ userId, subscriptionId })` on your backend.
+     */
     onCancelSubscription?: (subscriptionId: string) => void | Promise<void>;
     /**
      * Auto-detect insufficient-credit responses from any fetch() call and open the
@@ -47,9 +63,15 @@ export interface CrediballProviderProps {
      * ndjson (streaming/SSE routes where the error arrives as a stream chunk).
      */
     watchFetch?: boolean;
-    /** Allow a free-form amount entry in the paywall. */
+    /**
+     * Show a free-form amount field in the paywall. Defaults to your dashboard's
+     * custom-topup setting (with its min/max) when packages are loaded — set this
+     * explicitly only to override (e.g. `false` to force-hide it).
+     */
     allowCustom?: boolean;
+    /** Override the custom-amount minimum (defaults to the dashboard's configured minimum). */
     customMin?: number;
+    /** Override the custom-amount maximum (defaults to the dashboard's configured maximum). */
     customMax?: number;
     /** Currency symbol shown in the paywall (default "€"). Match your app's billing currency. */
     currencySymbol?: string;

package/dist/CrediballProvider.js

@@ -38,7 +38,7 @@ const getEmptySnapshot = () => EMPTY_SNAPSHOT;
  * SSE/streaming routes (text/event-stream, ndjson) are also handled automatically —
  * the watcher scans each chunk for credit errors, so no manual wiring is needed.
  */
-export function CrediballProvider({ children, publishableKey, userId, apiUrl, pollIntervalMs, lowCreditThreshold, amounts = [5, 10, 20], onTopup, onSelectPackage, onSelectPlan, onCancelSubscription, watchFetch = true, allowCustom = false, customMin, customMax, currencySymbol = "€", title, description, accentColor, }) {
+export function CrediballProvider({ children, publishableKey, userId, apiUrl, pollIntervalMs, lowCreditThreshold, amounts = [5, 10, 20], onTopup, onSelectPackage, onSelectPlan, onCancelSubscription, watchFetch = true, allowCustom, customMin, customMax, currencySymbol = "€", title, description, accentColor, }) {
     const [open, setOpen] = useState(false);
     const showPaywall = useCallback(() => setOpen(true), []);
     const hidePaywall = useCallback(() => setOpen(false), []);
@@ -92,40 +92,115 @@ export function CrediballProvider({ children, publishableKey, userId, apiUrl, po
         topUp,
         refresh,
     }), [showPaywall, hidePaywall, open, snapshot, costOf, topUp, refresh]);
+    // The page to return to after Stripe checkout — the one the user is on now.
+    function currentReturnPath() {
+        if (typeof window === "undefined")
+            return undefined;
+        return window.location.pathname + window.location.search;
+    }
+    // Drive a Crediball-hosted Stripe Checkout with just the publishable key — used
+    // when the host didn't wire its own onSelectPackage/onTopup handler, so the
+    // paywall's buttons work out of the box (the developer only has to connect
+    // payouts in the dashboard). Redirects the browser to Stripe on success.
+    async function startBuiltInCheckout(input) {
+        if (!client)
+            return;
+        const { url } = await client.createCheckout({ ...input, returnPath: currentReturnPath() });
+        if (typeof window !== "undefined")
+            window.location.assign(url);
+    }
     async function handleAdd(amount) {
-        try {
-            await topUp(amount);
+        // A host-supplied top-up flow always wins.
+        if (onTopup) {
+            try {
+                await topUp(amount);
+            }
+            finally {
+                setOpen(false);
+            }
+            return;
         }
-        finally {
-            setOpen(false);
+        // Otherwise start Stripe ourselves (custom amount). Leave the modal open on
+        // failure so the error is visible instead of the modal silently closing.
+        if (client) {
+            try {
+                await startBuiltInCheckout({ eurAmount: amount });
+            }
+            catch (err) {
+                console.error("[crediball] checkout failed:", err);
+            }
+            return;
         }
+        // Data-less mode with no handler: nothing to charge against.
+        setOpen(false);
     }
     async function handleSelectPackage(pkg) {
-        try {
-            await onSelectPackage?.(pkg);
-            notifyBalanceChanged();
-            await client?.refresh();
+        if (onSelectPackage) {
+            try {
+                await onSelectPackage(pkg);
+                notifyBalanceChanged();
+                await client?.refresh();
+            }
+            finally {
+                setOpen(false);
+            }
+            return;
         }
-        finally {
-            setOpen(false);
+        if (client) {
+            try {
+                await startBuiltInCheckout({ packageId: pkg.id });
+            }
+            catch (err) {
+                console.error("[crediball] checkout failed:", err);
+            }
+            return;
         }
+        setOpen(false);
     }
     async function handleSelectPlan(plan) {
-        try {
-            await onSelectPlan?.(plan);
-            notifyBalanceChanged();
-            await client?.refresh();
+        // Host-supplied subscription flow wins.
+        if (onSelectPlan) {
+            try {
+                await onSelectPlan(plan);
+                notifyBalanceChanged();
+                await client?.refresh();
+            }
+            finally {
+                setOpen(false);
+            }
+            return;
         }
-        finally {
-            setOpen(false);
+        // Otherwise start the recurring Stripe Checkout ourselves. Leave the modal
+        // open on failure so the error is visible.
+        if (client) {
+            try {
+                const { url } = await client.createSubscriptionCheckout({
+                    planId: plan.id,
+                    returnPath: currentReturnPath(),
+                });
+                if (typeof window !== "undefined")
+                    window.location.assign(url);
+            }
+            catch (err) {
+                console.error("[crediball] subscription checkout failed:", err);
+            }
+            return;
         }
+        setOpen(false);
     }
     async function handleCancelSubscription(subscriptionId) {
         await onCancelSubscription?.(subscriptionId);
         await client?.refresh();
     }
     const pkgs = snapshot.packages;
-    return (_jsxs(CrediballContext.Provider, { value: ctx, children: [children, _jsx(PaywallModal, { open: open, packages: pkgs?.packages, onSelectPackage: handleSelectPackage, subscriptionPlans: pkgs?.subscriptionPlans, onSelectPlan: handleSelectPlan, activeSubscription: pkgs?.activeSubscription, onCancelSubscription: handleCancelSubscription, amounts: amounts, amountPrefix: `Add ${currencySymbol}`, onAdd: handleAdd, onClose: hidePaywall, allowCustom: allowCustom, customMin: customMin, customMax: customMax, currencySymbol: currencySymbol, balance: snapshot.balance ?? undefined, balanceRate: pkgs?.customTopup.enabled ? pkgs.customTopup.rate : undefined, currency: pkgs?.currency, usage: snapshot.usage?.usedCredits ?? undefined, title: title, description: description, accentColor: accentColor })] }));
+    // Auto-derive the custom-amount field from the dashboard's custom-topup config,
+    // so a developer who enabled it doesn't also have to pass allowCustom/min/max.
+    // Explicit props still win (allowCustom={false} force-hides it).
+    const customCfg = pkgs?.customTopup;
+    const effectiveAllowCustom = allowCustom ?? customCfg?.enabled ?? false;
+    const effectiveCustomMin = customMin ?? customCfg?.minEur;
+    const effectiveCustomMax = customMax ?? customCfg?.maxEur ?? undefined;
+    return (_jsxs(CrediballContext.Provider, { value: ctx, children: [children, _jsx(PaywallModal, { open: open, packages: pkgs?.packages, onSelectPackage: handleSelectPackage, subscriptionPlans: pkgs?.subscriptionPlans, onSelectPlan: handleSelectPlan, activeSubscription: pkgs?.activeSubscription, onCancelSubscription: handleCancelSubscription, amounts: amounts, amountPrefix: `Add ${currencySymbol}`, onAdd: handleAdd, onClose: hidePaywall, allowCustom: effectiveAllowCustom, customMin: effectiveCustomMin, customMax: effectiveCustomMax, currencySymbol: currencySymbol, balance: snapshot.balance ?? undefined, balanceRate: pkgs?.customTopup.enabled ? pkgs.customTopup.rate : undefined, currency: pkgs?.currency, usage: snapshot.usage?.usedCredits ?? undefined, title: title, description: description, accentColor: accentColor })] }));
 }
 /**
  * Access the paywall + live data from anywhere inside <CrediballProvider>.

package/dist/PaywallModal.js

@@ -130,7 +130,7 @@ export function PaywallModal({ open, packages, onSelectPackage, subscriptionPlan
                         borderRadius: theme.radiusCard,
                         background: "#f5f5f7",
                         border: `1px solid ${theme.hairline}`,
-                    }, children: [_jsx("div", { style: { fontSize: 13, fontWeight: 600, color: theme.ink }, children: cancelDone ? "Subscription canceled" : `${activeSubscription.planName} · ${activeSubscription.planPeriod}` }), !cancelDone && (_jsx("button", { onClick: handleCancelSubscription, disabled: cancelPending, style: {
+                    }, children: [_jsx("div", { style: { fontSize: 13, fontWeight: 600, color: theme.ink }, children: cancelDone ? "Subscription canceled" : `${activeSubscription.planName} · ${activeSubscription.planPeriod}` }), onCancelSubscription && !cancelDone && (_jsx("button", { onClick: handleCancelSubscription, disabled: cancelPending, style: {
                                 marginTop: 8,
                                 appearance: "none",
                                 border: "none",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediball/react",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Drop-in React components for showing Crediball credits inside your AI app.",
   "license": "MIT",
   "author": "Filippo Rezzadore <filipporezzadore@gmail.com>",
@@ -51,7 +51,7 @@
     "react": ">=18"
   },
   "dependencies": {
-    "@crediball/core": "^0.1.0"
+    "@crediball/core": "^0.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.11",