@crediball/react 0.5.0 → 0.7.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
@@ -68,7 +73,12 @@ export interface CrediballProviderProps {
     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. */
+    /**
+     * Currency symbol shown in the paywall. Auto-derived (via Intl) from the ISO
+     * currency you configured on the dashboard's Packages page once packages load,
+     * so it never drifts out of sync if you switch currencies there. Pass this only
+     * to force a specific symbol instead. Falls back to "€" before the first fetch.
+     */
     currencySymbol?: string;
     title?: string;
     description?: string;
@@ -127,7 +137,7 @@ interface CrediballContextValue {
  * 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 declare function CrediballProvider({ children, publishableKey, userId, apiUrl, pollIntervalMs, lowCreditThreshold, amounts, onTopup, onSelectPackage, onSelectPlan, onCancelSubscription, watchFetch, allowCustom, customMin, customMax, currencySymbol, title, description, accentColor, }: CrediballProviderProps): import("react").JSX.Element;
+export declare function CrediballProvider({ children, publishableKey, userId, apiUrl, pollIntervalMs, lowCreditThreshold, amounts, onTopup, onSelectPackage, onSelectPlan, onCancelSubscription, watchFetch, allowCustom, customMin, customMax, currencySymbol: currencySymbolProp, title, description, accentColor, }: CrediballProviderProps): import("react").JSX.Element;
 /**
  * Access the paywall + live data from anywhere inside <CrediballProvider>.
  *

package/dist/CrediballProvider.js

@@ -18,6 +18,22 @@ const EMPTY_SNAPSHOT = {
 };
 const noopSubscribe = () => () => { };
 const getEmptySnapshot = () => EMPTY_SNAPSHOT;
+/**
+ * Map an ISO 4217 code (as returned by the dashboard's packages config) to a
+ * display symbol via Intl, so the paywall doesn't need a hand-maintained
+ * currency → symbol table that can fall out of sync with the dashboard.
+ */
+function symbolForCurrency(iso) {
+    try {
+        const part = new Intl.NumberFormat(undefined, { style: "currency", currency: iso })
+            .formatToParts(0)
+            .find((p) => p.type === "currency");
+        return part?.value ?? iso;
+    }
+    catch {
+        return iso;
+    }
+}
 /**
  * Pattern B, automated. Wrap your app once:
  *
@@ -38,7 +54,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, 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: currencySymbolProp, title, description, accentColor, }) {
     const [open, setOpen] = useState(false);
     const showPaywall = useCallback(() => setOpen(true), []);
     const hidePaywall = useCallback(() => setOpen(false), []);
@@ -158,20 +174,46 @@ 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);
         await client?.refresh();
     }
     const pkgs = snapshot.packages;
+    // Follow the dashboard's configured currency once packages load, unless the
+    // host pins an explicit symbol. Falls back to "€" only until the first fetch
+    // resolves, so switching currencies on the Packages page never requires a
+    // matching code change/redeploy here.
+    const currencySymbol = currencySymbolProp ?? (pkgs?.currency ? symbolForCurrency(pkgs.currency) : "€");
     // 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).
@@ -179,11 +221,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,10 +1,10 @@
 {
   "name": "@crediball/react",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Drop-in React components for showing Crediball credits inside your AI app.",
   "license": "MIT",
   "author": "Filippo Rezzadore <filipporezzadore@gmail.com>",
-  "homepage": "https://crediball.app",
+  "homepage": "https://crediball.ai",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/filipporezzadore/Crediball.git",
@@ -51,7 +51,7 @@
     "react": ">=18"
   },
   "dependencies": {
-    "@crediball/core": "^0.1.1"
+    "@crediball/core": "^0.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.11",