@solvapay/react 2.0.1-preview-7d806cc7af767dec26b099517bc6ededc85adf9a → 2.0.1

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @solvapay/react changelog
 
-## 2.0.1-preview-7d806cc7af767dec26b099517bc6ededc85adf9a
+## 2.0.1
 
 ### Patch Changes
 
@@ -16,9 +16,12 @@
   on the plan row. Usage surfaces (`useUsage`, `getUsageCore`, plan cards) derive
   from `options[]` instead of trusting `planSnapshot.isMetered` alone.
 
+- 30f7021: PAYG embedded checkout now activates first, then shows the credit top-up picker only when the wallet is empty.
+
+  A funded wallet skips the amount and payment steps. `ActivationFlow` follows the same contract: API `activated` at zero credits opens the amount picker instead of firing `onSuccess`. Once the customer is on the amount or payment step, a later zero-credit balance refetch no longer rewinds them back to the picker.
+
 - Updated dependencies [a47adff]
-  - @solvapay/core@1.5.0-preview-7d806cc7af767dec26b099517bc6ededc85adf9a
-  - @solvapay/mcp-core@0.3.2-preview-7d806cc7af767dec26b099517bc6ededc85adf9a
+  - @solvapay/core@1.5.0
 
 ## 2.0.0
 

package/dist/{chunk-VUGPLAS4.js → chunk-BHG7Z5XV.js}

@@ -14,7 +14,7 @@ import {
   usePurchaseStatus,
   useSolvaPay,
   useTransport
-} from "./chunk-JN5BJ5MI.js";
+} from "./chunk-GMZU5M6R.js";
 
 // src/components/CancelledPlanNotice.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{chunk-JN5BJ5MI.js → chunk-GMZU5M6R.js}

