@crediball/react 0.4.0 → 0.5.0

package/dist/CrediballProvider.d.ts

@@ -27,14 +27,25 @@ 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. */
+    /**
+     * Called when the user picks a subscription plan. Unlike one-time top-ups,
+     * subscriptions have NO built-in checkout (they need recurring billing your
+     * backend sets up), so the paywall only shows subscription plans when this is
+     * provided — wire it to `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. */
     onCancelSubscription?: (subscriptionId: string) => void | Promise<void>;
@@ -47,9 +58,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,23 +92,70 @@ 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 {
@@ -125,7 +172,18 @@ export function CrediballProvider({ children, publishableKey, userId, apiUrl, po
         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, 
+                // Subscriptions can't be fulfilled by the built-in checkout (that path is
+                // one-time top-ups only), so only OFFER them when the host wired an
+                // onSelectPlan to fulfill them — otherwise they'd be dead buttons.
+                subscriptionPlans: onSelectPlan ? pkgs?.subscriptionPlans : undefined, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediball/react",
-  "version": "0.4.0",
+  "version": "0.5.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.1.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.11",