@crediball/react 0.5.0 → 0.6.0

package/dist/CrediballProvider.d.ts

@@ -41,13 +41,18 @@ export interface CrediballProviderProps {
      */
     onSelectPackage?: (pkg: PackageOption) => void | Promise<void>;
     /**
-     * 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.
+     * 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

package/dist/CrediballProvider.js

@@ -158,14 +158,35 @@ export function CrediballProvider({ children, publishableKey, userId, apiUrl, po
         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);
@@ -179,11 +200,7 @@ export function CrediballProvider({ children, publishableKey, userId, apiUrl, po
     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 })] }));
+    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.5.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.1"
+    "@crediball/core": "^0.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.11",