@@ -483,7 +483,7 @@ var enCopy = {
     activateButton: "Activate",
     activatingLabel: "Activating...",
     topupHeading: "Add credits",
-    topupSubheading: "Top up your credits to activate this plan.",
+    topupSubheading: "Top up your credits to start using this plan.",
     continueToPayment: "Continue to payment",
     changeAmountButton: "Change amount",
     retryingHeading: "Activating your plan...",
@@ -816,7 +816,7 @@ var SolvaPayProvider = ({ config, children }) => {
     setHasAttachBusinessDetails(!!transportRef.current.attachBusinessDetails);
   }, [config]);
   const fetchBalanceImpl = useCallback(async () => {
-    if (optimisticUntilRef.current > Date.now()) return;
+    if (optimisticUntilRef.current > Date.now()) return creditsValueRef.current;
     if (!isAuthenticated && !internalCustomerRef) {
       creditsValueRef.current = null;
       setCreditsValue(null);
@@ -826,18 +826,16 @@ var SolvaPayProvider = ({ config, children }) => {
       setDisplayBlockValue(null);
       setBalanceLoading(false);
       balanceLoadedRef.current = false;
-      return;
+      return null;
     }
-    if (balanceInFlightRef.current) return;
+    if (balanceInFlightRef.current) return creditsValueRef.current;
     balanceInFlightRef.current = true;
     if (!balanceLoadedRef.current) {
       setBalanceLoading(true);
     }
     try {
       if (!transportRef.current.getBalance) {
-        setBalanceLoading(false);
-        balanceInFlightRef.current = false;
-        return;
+        return creditsValueRef.current;
       }
       const data = await transportRef.current.getBalance();
       creditsValueRef.current = data.credits ?? null;
@@ -847,8 +845,10 @@ var SolvaPayProvider = ({ config, children }) => {
       setDisplayExchangeRateValue(data.displayExchangeRate ?? null);
       setDisplayBlockValue(data.display ?? null);
       balanceLoadedRef.current = true;
+      return creditsValueRef.current;
     } catch (error) {
       console.error("[SolvaPayProvider] Failed to fetch balance:", error);
+      return creditsValueRef.current;
     } finally {
       setBalanceLoading(false);
       balanceInFlightRef.current = false;
@@ -6698,8 +6698,23 @@ function useCheckoutFlow(opts) {
     setStatus("activating");
     try {
       await transport.activatePlan({ productRef, planRef: selectedPlanRef });
+      const credits = await balance.refetch() ?? balance.credits;
+      if (credits == null) {
+        throw new Error("Credit balance is unavailable");
+      }
       setStatus("idle");
-      setStep("amount");
+      if (credits === 0) {
+        setStep("amount");
+      } else {
+        const meta = {
+          branch: "payg",
+          plan: selectedPlanShape,
+          rateLabel: formatPaygRate(selectedPlanShape, locale, balance)
+        };
+        setSuccessMeta(meta);
+        setStep("success");
+        onPurchaseSuccessRef.current?.(meta);
+      }
       return true;
     } catch (err) {
       const wrapped = err instanceof Error ? err : new Error("Activation failed");
@@ -6708,13 +6723,37 @@ function useCheckoutFlow(opts) {
       onErrorRef.current?.(wrapped, "activate");
       return false;
     }
-  }, [productRef, selectedPlanRef, selectedPlanShape, transport]);
+  }, [balance, locale, productRef, selectedPlanRef, selectedPlanShape, transport]);
   const advanceFromPlan = useCallback21(async () => {
     if (!selectedPlanShape || !selectedPlanRef) return;
     if (branch === "payg") {
       if (planCtx.currentPlanRef === selectedPlanRef) {
         setError(null);
-        setStep("amount");
+        setStatus("activating");
+        try {
+          const credits = await balance.refetch() ?? balance.credits;
+          if (credits == null) {
+            throw new Error("Credit balance is unavailable");
+          }
+          setStatus("idle");
+          if (credits === 0) {
+            setStep("amount");
+          } else {
+            const meta = {
+              branch: "payg",
+              plan: selectedPlanShape,
+              rateLabel: formatPaygRate(selectedPlanShape, locale, balance)
+            };
+            setSuccessMeta(meta);
+            setStep("success");
+            onPurchaseSuccessRef.current?.(meta);
+          }
+        } catch (err) {
+          const wrapped = err instanceof Error ? err : new Error("Activation failed");
+          setError(wrapped.message);
+          setStatus("error");
+          onErrorRef.current?.(wrapped, "activate");
+        }
         return;
       }
       await runActivate();
@@ -6722,7 +6761,7 @@ function useCheckoutFlow(opts) {
     }
     setError(null);
     setStep("payment");
-  }, [branch, planCtx.currentPlanRef, runActivate, selectedPlanRef, selectedPlanShape]);
+  }, [balance, branch, locale, planCtx.currentPlanRef, runActivate, selectedPlanRef, selectedPlanShape]);
   const recordPaygSuccess = useCallback21(
     (creditsAddedFromBackend) => {
       if (!selectedPlanShape || selectedAmountMinor == null) return;

package/dist/{chunk-J4VSGFAF.js → chunk-ZKFTT5WD.js}

@@ -40,7 +40,7 @@ import {
   useTopupAmountSelector,
   withPaymentElementDefaults,
   writeAutoRechargeCache
-} from "./chunk-JN5BJ5MI.js";
+} from "./chunk-GMZU5M6R.js";
 
 // src/TopupForm.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -216,12 +216,29 @@ var Root2 = forwardRef3(function ActivationFlowRoot({
   const { activate, state, error, result, reset } = useActivation();
   const currency = plan?.currency ?? "USD";
   const amountSelector = useTopupAmountSelector({ currency });
-  const { adjustBalance, creditsPerMinorUnit, displayExchangeRate } = useBalance();
+  const {
+    credits,
+    adjustBalance,
+    creditsPerMinorUnit,
+    displayExchangeRate,
+    refetch,
+    loading: balanceLoading
+  } = useBalance();
   const [step, setStep] = useState2("summary");
   const calledSuccessRef = useRef(false);
   const retryTimeoutRef = useRef(null);
   useEffect2(() => {
-    if (state === "activated" && !calledSuccessRef.current) {
+    if (state !== "activated") return;
+    if (step === "selectAmount" || step === "topupPayment") return;
+    const isUsagePlan = plan?.type === "usage-based";
+    if (isUsagePlan && (credits === null || balanceLoading)) {
+      return;
+    }
+    if (isUsagePlan && credits === 0) {
+      setStep("selectAmount");
+      return;
+    }
+    if (!calledSuccessRef.current) {
       calledSuccessRef.current = true;
       setStep("activated");
       if (result) {
@@ -229,7 +246,7 @@ var Root2 = forwardRef3(function ActivationFlowRoot({
         onSuccess?.(activationResult);
       }
     }
-  }, [state, result, onSuccess]);
+  }, [state, result, onSuccess, credits, plan, balanceLoading, step]);
   useEffect2(() => {
     if (state === "topup_required" && (step === "summary" || step === "activating")) {
       setStep("selectAmount");
@@ -245,7 +262,8 @@ var Root2 = forwardRef3(function ActivationFlowRoot({
     if (!resolvedPlanRef) return;
     setStep("activating");
     await activate({ productRef, planRef: resolvedPlanRef });
-  }, [activate, productRef, resolvedPlanRef]);
+    await refetch();
+  }, [activate, productRef, resolvedPlanRef, refetch]);
   const goToTopupPayment = useCallback(() => {
     if (amountSelector.validate()) setStep("topupPayment");
   }, [amountSelector]);
@@ -336,16 +354,7 @@ var Root2 = forwardRef3(function ActivationFlowRoot({
     ]
   );
   const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx4(ActivationFlowContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx4(
-    Comp,
-    {
-      ref: forwardedRef,
-      "data-solvapay-activation-flow": "",
-      "data-state": step,
-      ...rest,
-      children
-    }
-  ) });
+  return /* @__PURE__ */ jsx4(ActivationFlowContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx4(Comp, { ref: forwardedRef, "data-solvapay-activation-flow": "", "data-state": step, ...rest, children }) });
 });
 function matchStep(step, allowed) {
   return allowed.includes(step);
@@ -435,16 +444,7 @@ var ErrorSlot2 = forwardRef3(function ActivationFlowError({ asChild, children, .
   const ctx = useFlowCtx("Error");
   if (ctx.step !== "error") return null;
   const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx4(
-    Comp,
-    {
-      ref: forwardedRef,
-      role: "alert",
-      "data-solvapay-activation-flow-error": "",
-      ...rest,
-      children: children ?? ctx.error
-    }
-  );
+  return /* @__PURE__ */ jsx4(Comp, { ref: forwardedRef, role: "alert", "data-solvapay-activation-flow-error": "", ...rest, children: children ?? ctx.error });
 });
 var ActivationFlowRoot2 = Root2;
 var ActivationFlowSummary2 = Summary;
@@ -2885,22 +2885,27 @@ function Success({ className, children }) {
   }
   const meta = flow.successMeta;
   if (meta.branch === "payg") {
+    const chargedAmount = meta.amountMinor;
+    const chargedCurrency = meta.currency;
+    const charged = chargedAmount != null && chargedCurrency != null;
     return /* @__PURE__ */ jsxs3("div", { className: className ?? "solvapay-checkout-success", "data-branch": "payg", children: [
       /* @__PURE__ */ jsx7("div", { className: "solvapay-checkout-success-check", "aria-hidden": "true", children: "\u2713" }),
-      /* @__PURE__ */ jsx7("h2", { className: "solvapay-checkout-success-heading", children: "Credits added" }),
+      /* @__PURE__ */ jsx7("h2", { className: "solvapay-checkout-success-heading", children: charged ? "Credits added" : "Plan activated" }),
       /* @__PURE__ */ jsx7("p", { className: "solvapay-checkout-success-subheading", children: "Pay as you go plan is active." }),
       /* @__PURE__ */ jsxs3("dl", { className: "solvapay-checkout-receipt", "data-variant": "payg", children: [
-        /* @__PURE__ */ jsxs3("div", { className: "solvapay-checkout-receipt-row", children: [
-          /* @__PURE__ */ jsx7("dt", { children: "Amount" }),
-          /* @__PURE__ */ jsx7("dd", { children: formatPrice(meta.amountMinor, meta.currency, { locale }) })
-        ] }),
-        /* @__PURE__ */ jsxs3("div", { className: "solvapay-checkout-receipt-row", children: [
-          /* @__PURE__ */ jsx7("dt", { children: "Credits" }),
-          /* @__PURE__ */ jsxs3("dd", { children: [
-            "+",
-            meta.creditsAdded.toLocaleString(locale)
+        charged ? /* @__PURE__ */ jsxs3(Fragment4, { children: [
+          /* @__PURE__ */ jsxs3("div", { className: "solvapay-checkout-receipt-row", children: [
+            /* @__PURE__ */ jsx7("dt", { children: "Amount" }),
+            /* @__PURE__ */ jsx7("dd", { children: formatPrice(chargedAmount, chargedCurrency, { locale }) })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "solvapay-checkout-receipt-row", children: [
+            /* @__PURE__ */ jsx7("dt", { children: "Credits" }),
+            /* @__PURE__ */ jsxs3("dd", { children: [
+              "+",
+              (meta.creditsAdded ?? 0).toLocaleString(locale)
+            ] })
           ] })
-        ] }),
+        ] }) : null,
         /* @__PURE__ */ jsxs3("div", { className: "solvapay-checkout-receipt-row", children: [
           /* @__PURE__ */ jsx7("dt", { children: "Plan" }),
           /* @__PURE__ */ jsx7("dd", { children: meta.plan.name ?? "Pay as you go" })

package/dist/{index-DHK9Op-i.d.ts → index-DHcgeDBy.d.ts}

@@ -1,4 +1,4 @@
-import { $ as components, b as Plan, P as PaymentFormProps, a as PrefillCustomer, A as ActivationResult, r as UseTopupAmountSelectorReturn, a0 as AutoRechargeInput, t as AutoRechargeConfig, a1 as AutoRechargeDisplayBlock, E as CheckoutStep, O as SuccessMeta } from './shared-CAxz5wWs.js';
+import { $ as components, b as Plan, P as PaymentFormProps, a as PrefillCustomer, A as ActivationResult, r as UseTopupAmountSelectorReturn, a0 as AutoRechargeInput, t as AutoRechargeConfig, a1 as AutoRechargeDisplayBlock, E as CheckoutStep, O as SuccessMeta } from './shared-BI78qUom.js';
 import React from 'react';
 import { PaymentElement, CardElement } from '@stripe/react-stripe-js';
 import { TaxBreakdown } from '@solvapay/core';
@@ -411,8 +411,11 @@ declare const BalanceBadge: React.ForwardRefExoticComponent<React.HTMLAttributes
  * ActivationFlow compound primitive.
  *
  * Drives the usage-based plan activation state machine:
- *   summary → activating → (topup_required → selectAmount → topupPayment →
- *     retrying) → activated | error.
+ *   summary → activating → (activated + empty wallet → selectAmount →
+ *     topupPayment → retrying) → activated | error.
+ *
+ * `topup_required` remains a tolerated legacy activate status that also
+ * opens the amount picker.
  *
  * `Root` exposes `data-state` set to the current step and publishes the
  * shared context consumed by leaves. Leaves render only during their

package/dist/{index-BuVbt1j1.d.cts → index-jmmZYs2K.d.cts}

@@ -1,4 +1,4 @@
-import { $ as components, b as Plan, P as PaymentFormProps, a as PrefillCustomer, A as ActivationResult, r as UseTopupAmountSelectorReturn, a0 as AutoRechargeInput, t as AutoRechargeConfig, a1 as AutoRechargeDisplayBlock, E as CheckoutStep, O as SuccessMeta } from './shared-A_Sg-fJE.cjs';
+import { $ as components, b as Plan, P as PaymentFormProps, a as PrefillCustomer, A as ActivationResult, r as UseTopupAmountSelectorReturn, a0 as AutoRechargeInput, t as AutoRechargeConfig, a1 as AutoRechargeDisplayBlock, E as CheckoutStep, O as SuccessMeta } from './shared-BgyNW-D3.cjs';
 import React from 'react';
 import { PaymentElement, CardElement } from '@stripe/react-stripe-js';
 import { TaxBreakdown } from '@solvapay/core';
@@ -411,8 +411,11 @@ declare const BalanceBadge: React.ForwardRefExoticComponent<React.HTMLAttributes
  * ActivationFlow compound primitive.
  *
  * Drives the usage-based plan activation state machine:
- *   summary → activating → (topup_required → selectAmount → topupPayment →
- *     retrying) → activated | error.
+ *   summary → activating → (activated + empty wallet → selectAmount →
+ *     topupPayment → retrying) → activated | error.
+ *
+ * `topup_required` remains a tolerated legacy activate status that also
+ * opens the amount picker.
  *
  * `Root` exposes `data-state` set to the current step and publishes the
  * shared context consumed by leaves. Leaves render only during their

package/dist/index.cjs

@@ -727,7 +727,7 @@ var enCopy = {
     activateButton: "Activate",
     activatingLabel: "Activating...",
     topupHeading: "Add credits",
-    topupSubheading: "Top up your credits to activate this plan.",
+    topupSubheading: "Top up your credits to start using this plan.",
     continueToPayment: "Continue to payment",
     changeAmountButton: "Change amount",
     retryingHeading: "Activating your plan...",
@@ -980,7 +980,7 @@ var SolvaPayProvider = ({ config, children }) => {
     setHasAttachBusinessDetails(!!transportRef.current.attachBusinessDetails);
   }, [config]);
   const fetchBalanceImpl = (0, import_react2.useCallback)(async () => {
-    if (optimisticUntilRef.current > Date.now()) return;
+    if (optimisticUntilRef.current > Date.now()) return creditsValueRef.current;
     if (!isAuthenticated && !internalCustomerRef) {
       creditsValueRef.current = null;
       setCreditsValue(null);
@@ -990,18 +990,16 @@ var SolvaPayProvider = ({ config, children }) => {
       setDisplayBlockValue(null);
       setBalanceLoading(false);
       balanceLoadedRef.current = false;
-      return;
+      return null;
     }
-    if (balanceInFlightRef.current) return;
+    if (balanceInFlightRef.current) return creditsValueRef.current;
     balanceInFlightRef.current = true;
     if (!balanceLoadedRef.current) {
       setBalanceLoading(true);
     }
     try {
       if (!transportRef.current.getBalance) {
-        setBalanceLoading(false);
-        balanceInFlightRef.current = false;
-        return;
+        return creditsValueRef.current;
       }
       const data = await transportRef.current.getBalance();
       creditsValueRef.current = data.credits ?? null;
@@ -1011,8 +1009,10 @@ var SolvaPayProvider = ({ config, children }) => {
       setDisplayExchangeRateValue(data.displayExchangeRate ?? null);
       setDisplayBlockValue(data.display ?? null);
       balanceLoadedRef.current = true;
+      return creditsValueRef.current;
     } catch (error) {
       console.error("[SolvaPayProvider] Failed to fetch balance:", error);
+      return creditsValueRef.current;
     } finally {
       setBalanceLoading(false);
       balanceInFlightRef.current = false;
@@ -6202,12 +6202,29 @@ var Root7 = (0, import_react29.forwardRef)(function ActivationFlowRoot({
   const { activate, state, error, result, reset } = useActivation();
   const currency = plan?.currency ?? "USD";
   const amountSelector = useTopupAmountSelector({ currency });
-  const { adjustBalance, creditsPerMinorUnit, displayExchangeRate } = useBalance();
+  const {
+    credits,
+    adjustBalance,
+    creditsPerMinorUnit,
+    displayExchangeRate,
+    refetch,
+    loading: balanceLoading
+  } = useBalance();
   const [step, setStep] = (0, import_react29.useState)("summary");
   const calledSuccessRef = (0, import_react29.useRef)(false);
   const retryTimeoutRef = (0, import_react29.useRef)(null);
   (0, import_react29.useEffect)(() => {
-    if (state === "activated" && !calledSuccessRef.current) {
+    if (state !== "activated") return;
+    if (step === "selectAmount" || step === "topupPayment") return;
+    const isUsagePlan = plan?.type === "usage-based";
+    if (isUsagePlan && (credits === null || balanceLoading)) {
+      return;
+    }
+    if (isUsagePlan && credits === 0) {
+      setStep("selectAmount");
+      return;
+    }
+    if (!calledSuccessRef.current) {
       calledSuccessRef.current = true;
       setStep("activated");
       if (result) {
@@ -6215,7 +6232,7 @@ var Root7 = (0, import_react29.forwardRef)(function ActivationFlowRoot({
         onSuccess?.(activationResult);
       }
     }
-  }, [state, result, onSuccess]);
+  }, [state, result, onSuccess, credits, plan, balanceLoading, step]);
   (0, import_react29.useEffect)(() => {
     if (state === "topup_required" && (step === "summary" || step === "activating")) {
       setStep("selectAmount");
@@ -6231,7 +6248,8 @@ var Root7 = (0, import_react29.forwardRef)(function ActivationFlowRoot({
     if (!resolvedPlanRef) return;
     setStep("activating");
     await activate({ productRef, planRef: resolvedPlanRef });
-  }, [activate, productRef, resolvedPlanRef]);
+    await refetch();
+  }, [activate, productRef, resolvedPlanRef, refetch]);
   const goToTopupPayment = (0, import_react29.useCallback)(() => {
     if (amountSelector.validate()) setStep("topupPayment");
   }, [amountSelector]);
@@ -6322,16 +6340,7 @@ var Root7 = (0, import_react29.forwardRef)(function ActivationFlowRoot({
     ]
   );
   const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ActivationFlowContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    Comp,
-    {
-      ref: forwardedRef,
-      "data-solvapay-activation-flow": "",
-      "data-state": step,
-      ...rest,
-      children
-    }
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ActivationFlowContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Comp, { ref: forwardedRef, "data-solvapay-activation-flow": "", "data-state": step, ...rest, children }) });
 });
 function matchStep(step, allowed) {
   return allowed.includes(step);
@@ -6421,16 +6430,7 @@ var ErrorSlot5 = (0, import_react29.forwardRef)(function ActivationFlowError({ a
   const ctx = useFlowCtx("Error");
   if (ctx.step !== "error") return null;
   const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    Comp,
-    {
-      ref: forwardedRef,
-      role: "alert",
-      "data-solvapay-activation-flow-error": "",
-      ...rest,
-      children: children ?? ctx.error
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Comp, { ref: forwardedRef, role: "alert", "data-solvapay-activation-flow-error": "", ...rest, children: children ?? ctx.error });
 });
 var ActivationFlow = {
   Root: Root7,
@@ -10318,8 +10318,23 @@ function useCheckoutFlow(opts) {
     setStatus("activating");
     try {
       await transport.activatePlan({ productRef, planRef: selectedPlanRef });
+      const credits = await balance.refetch() ?? balance.credits;
+      if (credits == null) {
+        throw new Error("Credit balance is unavailable");
+      }
       setStatus("idle");
-      setStep("amount");
+      if (credits === 0) {
+        setStep("amount");
+      } else {
+        const meta = {
+          branch: "payg",
+          plan: selectedPlanShape,
+          rateLabel: formatPaygRate(selectedPlanShape, locale, balance)
+        };
+        setSuccessMeta(meta);
+        setStep("success");
+        onPurchaseSuccessRef.current?.(meta);
+      }
       return true;
     } catch (err) {
       const wrapped = err instanceof Error ? err : new Error("Activation failed");
@@ -10328,13 +10343,37 @@ function useCheckoutFlow(opts) {
       onErrorRef.current?.(wrapped, "activate");
       return false;
     }
-  }, [productRef, selectedPlanRef, selectedPlanShape, transport]);
+  }, [balance, locale, productRef, selectedPlanRef, selectedPlanShape, transport]);
   const advanceFromPlan = (0, import_react48.useCallback)(async () => {
     if (!selectedPlanShape || !selectedPlanRef) return;
     if (branch === "payg") {
       if (planCtx.currentPlanRef === selectedPlanRef) {
         setError(null);
-        setStep("amount");
+        setStatus("activating");
+        try {
+          const credits = await balance.refetch() ?? balance.credits;
+          if (credits == null) {
+            throw new Error("Credit balance is unavailable");
+          }
+          setStatus("idle");
+          if (credits === 0) {
+            setStep("amount");
+          } else {
+            const meta = {
+              branch: "payg",
+              plan: selectedPlanShape,
+              rateLabel: formatPaygRate(selectedPlanShape, locale, balance)
+            };
+            setSuccessMeta(meta);
+            setStep("success");
+            onPurchaseSuccessRef.current?.(meta);
+          }
+        } catch (err) {
+          const wrapped = err instanceof Error ? err : new Error("Activation failed");
+          setError(wrapped.message);
+          setStatus("error");
+          onErrorRef.current?.(wrapped, "activate");
+        }
         return;
       }
       await runActivate();
@@ -10342,7 +10381,7 @@ function useCheckoutFlow(opts) {
     }
     setError(null);
     setStep("payment");
-  }, [branch, planCtx.currentPlanRef, runActivate, selectedPlanRef, selectedPlanShape]);
+  }, [balance, branch, locale, planCtx.currentPlanRef, runActivate, selectedPlanRef, selectedPlanShape]);
   const recordPaygSuccess = (0, import_react48.useCallback)(
     (creditsAddedFromBackend) => {
       if (!selectedPlanShape || selectedAmountMinor == null) return;
@@ -11279,22 +11318,27 @@ function Success({ className, children }) {
   }
   const meta = flow.successMeta;
   if (meta.branch === "payg") {
+    const chargedAmount = meta.amountMinor;
+    const chargedCurrency = meta.currency;
+    const charged = chargedAmount != null && chargedCurrency != null;
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: className ?? "solvapay-checkout-success", "data-branch": "payg", children: [
       /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "solvapay-checkout-success-check", "aria-hidden": "true", children: "\u2713" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h2", { className: "solvapay-checkout-success-heading", children: "Credits added" }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h2", { className: "solvapay-checkout-success-heading", children: charged ? "Credits added" : "Plan activated" }),
       /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "solvapay-checkout-success-subheading", children: "Pay as you go plan is active." }),
       /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("dl", { className: "solvapay-checkout-receipt", "data-variant": "payg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dt", { children: "Amount" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dd", { children: formatPrice(meta.amountMinor, meta.currency, { locale }) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dt", { children: "Credits" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("dd", { children: [
-            "+",
-            meta.creditsAdded.toLocaleString(locale)
+        charged ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dt", { children: "Amount" }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dd", { children: formatPrice(chargedAmount, chargedCurrency, { locale }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dt", { children: "Credits" }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("dd", { children: [
+              "+",
+              (meta.creditsAdded ?? 0).toLocaleString(locale)
+            ] })
           ] })
-        ] }),
+        ] }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dt", { children: "Plan" }),
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dd", { children: meta.plan.name ?? "Pay as you go" })

package/dist/index.d.cts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { S as SolvaPayProviderProps, P as PaymentFormProps, a as PrefillCustomer, T as TopupFormProps, C as CheckoutResult, b as Plan, A as ActivationResult, c as SaveAutoRechargeResponse, d as PurchaseStatus, e as SolvaPayContextValue, U as UsePlansOptions, f as UsePlansReturn, g as UsePlanOptions, h as UsePlanReturn, i as UseProductReturn, j as UseMerchantReturn, k as SolvaPayCopy, l as PurchaseStatusReturn, m as CancelResult, R as ReactivateResult, n as ActivatePlanResult, o as UseTopupOptions, p as UseTopupReturn, B as BalanceStatus, q as UseTopupAmountSelectorOptions, r as UseTopupAmountSelectorReturn, s as UsePaymentMethodReturn, t as AutoRechargeConfig, u as SaveAutoRechargeInput, v as SolvaPayTransport, w as PartialSolvaPayCopy, x as PurchaseInfo, y as Product, z as SolvaPayConfig } from './shared-A_Sg-fJE.cjs';
-export { D as BootstrapPlanLike, E as CheckoutStep, F as CustomerPurchaseData, M as MandateContext, G as MandateTemplate, H as Merchant, I as PaymentError, J as PaymentIntentResult, K as PaymentMethodInfo, L as PaymentResult, N as PurchaseStatusValue, O as SuccessMeta, Q as TopupPaymentResult, V as TransportBalanceResult, W as TransportCheckoutSessionResult, X as TransportCustomerSessionResult, Y as TransportLimitsResult, Z as UnsupportedTransportMethodError } from './shared-A_Sg-fJE.cjs';
-import { P as PaymentFormSummary, a as PaymentFormCustomerFields, b as PaymentFormPaymentElement, c as PaymentFormCardElement, d as PaymentFormMandateText, e as PaymentFormTermsCheckbox, f as PaymentFormSubmitButton, g as PaymentFormLoading, h as PaymentFormError, i as PaymentFormLegalFooter, j as PaymentFormBusinessDetails, k as PaymentFormTaxSummary, A as AutoRechargeInputPayload, l as PaywallStructuredContent, C as CheckoutVariant } from './index-BuVbt1j1.cjs';
-export { m as ActivationFlowStep, B as BalanceBadge, n as CancelPlanButton, o as CheckoutErrorPhase, p as CheckoutStatus, q as CheckoutSteps, r as CheckoutSummary, s as CheckoutSummaryProps, M as MandateText, t as MandateTextProps, u as PlanBadge, v as ProductBadge, w as PurchaseGate, U as UsageSnapshot, x as UseCheckoutFlowOptions, y as UseCheckoutFlowReturn, z as UseUsageReturn, D as configToAutoRechargeInput, E as deriveVariant, F as useCheckoutFlow, G as useCheckoutStepsContext, H as useUsage } from './index-BuVbt1j1.cjs';
+import { S as SolvaPayProviderProps, P as PaymentFormProps, a as PrefillCustomer, T as TopupFormProps, C as CheckoutResult, b as Plan, A as ActivationResult, c as SaveAutoRechargeResponse, d as PurchaseStatus, e as SolvaPayContextValue, U as UsePlansOptions, f as UsePlansReturn, g as UsePlanOptions, h as UsePlanReturn, i as UseProductReturn, j as UseMerchantReturn, k as SolvaPayCopy, l as PurchaseStatusReturn, m as CancelResult, R as ReactivateResult, n as ActivatePlanResult, o as UseTopupOptions, p as UseTopupReturn, B as BalanceStatus, q as UseTopupAmountSelectorOptions, r as UseTopupAmountSelectorReturn, s as UsePaymentMethodReturn, t as AutoRechargeConfig, u as SaveAutoRechargeInput, v as SolvaPayTransport, w as PartialSolvaPayCopy, x as PurchaseInfo, y as Product, z as SolvaPayConfig } from './shared-BgyNW-D3.cjs';
+export { D as BootstrapPlanLike, E as CheckoutStep, F as CustomerPurchaseData, M as MandateContext, G as MandateTemplate, H as Merchant, I as PaymentError, J as PaymentIntentResult, K as PaymentMethodInfo, L as PaymentResult, N as PurchaseStatusValue, O as SuccessMeta, Q as TopupPaymentResult, V as TransportBalanceResult, W as TransportCheckoutSessionResult, X as TransportCustomerSessionResult, Y as TransportLimitsResult, Z as UnsupportedTransportMethodError } from './shared-BgyNW-D3.cjs';
+import { P as PaymentFormSummary, a as PaymentFormCustomerFields, b as PaymentFormPaymentElement, c as PaymentFormCardElement, d as PaymentFormMandateText, e as PaymentFormTermsCheckbox, f as PaymentFormSubmitButton, g as PaymentFormLoading, h as PaymentFormError, i as PaymentFormLegalFooter, j as PaymentFormBusinessDetails, k as PaymentFormTaxSummary, A as AutoRechargeInputPayload, l as PaywallStructuredContent, C as CheckoutVariant } from './index-jmmZYs2K.cjs';
+export { m as ActivationFlowStep, B as BalanceBadge, n as CancelPlanButton, o as CheckoutErrorPhase, p as CheckoutStatus, q as CheckoutSteps, r as CheckoutSummary, s as CheckoutSummaryProps, M as MandateText, t as MandateTextProps, u as PlanBadge, v as ProductBadge, w as PurchaseGate, U as UsageSnapshot, x as UseCheckoutFlowOptions, y as UseCheckoutFlowReturn, z as UseUsageReturn, D as configToAutoRechargeInput, E as deriveVariant, F as useCheckoutFlow, G as useCheckoutStepsContext, H as useUsage } from './index-jmmZYs2K.cjs';
 import { PaymentIntent, Stripe, StripeElements } from '@stripe/stripe-js';
 import { BusinessDetailsInput, TaxBreakdown } from '@solvapay/core';
 export { AuthAdapter, createAnonymousAuthAdapter, defaultAuthAdapter, getOrCreateAnonymousCustomerRef, resetAnonymousCustomerRef } from './adapters/auth.cjs';
@@ -237,8 +237,8 @@ declare const AmountPicker: React.FC<AmountPickerProps>;
  * Renders the full usage-based activation state machine (summary →
  * activating → selectAmount → topupPayment → retrying → activated | error)
  * with the golden-path copy, the embedded `<CheckoutSummary>` + `<TopupForm>`,
- * and an optional back button. Full control is available by composing the
- * primitive at `@solvapay/react/primitives`.
+ * and an optional back button. After activate, an empty wallet opens the
+ * amount picker; a funded wallet completes immediately.
  */
 
 interface ActivationFlowProps {

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { S as SolvaPayProviderProps, P as PaymentFormProps, a as PrefillCustomer, T as TopupFormProps, C as CheckoutResult, b as Plan, A as ActivationResult, c as SaveAutoRechargeResponse, d as PurchaseStatus, e as SolvaPayContextValue, U as UsePlansOptions, f as UsePlansReturn, g as UsePlanOptions, h as UsePlanReturn, i as UseProductReturn, j as UseMerchantReturn, k as SolvaPayCopy, l as PurchaseStatusReturn, m as CancelResult, R as ReactivateResult, n as ActivatePlanResult, o as UseTopupOptions, p as UseTopupReturn, B as BalanceStatus, q as UseTopupAmountSelectorOptions, r as UseTopupAmountSelectorReturn, s as UsePaymentMethodReturn, t as AutoRechargeConfig, u as SaveAutoRechargeInput, v as SolvaPayTransport, w as PartialSolvaPayCopy, x as PurchaseInfo, y as Product, z as SolvaPayConfig } from './shared-CAxz5wWs.js';
-export { D as BootstrapPlanLike, E as CheckoutStep, F as CustomerPurchaseData, M as MandateContext, G as MandateTemplate, H as Merchant, I as PaymentError, J as PaymentIntentResult, K as PaymentMethodInfo, L as PaymentResult, N as PurchaseStatusValue, O as SuccessMeta, Q as TopupPaymentResult, V as TransportBalanceResult, W as TransportCheckoutSessionResult, X as TransportCustomerSessionResult, Y as TransportLimitsResult, Z as UnsupportedTransportMethodError } from './shared-CAxz5wWs.js';
-import { P as PaymentFormSummary, a as PaymentFormCustomerFields, b as PaymentFormPaymentElement, c as PaymentFormCardElement, d as PaymentFormMandateText, e as PaymentFormTermsCheckbox, f as PaymentFormSubmitButton, g as PaymentFormLoading, h as PaymentFormError, i as PaymentFormLegalFooter, j as PaymentFormBusinessDetails, k as PaymentFormTaxSummary, A as AutoRechargeInputPayload, l as PaywallStructuredContent, C as CheckoutVariant } from './index-DHK9Op-i.js';
-export { m as ActivationFlowStep, B as BalanceBadge, n as CancelPlanButton, o as CheckoutErrorPhase, p as CheckoutStatus, q as CheckoutSteps, r as CheckoutSummary, s as CheckoutSummaryProps, M as MandateText, t as MandateTextProps, u as PlanBadge, v as ProductBadge, w as PurchaseGate, U as UsageSnapshot, x as UseCheckoutFlowOptions, y as UseCheckoutFlowReturn, z as UseUsageReturn, D as configToAutoRechargeInput, E as deriveVariant, F as useCheckoutFlow, G as useCheckoutStepsContext, H as useUsage } from './index-DHK9Op-i.js';
+import { S as SolvaPayProviderProps, P as PaymentFormProps, a as PrefillCustomer, T as TopupFormProps, C as CheckoutResult, b as Plan, A as ActivationResult, c as SaveAutoRechargeResponse, d as PurchaseStatus, e as SolvaPayContextValue, U as UsePlansOptions, f as UsePlansReturn, g as UsePlanOptions, h as UsePlanReturn, i as UseProductReturn, j as UseMerchantReturn, k as SolvaPayCopy, l as PurchaseStatusReturn, m as CancelResult, R as ReactivateResult, n as ActivatePlanResult, o as UseTopupOptions, p as UseTopupReturn, B as BalanceStatus, q as UseTopupAmountSelectorOptions, r as UseTopupAmountSelectorReturn, s as UsePaymentMethodReturn, t as AutoRechargeConfig, u as SaveAutoRechargeInput, v as SolvaPayTransport, w as PartialSolvaPayCopy, x as PurchaseInfo, y as Product, z as SolvaPayConfig } from './shared-BI78qUom.js';
+export { D as BootstrapPlanLike, E as CheckoutStep, F as CustomerPurchaseData, M as MandateContext, G as MandateTemplate, H as Merchant, I as PaymentError, J as PaymentIntentResult, K as PaymentMethodInfo, L as PaymentResult, N as PurchaseStatusValue, O as SuccessMeta, Q as TopupPaymentResult, V as TransportBalanceResult, W as TransportCheckoutSessionResult, X as TransportCustomerSessionResult, Y as TransportLimitsResult, Z as UnsupportedTransportMethodError } from './shared-BI78qUom.js';
+import { P as PaymentFormSummary, a as PaymentFormCustomerFields, b as PaymentFormPaymentElement, c as PaymentFormCardElement, d as PaymentFormMandateText, e as PaymentFormTermsCheckbox, f as PaymentFormSubmitButton, g as PaymentFormLoading, h as PaymentFormError, i as PaymentFormLegalFooter, j as PaymentFormBusinessDetails, k as PaymentFormTaxSummary, A as AutoRechargeInputPayload, l as PaywallStructuredContent, C as CheckoutVariant } from './index-DHcgeDBy.js';
+export { m as ActivationFlowStep, B as BalanceBadge, n as CancelPlanButton, o as CheckoutErrorPhase, p as CheckoutStatus, q as CheckoutSteps, r as CheckoutSummary, s as CheckoutSummaryProps, M as MandateText, t as MandateTextProps, u as PlanBadge, v as ProductBadge, w as PurchaseGate, U as UsageSnapshot, x as UseCheckoutFlowOptions, y as UseCheckoutFlowReturn, z as UseUsageReturn, D as configToAutoRechargeInput, E as deriveVariant, F as useCheckoutFlow, G as useCheckoutStepsContext, H as useUsage } from './index-DHcgeDBy.js';
 import { PaymentIntent, Stripe, StripeElements } from '@stripe/stripe-js';
 import { BusinessDetailsInput, TaxBreakdown } from '@solvapay/core';
 export { AuthAdapter, createAnonymousAuthAdapter, defaultAuthAdapter, getOrCreateAnonymousCustomerRef, resetAnonymousCustomerRef } from './adapters/auth.js';
@@ -237,8 +237,8 @@ declare const AmountPicker: React.FC<AmountPickerProps>;
  * Renders the full usage-based activation state machine (summary →
  * activating → selectAmount → topupPayment → retrying → activated | error)
  * with the golden-path copy, the embedded `<CheckoutSummary>` + `<TopupForm>`,
- * and an optional back button. Full control is available by composing the
- * primitive at `@solvapay/react/primitives`.
+ * and an optional back button. After activate, an empty wallet opens the
+ * amount picker; a funded wallet completes immediately.
  */
 
 interface ActivationFlowProps {