@solvapay/react 2.1.1 → 2.2.0-preview-e3e546693c002c32f128d83bf6c5fe76ac182a79

package/dist/{chunk-LL6AYSTC.js → chunk-VTGYZIE2.js}

@@ -152,7 +152,8 @@ var DEFAULT_ROUTES = {
   getPaymentMethod: "/api/payment-method",
   autoRecharge: "/api/auto-recharge",
   getUsage: "/api/usage",
-  getLimits: "/api/limits"
+  getLimits: "/api/limits",
+  getHistory: "/api/history"
 };
 function routeFor(config, key) {
   const configured = config?.api?.[key];
@@ -322,8 +323,22 @@ function createHttpTransport(config) {
         overage: data.overage,
         needsTopUp: data.needsTopUp,
         needsUpgrade: data.needsUpgrade,
-        upgraded: data.upgraded
+        upgraded: data.upgraded,
+        ...data.used !== void 0 ? { used: data.used } : {},
+        ...data.limit !== void 0 ? { limit: data.limit } : {}
       };
+    },
+    getHistory: async (params = {}) => {
+      const base = routeFor(config, "getHistory");
+      const search = new URLSearchParams();
+      if (params.productRef) search.set("productRef", params.productRef);
+      if (params.limit !== void 0) search.set("limit", String(params.limit));
+      const qs = search.toString();
+      return request(config, qs ? `${base}?${qs}` : base, {
+        method: "GET",
+        onErrorContext: "getHistory",
+        errorPrefix: "Failed to load history"
+      });
     }
   };
 }
@@ -467,7 +482,7 @@ var enCopy = {
     invalidThreshold: "Enter a valid balance threshold.",
     thresholdTooLow: "Balance threshold must be greater than zero.",
     minTopupAmount: "Top-up amount must be at least {amount}.",
-    topupBelowThreshold: "Top-up amount must be at least your balance threshold ({amount}).",
+    deepDrawdownExplainer: "If your balance has fallen well below the threshold, we add a multiple of this amount in one charge.",
     invalidMaxMonthlySpend: "Maximum monthly spend must be a positive amount.",
     maxMonthlySpendBelowTopup: "Maximum monthly spend must be at least your top-up amount ({amount}).",
     maxMonthlySpendLabel: "Maximum monthly spend (optional)",
@@ -483,6 +498,24 @@ var enCopy = {
     taxDisclosure: "Plus applicable tax.",
     statusFailed: "Payment failed \u2014 update your card to resume"
   },
+  autoRechargeView: {
+    heading: "Auto-recharge",
+    description: "Tops your balance up automatically so calls do not fail. Nothing is charged today.",
+    thresholdLabel: "When balance falls below",
+    topupLabel: "Add each time",
+    maxMonthlySpendLabel: "Maximum monthly spend",
+    maxMonthlySpendPlaceholder: "No limit",
+    explainer: "Each recharge adds about {credits} credits, plus applicable tax. If your balance has fallen well below the threshold we add a multiple of this amount in one charge. Leave the spend limit blank for unlimited recharges.",
+    explainerNoEstimate: "Each recharge includes applicable tax. If your balance has fallen well below the threshold we add a multiple of this amount in one charge. Leave the spend limit blank for unlimited recharges.",
+    footerCaption: "Recharges use the payment method on your account. First charge happens when your balance drops below {threshold}.",
+    cancel: "Cancel",
+    turnOn: "Turn on auto-recharge",
+    save: "Save changes",
+    turnOff: "Turn off auto-recharge",
+    statusOn: "On",
+    back: "Back to account",
+    setupUnexpected: "Your saved card is no longer reusable. Add a card from checkout, then try again."
+  },
   activationFlow: {
     heading: "Confirm your plan",
     activateButton: "Activate",
@@ -526,6 +559,9 @@ var enCopy = {
     expiresOn: "Expires {date}",
     validIndefinitely: "Valid indefinitely",
     startedOn: "Started {date}",
+    priceFieldLabel: "Price",
+    rateFieldLabel: "Rate",
+    balanceFieldLabel: "Balance",
     paymentMethod: "{brand} \u2022\u2022\u2022\u2022 {last4}",
     paymentMethodExpires: "expires {month}/{year}",
     noPaymentMethod: "No payment method on file",
@@ -545,7 +581,65 @@ var enCopy = {
     noPlanTitle: "Pick a plan",
     noPlanBody: "Choose a free, pay-as-you-go, or paid plan to start using this MCP server.",
     seePlansButton: "See plans",
-    pickPlanButton: "Pick a plan"
+    seePlans: "See plans \u2192",
+    pickPlanButton: "Pick a plan",
+    upgradeButton: "Upgrade",
+    changePlanButton: "Change plan",
+    needMoreAllowance: "Need more than {total} {unit} a {interval}?",
+    upgradePaygCaption: "Pay as you go starts without payment and uses your credits.",
+    noPlanStatus: "No plan",
+    choosePlanCaption: "Choose a plan to start using it. Calls fail until one is active.",
+    plansEyebrow: "Plans",
+    carryOnEyebrow: "Carry on with",
+    plansStartCaption: "Free and Pay as you go start immediately. Paid plans take payment first.",
+    activatePlanButton: "Activate",
+    switchPlanButton: "Switch",
+    activatingPlanButton: "Activating\u2026",
+    usedUpTitle: "Your {plan} {unit} are used up",
+    usedUpBody: "Calls fail until the limit resets on {date}, in {days} days. Choose a paid plan to carry on now.",
+    usedUpBodyNoDate: "Calls fail until you choose a paid plan.",
+    antiTrapCredits: "You have {credits} credits. {plan} does not spend them, so adding funds will not restore calls.",
+    waitUntilReset: "Or wait until {date} and keep the {plan} plan. Nothing is charged automatically.",
+    notStartedStatus: "Not started",
+    readyToClaim: "{total} free {unit} a {interval}, ready to claim",
+    noCardCaption: "No card, no charge. You can change plan later.",
+    startFreePlan: "Start free plan",
+    stillWorking: "Calls are still working.",
+    seeHigherLimit: "See plans with a higher limit \u2192",
+    usedOfAllowance: "{used} of {total} {unit}",
+    activeUntil: "Active until {date}",
+    cancelledPlanLine: "{plan} \xB7 cancelled {date}",
+    daysLeftTitle: "{days} days left on this plan",
+    cancelledBody: "Calls keep working until {date}, then stop. You will not be charged again.",
+    reactivatePlan: "Reactivate {plan}",
+    creditBalance: "Credit balance",
+    addFunds: "Add funds",
+    autoRechargeOn: "Auto-recharge on",
+    autoRechargeOff: "Auto-recharge off",
+    turnOn: "Turn on \u2192",
+    manage: "Manage \u2192",
+    autoRechargeOffCaption: "Calls fail the moment the balance runs out.",
+    autoRechargeOffFixCaption: "Turning it on stops this happening again.",
+    callsFailingCaption: "The plan is active, but calls fail until you add credits.",
+    activeProducts: "Active products",
+    worksAcross: "Works across every {merchant} product.",
+    soldBy: "Sold by {merchant}",
+    fullHistory: "Full history",
+    fullAccount: "Full account",
+    creditActivityEyebrow: "Credit activity",
+    chargesEyebrow: "Charges for this product",
+    creditActivityCaption: "Every credit event on your account, newest first, including other products and top-ups. Credits are shared, so the balance only makes sense account-wide.",
+    creditActivityEmpty: "No credit activity yet.",
+    creditActivityFailed: "Couldn't load credit activity.",
+    chargesEmpty: "No charges yet.",
+    chargesFailed: "Couldn't load charges.",
+    eventColumn: "Event",
+    whenColumn: "When",
+    creditsColumn: "Credits",
+    balanceColumn: "Balance",
+    chargeColumn: "Charge",
+    dateColumn: "Date",
+    amountColumn: "Amount"
   },
   customerPortal: {
     launchButton: "Manage account",
@@ -624,7 +718,30 @@ var enCopy = {
     atLimit: "You've reached your usage limit.",
     topUpCta: "Add credits",
     upgradeCta: "Upgrade plan",
-    refreshCta: "Refresh"
+    refreshCta: "Refresh",
+    remainingEyebrow: "Remaining",
+    renewsEyebrow: "Renews",
+    resetsEyebrow: "Resets",
+    creditsEyebrow: "Credits",
+    usedEyebrow: "Used",
+    remainingCalls: "{remaining} {unit}",
+    remainingOfTotal: "{remaining} of {total} {unit}",
+    ofTotalThisPeriod: "Of {total} this period.",
+    usedOfTotalPercent: "{used} of {total} {unit} used, {percent}%.",
+    warningThresholdHint: "A warning shows at 80%, and calls stop at 100%.",
+    lastCallHint: "One remaining {unit} is the difference between working and blocked.",
+    afterFirstCall: "After your first call",
+    inDays: "In {days} days.",
+    notKnownYet: "Not known yet",
+    creditsNotUsed: "Not used",
+    creditsUntouched: "Balance is untouched.",
+    creditsDoNotSpend: "This plan does not spend your balance.",
+    rateConfirmedAtCheckout: "Rate confirmed at checkout",
+    fromCreditsPerCall: "from {credits} credits per call",
+    creditsPerCall: "{credits} credits per call",
+    callsFailing: "Calls failing",
+    overAllowance: "Over the allowance",
+    limitReached: "{plan} limit reached"
   }
 };
 
@@ -1435,6 +1552,45 @@ function useLocale() {
   return useCopyContext().locale;
 }
 
+// src/hooks/useExternalLink.tsx
+import { createContext as createContext3, useCallback as useCallback2, useContext as useContext2 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ExternalLinkContext = createContext3(null);
+function ExternalLinkProvider({ opener, children }) {
+  return /* @__PURE__ */ jsx4(ExternalLinkContext.Provider, { value: opener, children });
+}
+function useOpenExternal() {
+  const opener = useContext2(ExternalLinkContext);
+  return useCallback2(
+    async (url) => {
+      if (opener?.canOpen()) return opener.open(url);
+      if (typeof window !== "undefined") {
+        window.open(url, "_blank", "noopener,noreferrer");
+      }
+      return true;
+    },
+    [opener]
+  );
+}
+function useExternalLinkClick() {
+  const opener = useContext2(ExternalLinkContext);
+  return useCallback2(
+    (event) => {
+      if (event.defaultPrevented) return;
+      if (!opener?.canOpen()) return;
+      const href = event.currentTarget.href;
+      if (!href) return;
+      event.preventDefault();
+      void opener.open(href).then((opened) => {
+        if (!opened) {
+          console.warn(`[solvapay] host declined to open ${href}`);
+        }
+      });
+    },
+    [opener]
+  );
+}
+
 // src/primitives/LegalFooter.tsx
 import { forwardRef } from "react";
 
@@ -1444,7 +1600,7 @@ var SOLVAPAY_PRIVACY_URL = "https://solvapay.com/legal/privacy";
 var SOLVAPAY_WEBSITE_URL = "https://solvapay.com";
 
 // src/primitives/LegalFooter.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs } from "react/jsx-runtime";
 var LegalFooter = forwardRef(
   function LegalFooter2({
     attribution = "provided",
@@ -1455,39 +1611,43 @@ var LegalFooter = forwardRef(
     ...rest
   }, forwardedRef) {
     const copy = useCopy();
+    const handleExternalClick = useExternalLinkClick();
     const attributionLabel = attribution === "provided" ? copy.legalFooter.providedBy : attribution === "powered" ? copy.legalFooter.poweredBy : null;
     const Comp = asChild ? Slot : "div";
-    return /* @__PURE__ */ jsx4(Comp, { ref: forwardedRef, "data-solvapay-legal-footer": "", ...rest, children: children ?? /* @__PURE__ */ jsxs(Fragment2, { children: [
+    return /* @__PURE__ */ jsx5(Comp, { ref: forwardedRef, "data-solvapay-legal-footer": "", ...rest, children: children ?? /* @__PURE__ */ jsxs(Fragment2, { children: [
       /* @__PURE__ */ jsxs("div", { "data-solvapay-legal-footer-links": "", children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "a",
           {
             "data-solvapay-legal-footer-link": "",
             href: termsUrl,
             target: "_blank",
             rel: "noopener noreferrer",
+            onClick: handleExternalClick,
             children: copy.legalFooter.terms
           }
         ),
-        /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: " \xB7 " }),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", children: " \xB7 " }),
+        /* @__PURE__ */ jsx5(
           "a",
           {
             "data-solvapay-legal-footer-link": "",
             href: privacyUrl,
             target: "_blank",
             rel: "noopener noreferrer",
+            onClick: handleExternalClick,
             children: copy.legalFooter.privacy
           }
         )
       ] }),
-      attributionLabel ? /* @__PURE__ */ jsx4(
+      attributionLabel ? /* @__PURE__ */ jsx5(
         "a",
         {
           "data-solvapay-legal-footer-attribution": "",
           href: SOLVAPAY_WEBSITE_URL,
           target: "_blank",
           rel: "noopener noreferrer",
+          onClick: handleExternalClick,
           children: attributionLabel
         }
       ) : null
@@ -1496,9 +1656,9 @@ var LegalFooter = forwardRef(
 );
 
 // src/hooks/useSolvaPay.ts
-import { useContext as useContext2 } from "react";
+import { useContext as useContext3 } from "react";
 function useSolvaPay() {
-  const context = useContext2(SolvaPayContext);
+  const context = useContext3(SolvaPayContext);
   if (!context) {
     throw new Error(
       "useSolvaPay must be used within a SolvaPayProvider. Wrap your component tree with <SolvaPayProvider> to use this hook."
@@ -1508,19 +1668,19 @@ function useSolvaPay() {
 }
 
 // src/hooks/useCheckout.ts
-import { useState as useState2, useCallback as useCallback2, useRef as useRef2 } from "react";
+import { useState as useState2, useCallback as useCallback3, useRef as useRef2 } from "react";
 import { loadStripe } from "@stripe/stripe-js";
 
 // src/components/PlanSelectionContext.tsx
-import { createContext as createContext3, useContext as useContext3 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var PlanSelectionContext = createContext3(null);
+import { createContext as createContext4, useContext as useContext4 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var PlanSelectionContext = createContext4(null);
 var PlanSelectionProvider = ({
   value,
   children
-}) => /* @__PURE__ */ jsx5(PlanSelectionContext.Provider, { value, children });
+}) => /* @__PURE__ */ jsx6(PlanSelectionContext.Provider, { value, children });
 function usePlanSelection() {
-  return useContext3(PlanSelectionContext);
+  return useContext4(PlanSelectionContext);
 }
 
 // src/hooks/useCheckout.ts
@@ -1571,7 +1731,7 @@ function useCheckout(options) {
   const [processorPaymentId, setProcessorPaymentId] = useState2(null);
   const [resolvedPlanRef, setResolvedPlanRef] = useState2(planRef || null);
   const isStartingRef = useRef2(false);
-  const startCheckout = useCallback2(async () => {
+  const startCheckout = useCallback3(async () => {
     if (isStartingRef.current || loading) {
       return;
     }
@@ -1647,7 +1807,7 @@ function useCheckout(options) {
     loading,
     _config
   ]);
-  const reset = useCallback2(() => {
+  const reset = useCallback3(() => {
     isStartingRef.current = false;
     setLoading(false);
     setError(null);
@@ -1689,7 +1849,7 @@ function useCustomer() {
 }
 
 // src/hooks/usePlans.ts
-import { useContext as useContext4, useState as useState3, useEffect as useEffect2, useCallback as useCallback3, useMemo as useMemo3, useRef as useRef3 } from "react";
+import { useContext as useContext5, useState as useState3, useEffect as useEffect2, useCallback as useCallback4, useMemo as useMemo3, useRef as useRef3 } from "react";
 
 // src/transport/list-plans.ts
 async function defaultListPlans(productRef, config) {
@@ -1742,7 +1902,7 @@ function usePlans(options) {
     initialPlanRef,
     selectionReady = true
   } = options;
-  const solvaContext = useContext4(SolvaPayContext);
+  const solvaContext = useContext5(SolvaPayContext);
   const config = solvaContext?._config;
   const effectiveFetcher = useMemo3(
     () => fetcher ?? ((ref) => defaultListPlans(ref, config)),
@@ -1796,11 +1956,11 @@ function usePlans(options) {
   useEffect2(() => {
     selectionReadyRef.current = selectionReady;
   }, [selectionReady]);
-  const setSelectedPlanIndex = useCallback3((index) => {
+  const setSelectedPlanIndex = useCallback4((index) => {
     userHasSelectedRef.current = true;
     setSelectedPlanIndexState(index);
   }, []);
-  const applyInitialSelection = useCallback3((processedPlans) => {
+  const applyInitialSelection = useCallback4((processedPlans) => {
     if (hasAppliedInitialRef.current || userHasSelectedRef.current) return;
     if (!selectionReadyRef.current || processedPlans.length === 0) return;
     hasAppliedInitialRef.current = true;
@@ -1811,7 +1971,7 @@ function usePlans(options) {
     );
     setSelectedPlanIndexState(idx);
   }, []);
-  const fetchPlans = useCallback3(
+  const fetchPlans = useCallback4(
     async (force = false) => {
       if (!productRef) {
         setError(new Error("Product reference not configured"));
@@ -1883,7 +2043,7 @@ function usePlans(options) {
     applyInitialSelection(plans);
   }, [selectionReady, plans, applyInitialSelection]);
   const selectedPlan = useMemo3(() => plans[selectedPlanIndex] || null, [plans, selectedPlanIndex]);
-  const selectPlan = useCallback3(
+  const selectPlan = useCallback4(
     (planRef) => {
       const index = plans.findIndex((p) => p.reference === planRef);
       if (index >= 0) {
@@ -1906,11 +2066,11 @@ function usePlans(options) {
 }
 
 // src/hooks/usePlan.ts
-import { useCallback as useCallback4, useEffect as useEffect3, useState as useState4 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect3, useState as useState4 } from "react";
 function usePlan(options) {
   const { planRef, productRef } = options;
   const { _config } = useSolvaPay();
-  const findPlan = useCallback4(
+  const findPlan = useCallback5(
     (plans) => {
       if (!planRef) return null;
       return plans.find((p) => p.reference === planRef) || null;
@@ -1925,7 +2085,7 @@ function usePlan(options) {
   });
   const [loading, setLoading] = useState4(() => !!(planRef && !plan));
   const [error, setError] = useState4(null);
-  const load = useCallback4(
+  const load = useCallback5(
     async (force = false) => {
       if (!planRef) {
         setPlan(null);
@@ -2004,7 +2164,7 @@ function usePlan(options) {
 }
 
 // src/hooks/useProduct.ts
-import { useCallback as useCallback5, useEffect as useEffect4, useState as useState5 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect4, useState as useState5 } from "react";
 var productCache = /* @__PURE__ */ new Map();
 var CACHE_DURATION4 = 5 * 60 * 1e3;
 function cacheKeyFor(config, productRef) {
@@ -2027,7 +2187,7 @@ function useProduct(productRef) {
     return !cached || !cached.product && !cached.promise;
   });
   const [error, setError] = useState5(null);
-  const load = useCallback5(
+  const load = useCallback6(
     async (force = false) => {
       if (!productRef) {
         setProduct(null);
@@ -2100,14 +2260,14 @@ function useProduct(productRef) {
 }
 
 // src/hooks/useActivation.ts
-import { useState as useState6, useCallback as useCallback6 } from "react";
+import { useState as useState6, useCallback as useCallback7 } from "react";
 function useActivation() {
   const { activatePlan } = useSolvaPay();
   const copy = useCopy();
   const [state, setState] = useState6("idle");
   const [error, setError] = useState6(null);
   const [result, setResult] = useState6(null);
-  const activate = useCallback6(
+  const activate = useCallback7(
     async (params) => {
       setState("activating");
       setError(null);
@@ -2119,30 +2279,32 @@ function useActivation() {
           case "activated":
           case "already_active":
             setState("activated");
-            break;
+            return "activated";
           case "topup_required":
             setState("topup_required");
-            break;
+            return "topup_required";
           case "payment_required":
             setError(copy.activation.paymentRequired);
             setState("payment_required");
-            break;
+            return "payment_required";
           case "invalid":
             setError(data.message || copy.activation.invalidConfiguration);
             setState("error");
-            break;
+            return "error";
           default:
             setError(copy.activation.unexpectedResponse);
             setState("error");
+            return "error";
         }
       } catch (err) {
         setError(err instanceof Error ? err.message : copy.activation.failed);
         setState("error");
+        return "error";
       }
     },
     [activatePlan, copy]
   );
-  const reset = useCallback6(() => {
+  const reset = useCallback7(() => {
     setState("idle");
     setError(null);
     setResult(null);
@@ -2151,11 +2313,11 @@ function useActivation() {
 }
 
 // src/components/PaymentFormContext.tsx
-import { createContext as createContext4, useContext as useContext5 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var PaymentFormContext = createContext4(null);
+import { createContext as createContext5, useContext as useContext6 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var PaymentFormContext = createContext5(null);
 function usePaymentForm() {
-  const ctx = useContext5(PaymentFormContext);
+  const ctx = useContext6(PaymentFormContext);
   if (!ctx) {
     throw new Error(
       "PaymentForm subcomponents must be used inside a <PaymentForm>. Wrap the slots with <PaymentForm planRef=... productRef=...>."
@@ -2163,7 +2325,7 @@ function usePaymentForm() {
   }
   return ctx;
 }
-var PaymentFormProvider = ({ value, children }) => /* @__PURE__ */ jsx6(PaymentFormContext.Provider, { value, children });
+var PaymentFormProvider = ({ value, children }) => /* @__PURE__ */ jsx7(PaymentFormContext.Provider, { value, children });
 
 // src/utils/format.ts
 var ZERO_DECIMAL_CURRENCIES = /* @__PURE__ */ new Set([
@@ -2230,7 +2392,7 @@ function interpolate(template, vars) {
 }
 
 // src/primitives/CheckoutSummary.tsx
-import { createContext as createContext5, forwardRef as forwardRef3, useContext as useContext6, useMemo as useMemo4 } from "react";
+import { createContext as createContext6, forwardRef as forwardRef3, useContext as useContext7, useMemo as useMemo4 } from "react";
 
 // src/components/businessCheckoutParts.tsx
 import { forwardRef as forwardRef2 } from "react";
@@ -2238,11 +2400,17 @@ import {
   BUSINESS_COUNTRY_OPTIONS,
   SUPPORTED_BUSINESS_COUNTRIES,
   validateBusinessDetails,
+  getPostalCodeFieldLabel,
+  getPostalCodePlaceholder,
+  getStateFieldLabel,
   getTaxIdFieldLabel,
   getTaxIdExample,
-  getTaxIdHelperText
+  getTaxIdHelperText,
+  isPostalCodeRequired,
+  isStateRequired,
+  resolveBuyerCountry
 } from "@solvapay/core";
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
 function mapBusinessFieldErrors(input) {
   const result = validateBusinessDetails(input);
   if (result.success) return {};
@@ -2256,7 +2424,7 @@ function mapBusinessFieldErrors(input) {
   return errors;
 }
 function isBusinessDetailsKey(key) {
-  return key === "isBusiness" || key === "businessName" || key === "country" || key === "customerCountry" || key === "customerName" || key === "taxId" || key === "taxIdType";
+  return key === "isBusiness" || key === "businessName" || key === "country" || key === "customerCountry" || key === "customerName" || key === "customerState" || key === "customerPostalCode" || key === "taxId" || key === "taxIdType";
 }
 function attr(prefix, suffix) {
   return `data-solvapay-${prefix}-${suffix}`;
@@ -2305,7 +2473,7 @@ function createBusinessDetailsParts(useCtx, prefix) {
   const Root8 = forwardRef2(function BusinessDetailsRoot({ asChild, children, ...rest }, forwardedRef) {
     useCtx("BusinessDetails");
     const Comp = asChild ? Slot : "section";
-    return /* @__PURE__ */ jsx7(Comp, { ref: forwardedRef, ...{ [attr(prefix, "business-details")]: "" }, ...rest, children });
+    return /* @__PURE__ */ jsx8(Comp, { ref: forwardedRef, ...{ [attr(prefix, "business-details")]: "" }, ...rest, children });
   });
   const Toggle = forwardRef2(function BusinessDetailsToggle({ asChild, onChange, ...rest }, forwardedRef) {
     const ctx = useCtx("BusinessDetails.Toggle");
@@ -2319,9 +2487,9 @@ function createBusinessDetailsParts(useCtx, prefix) {
       ...rest
     };
     if (asChild) {
-      return /* @__PURE__ */ jsx7(Slot, { ref: forwardedRef, ...commonProps });
+      return /* @__PURE__ */ jsx8(Slot, { ref: forwardedRef, ...commonProps });
     }
-    return /* @__PURE__ */ jsx7("input", { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ jsx8("input", { ref: forwardedRef, ...commonProps });
   });
   const BusinessName = forwardRef2(
     function BusinessDetailsBusinessName({ asChild, onChange, ...rest }, forwardedRef) {
@@ -2338,31 +2506,80 @@ function createBusinessDetailsParts(useCtx, prefix) {
         ...rest
       };
       if (asChild) {
-        return /* @__PURE__ */ jsx7(Slot, { ref: forwardedRef, ...commonProps });
+        return /* @__PURE__ */ jsx8(Slot, { ref: forwardedRef, ...commonProps });
       }
-      return /* @__PURE__ */ jsx7("input", { ref: forwardedRef, ...commonProps });
+      return /* @__PURE__ */ jsx8("input", { ref: forwardedRef, ...commonProps });
     }
   );
   const Country = forwardRef2(function BusinessDetailsCountry({ asChild, onChange, children, ...rest }, forwardedRef) {
     const ctx = useCtx("BusinessDetails.Country");
-    if (!ctx.businessDetails.isBusiness) return null;
+    const country = ctx.businessDetails.customerCountry ?? ctx.businessDetails.country ?? "";
+    const countryError = ctx.fieldErrors.customerCountry ?? ctx.fieldErrors.country ? true : void 0;
     const commonProps = {
+      ...rest,
       [attr(prefix, "business-details-country")]: "",
-      value: ctx.businessDetails.country ?? "",
-      "aria-invalid": ctx.fieldErrors.country ? true : void 0,
+      value: country,
+      "aria-invalid": countryError,
+      "aria-label": rest["aria-label"] ?? "Country",
       onChange: composeEventHandlers(onChange, (e) => {
-        ctx.setBusinessDetails({ country: e.target.value });
-      }),
-      ...rest
+        const nextCountry = e.target.value;
+        ctx.setBusinessDetails({
+          customerCountry: nextCountry || void 0,
+          ...ctx.businessDetails.isBusiness ? { country: nextCountry || void 0 } : {},
+          ...!isStateRequired(nextCountry) ? { customerState: void 0 } : {},
+          ...!isPostalCodeRequired(nextCountry) ? { customerPostalCode: void 0 } : {}
+        });
+      })
     };
     const defaultOptions = /* @__PURE__ */ jsxs2(Fragment3, { children: [
-      /* @__PURE__ */ jsx7("option", { value: "", children: "Select country" }),
-      BUSINESS_COUNTRY_OPTIONS.map(({ value, label }) => /* @__PURE__ */ jsx7("option", { value, children: label }, value))
+      /* @__PURE__ */ jsx8("option", { value: "", children: "Select country" }),
+      BUSINESS_COUNTRY_OPTIONS.map(({ value, label }) => /* @__PURE__ */ jsx8("option", { value, children: label }, value))
     ] });
     if (asChild) {
-      return /* @__PURE__ */ jsx7(Slot, { ref: forwardedRef, ...commonProps, children: children ?? defaultOptions });
+      return /* @__PURE__ */ jsx8(Slot, { ref: forwardedRef, ...commonProps, children: children ?? defaultOptions });
+    }
+    return /* @__PURE__ */ jsx8("select", { ref: forwardedRef, ...commonProps, children: children ?? defaultOptions });
+  });
+  const State = forwardRef2(function BusinessDetailsState({ asChild, onChange, ...rest }, forwardedRef) {
+    const ctx = useCtx("BusinessDetails.State");
+    const country = resolveBuyerCountry(ctx.businessDetails);
+    if (!country || !isStateRequired(country)) return null;
+    const commonProps = {
+      ...rest,
+      [attr(prefix, "business-details-state")]: "",
+      type: "text",
+      value: ctx.businessDetails.customerState ?? "",
+      "aria-invalid": ctx.fieldErrors.customerState ? true : void 0,
+      "aria-label": rest["aria-label"] ?? getStateFieldLabel(country),
+      onChange: composeEventHandlers(onChange, (e) => {
+        ctx.setBusinessDetails({ customerState: e.target.value || void 0 });
+      })
+    };
+    if (asChild) {
+      return /* @__PURE__ */ jsx8(Slot, { ref: forwardedRef, ...commonProps });
+    }
+    return /* @__PURE__ */ jsx8("input", { ref: forwardedRef, ...commonProps });
+  });
+  const PostalCode = forwardRef2(function BusinessDetailsPostalCode({ asChild, onChange, ...rest }, forwardedRef) {
+    const ctx = useCtx("BusinessDetails.PostalCode");
+    const country = resolveBuyerCountry(ctx.businessDetails);
+    if (!country || !isPostalCodeRequired(country)) return null;
+    const commonProps = {
+      ...rest,
+      [attr(prefix, "business-details-postal")]: "",
+      type: "text",
+      value: ctx.businessDetails.customerPostalCode ?? "",
+      placeholder: rest.placeholder ?? getPostalCodePlaceholder(country),
+      "aria-invalid": ctx.fieldErrors.customerPostalCode ? true : void 0,
+      "aria-label": rest["aria-label"] ?? getPostalCodeFieldLabel(country),
+      onChange: composeEventHandlers(onChange, (e) => {
+        ctx.setBusinessDetails({ customerPostalCode: e.target.value || void 0 });
+      })
+    };
+    if (asChild) {
+      return /* @__PURE__ */ jsx8(Slot, { ref: forwardedRef, ...commonProps });
     }
-    return /* @__PURE__ */ jsx7("select", { ref: forwardedRef, ...commonProps, children: children ?? defaultOptions });
+    return /* @__PURE__ */ jsx8("input", { ref: forwardedRef, ...commonProps });
   });
   const TaxId = forwardRef2(function BusinessDetailsTaxId({ asChild, onChange, ...rest }, forwardedRef) {
     const ctx = useCtx("BusinessDetails.TaxId");
@@ -2378,48 +2595,60 @@ function createBusinessDetailsParts(useCtx, prefix) {
       ...rest
     };
     if (asChild) {
-      return /* @__PURE__ */ jsx7(Slot, { ref: forwardedRef, ...commonProps });
+      return /* @__PURE__ */ jsx8(Slot, { ref: forwardedRef, ...commonProps });
     }
-    return /* @__PURE__ */ jsx7("input", { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ jsx8("input", { ref: forwardedRef, ...commonProps });
   });
   const Fields = forwardRef2(function BusinessDetailsFields({ asChild, children, ...rest }, forwardedRef) {
     const ctx = useCtx("BusinessDetails.Fields");
-    const country = ctx.businessDetails.country ?? "";
+    const country = resolveBuyerCountry(ctx.businessDetails) ?? "";
     const taxIdLabel = resolveTaxIdLabel(country);
     const taxIdPlaceholder = resolveTaxIdPlaceholder(country);
     const taxIdHelperText = resolveTaxIdHelperText(country);
+    const showState = !!country && isStateRequired(country);
+    const showPostal = !!country && isPostalCodeRequired(country);
     const content = /* @__PURE__ */ jsxs2(Fragment3, { children: [
+      /* @__PURE__ */ jsxs2("label", { className: "solvapay-business-field", children: [
+        /* @__PURE__ */ jsx8("span", { className: "solvapay-business-field-label", children: "Country" }),
+        /* @__PURE__ */ jsx8(Country, {})
+      ] }),
+      showState ? /* @__PURE__ */ jsxs2("label", { className: "solvapay-business-field", children: [
+        /* @__PURE__ */ jsx8("span", { className: "solvapay-business-field-label", children: getStateFieldLabel(country) }),
+        /* @__PURE__ */ jsx8(State, {})
+      ] }) : null,
+      showPostal ? /* @__PURE__ */ jsxs2("label", { className: "solvapay-business-field", children: [
+        /* @__PURE__ */ jsx8("span", { className: "solvapay-business-field-label", children: getPostalCodeFieldLabel(country) }),
+        /* @__PURE__ */ jsx8(PostalCode, {})
+      ] }) : null,
       /* @__PURE__ */ jsxs2("label", { className: "solvapay-checkout-business-toggle", children: [
-        /* @__PURE__ */ jsx7(Toggle, {}),
+        /* @__PURE__ */ jsx8(Toggle, {}),
         "I'm purchasing as a business"
       ] }),
       ctx.businessDetails.isBusiness ? /* @__PURE__ */ jsxs2("fieldset", { className: "solvapay-business-fields", children: [
         /* @__PURE__ */ jsxs2("label", { className: "solvapay-business-field", children: [
-          /* @__PURE__ */ jsx7("span", { className: "solvapay-business-field-label", children: "Business name" }),
-          /* @__PURE__ */ jsx7(BusinessName, { placeholder: "Acme GmbH" })
-        ] }),
-        /* @__PURE__ */ jsxs2("label", { className: "solvapay-business-field", children: [
-          /* @__PURE__ */ jsx7("span", { className: "solvapay-business-field-label", children: "Country" }),
-          /* @__PURE__ */ jsx7(Country, {})
+          /* @__PURE__ */ jsx8("span", { className: "solvapay-business-field-label", children: "Business name" }),
+          /* @__PURE__ */ jsx8(BusinessName, { placeholder: "Acme GmbH" })
         ] }),
         /* @__PURE__ */ jsxs2("label", { className: "solvapay-business-field", children: [
-          /* @__PURE__ */ jsx7("span", { className: "solvapay-business-field-label", children: taxIdLabel }),
-          /* @__PURE__ */ jsx7(TaxId, { placeholder: taxIdPlaceholder }),
-          taxIdHelperText ? /* @__PURE__ */ jsx7("p", { className: "solvapay-business-field-hint", children: taxIdHelperText }) : null
+          /* @__PURE__ */ jsx8("span", { className: "solvapay-business-field-label", children: taxIdLabel }),
+          /* @__PURE__ */ jsx8(TaxId, { placeholder: taxIdPlaceholder }),
+          taxIdHelperText ? /* @__PURE__ */ jsx8("p", { className: "solvapay-business-field-hint", children: taxIdHelperText }) : null
         ] })
       ] }) : null,
       children
     ] });
     if (asChild) {
-      return /* @__PURE__ */ jsx7(Slot, { ref: forwardedRef, ...rest, children: content });
+      return /* @__PURE__ */ jsx8(Slot, { ref: forwardedRef, ...rest, children: content });
     }
-    return /* @__PURE__ */ jsx7("section", { ref: forwardedRef, ...{ [attr(prefix, "business-details-fields")]: "" }, ...rest, children: content });
+    return /* @__PURE__ */ jsx8("section", { ref: forwardedRef, ...{ [attr(prefix, "business-details-fields")]: "" }, ...rest, children: content });
   });
   return {
     Root: Root8,
     Toggle,
     BusinessName,
     Country,
+    State,
+    PostalCode,
     TaxId,
     Fields
   };
@@ -2448,14 +2677,14 @@ function createTaxSummaryParts(useCtx, prefix) {
     const ctx = useCtx("Summary");
     if (!ctx.isBusiness) return null;
     const Comp = asChild ? Slot : "section";
-    return /* @__PURE__ */ jsx7(Comp, { ref: forwardedRef, ...{ [attr(prefix, "summary")]: "" }, ...rest, children });
+    return /* @__PURE__ */ jsx8(Comp, { ref: forwardedRef, ...{ [attr(prefix, "summary")]: "" }, ...rest, children });
   });
   const Subtotal = forwardRef2(function TaxSummarySubtotal({ asChild, children, ...rest }, forwardedRef) {
     const ctx = useCtx("Summary.Subtotal");
     const { subtotalFormatted } = useSummaryAmounts(useCtx, "Summary.Subtotal");
     if (!ctx.isBusiness) return null;
     const Comp = asChild ? Slot : "span";
-    return /* @__PURE__ */ jsx7(Comp, { ref: forwardedRef, ...{ [attr(prefix, "summary-subtotal")]: "" }, ...rest, children: children ?? subtotalFormatted });
+    return /* @__PURE__ */ jsx8(Comp, { ref: forwardedRef, ...{ [attr(prefix, "summary-subtotal")]: "" }, ...rest, children: children ?? subtotalFormatted });
   });
   const Tax = forwardRef2(function TaxSummaryTax({ asChild, children, ...rest }, forwardedRef) {
     const ctx = useCtx("Summary.Tax");
@@ -2467,10 +2696,10 @@ function createTaxSummaryParts(useCtx, prefix) {
       treatment: treatment ?? "standard",
       taxRate
     });
-    return /* @__PURE__ */ jsx7(Comp, { ref: forwardedRef, ...{ [attr(prefix, "summary-tax")]: "" }, ...rest, children: children ?? /* @__PURE__ */ jsxs2(Fragment3, { children: [
-      /* @__PURE__ */ jsx7("span", { children: defaultLabel }),
+    return /* @__PURE__ */ jsx8(Comp, { ref: forwardedRef, ...{ [attr(prefix, "summary-tax")]: "" }, ...rest, children: children ?? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+      /* @__PURE__ */ jsx8("span", { children: defaultLabel }),
       " ",
-      /* @__PURE__ */ jsx7("span", { ...{ [attr(prefix, "summary-tax-amount")]: "" }, children: taxFormatted })
+      /* @__PURE__ */ jsx8("span", { ...{ [attr(prefix, "summary-tax-amount")]: "" }, children: taxFormatted })
     ] }) });
   });
   const Total = forwardRef2(function TaxSummaryTotal({ asChild, children, ...rest }, forwardedRef) {
@@ -2478,7 +2707,7 @@ function createTaxSummaryParts(useCtx, prefix) {
     const { totalFormatted } = useSummaryAmounts(useCtx, "Summary.Total");
     if (!ctx.isBusiness) return null;
     const Comp = asChild ? Slot : "span";
-    return /* @__PURE__ */ jsx7(Comp, { ref: forwardedRef, ...{ [attr(prefix, "summary-total")]: "" }, ...rest, children: children ?? totalFormatted });
+    return /* @__PURE__ */ jsx8(Comp, { ref: forwardedRef, ...{ [attr(prefix, "summary-total")]: "" }, ...rest, children: children ?? totalFormatted });
   });
   const TaxNote = forwardRef2(function TaxSummaryTaxNote({ asChild, children, ...rest }, forwardedRef) {
     const ctx = useCtx("Summary.TaxNote");
@@ -2488,7 +2717,7 @@ function createTaxSummaryParts(useCtx, prefix) {
     const Comp = asChild ? Slot : "p";
     const defaultNote = treatment === "reverse_charge" ? REVERSE_CHARGE_NOTE : treatment === "not_collecting" || treatment === "not_supported" ? TAX_NOT_COLLECTED_NOTE : null;
     if (!defaultNote && !children) return null;
-    return /* @__PURE__ */ jsx7(Comp, { ref: forwardedRef, ...{ [attr(prefix, "summary-tax-note")]: "" }, ...rest, children: children ?? defaultNote });
+    return /* @__PURE__ */ jsx8(Comp, { ref: forwardedRef, ...{ [attr(prefix, "summary-tax-note")]: "" }, ...rest, children: children ?? defaultNote });
   });
   const Rows = forwardRef2(function TaxSummaryRows({ asChild, children, ...rest }, forwardedRef) {
     const ctx = useCtx("Summary.Rows");
@@ -2501,24 +2730,24 @@ function createTaxSummaryParts(useCtx, prefix) {
     });
     const content = /* @__PURE__ */ jsxs2("dl", { className: "solvapay-tax-summary-rows", children: [
       /* @__PURE__ */ jsxs2("div", { className: "solvapay-tax-summary-row", children: [
-        /* @__PURE__ */ jsx7("dt", { children: formatSubtotalLabel(treatment) }),
-        /* @__PURE__ */ jsx7("dd", { children: /* @__PURE__ */ jsx7(Subtotal, {}) })
+        /* @__PURE__ */ jsx8("dt", { children: formatSubtotalLabel(treatment) }),
+        /* @__PURE__ */ jsx8("dd", { children: /* @__PURE__ */ jsx8(Subtotal, {}) })
       ] }),
       showTaxRow ? /* @__PURE__ */ jsxs2("div", { className: "solvapay-tax-summary-row", children: [
-        /* @__PURE__ */ jsx7("dt", { children: vatLabel }),
-        /* @__PURE__ */ jsx7("dd", { children: /* @__PURE__ */ jsx7("span", { ...{ [attr(prefix, "summary-tax-amount")]: "" }, children: taxFormatted }) })
+        /* @__PURE__ */ jsx8("dt", { children: vatLabel }),
+        /* @__PURE__ */ jsx8("dd", { children: /* @__PURE__ */ jsx8("span", { ...{ [attr(prefix, "summary-tax-amount")]: "" }, children: taxFormatted }) })
       ] }) : null,
       /* @__PURE__ */ jsxs2("div", { className: "solvapay-tax-summary-row solvapay-tax-summary-row--total", children: [
-        /* @__PURE__ */ jsx7("dt", { children: "Total" }),
-        /* @__PURE__ */ jsx7("dd", { children: /* @__PURE__ */ jsx7(Total, {}) })
+        /* @__PURE__ */ jsx8("dt", { children: "Total" }),
+        /* @__PURE__ */ jsx8("dd", { children: /* @__PURE__ */ jsx8(Total, {}) })
       ] }),
-      /* @__PURE__ */ jsx7(TaxNote, {}),
+      /* @__PURE__ */ jsx8(TaxNote, {}),
       children
     ] });
     if (asChild) {
-      return /* @__PURE__ */ jsx7(Slot, { ref: forwardedRef, ...rest, children: content });
+      return /* @__PURE__ */ jsx8(Slot, { ref: forwardedRef, ...rest, children: content });
     }
-    return /* @__PURE__ */ jsx7("section", { ref: forwardedRef, ...{ [attr(prefix, "summary-rows")]: "" }, ...rest, children: content });
+    return /* @__PURE__ */ jsx8("section", { ref: forwardedRef, ...{ [attr(prefix, "summary-rows")]: "" }, ...rest, children: content });
   });
   return {
     Root: Root8,
@@ -2566,10 +2795,10 @@ var MissingProductRefError = class extends SolvaPayError2 {
 };
 
 // src/primitives/CheckoutSummary.tsx
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
-var CheckoutSummaryContext = createContext5(null);
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+var CheckoutSummaryContext = createContext6(null);
 function useCheckoutSummaryContext(part) {
-  const ctx = useContext6(CheckoutSummaryContext);
+  const ctx = useContext7(CheckoutSummaryContext);
   if (!ctx) {
     throw new Error(
       `CheckoutSummary.${part} must be rendered inside <CheckoutSummary.Root>.`
@@ -2578,7 +2807,7 @@ function useCheckoutSummaryContext(part) {
   return ctx;
 }
 var Root = forwardRef3(function CheckoutSummaryRoot({ planRef, productRef, taxBreakdown = null, baseAmountMinor = 0, asChild, children, ...rest }, forwardedRef) {
-  const solva = useContext6(SolvaPayContext);
+  const solva = useContext7(SolvaPayContext);
   if (!solva) throw new MissingProviderError("CheckoutSummary");
   const locale = useLocale();
   const copy = useCopy();
@@ -2640,35 +2869,35 @@ var Root = forwardRef3(function CheckoutSummaryRoot({ planRef, productRef, taxBr
     ]
   );
   const Comp = asChild ? Slot : "section";
-  return /* @__PURE__ */ jsx8(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary": "", ...rest, children: /* @__PURE__ */ jsx8(CheckoutSummaryContext.Provider, { value: ctx, children }) });
+  return /* @__PURE__ */ jsx9(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary": "", ...rest, children: /* @__PURE__ */ jsx9(CheckoutSummaryContext.Provider, { value: ctx, children }) });
 });
 var ProductSlot = forwardRef3(function CheckoutSummaryProduct({ asChild, children, ...rest }, forwardedRef) {
   const ctx = useCheckoutSummaryContext("Product");
   const name = ctx.product?.name;
   if (!name) return null;
   const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx8(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary-product": "", ...rest, children: children ?? name });
+  return /* @__PURE__ */ jsx9(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary-product": "", ...rest, children: children ?? name });
 });
 var PlanSlot = forwardRef3(function CheckoutSummaryPlan({ asChild, children, ...rest }, forwardedRef) {
   const ctx = useCheckoutSummaryContext("Plan");
   const name = ctx.plan?.name;
   if (!name) return null;
   const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx8(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary-plan": "", ...rest, children: children ?? name });
+  return /* @__PURE__ */ jsx9(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary-plan": "", ...rest, children: children ?? name });
 });
 var TaxNoteSlot = forwardRef3(
   function CheckoutSummaryTaxNote({ asChild, children, ...rest }, forwardedRef) {
     const ctx = useCheckoutSummaryContext("TaxNote");
     if (ctx.taxBreakdown) return null;
     const Comp = asChild ? Slot : "p";
-    return /* @__PURE__ */ jsx8(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary-tax-note": "", ...rest, children: children ?? "Taxes calculated at checkout" });
+    return /* @__PURE__ */ jsx9(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary-tax-note": "", ...rest, children: children ?? "Taxes calculated at checkout" });
   }
 );
 var SubtotalSlot = forwardRef3(function CheckoutSummarySubtotal({ asChild, children, ...rest }, forwardedRef) {
   const ctx = useCheckoutSummaryContext("Subtotal");
   if (!ctx.taxBreakdown) return null;
   const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx8(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary-subtotal": "", ...rest, children: children ?? ctx.subtotalFormatted });
+  return /* @__PURE__ */ jsx9(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary-subtotal": "", ...rest, children: children ?? ctx.subtotalFormatted });
 });
 var TaxSlot = forwardRef3(function CheckoutSummaryTax({ asChild, children, ...rest }, forwardedRef) {
   const ctx = useCheckoutSummaryContext("Tax");
@@ -2677,17 +2906,17 @@ var TaxSlot = forwardRef3(function CheckoutSummaryTax({ asChild, children, ...re
   if (!shouldShowTaxRow(treatment)) return null;
   const Comp = asChild ? Slot : "span";
   const defaultLabel = formatVatSummaryLabel({ treatment, taxRate: taxRate ?? 0 });
-  return /* @__PURE__ */ jsx8(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary-tax": "", ...rest, children: children ?? /* @__PURE__ */ jsxs3(Fragment4, { children: [
-    /* @__PURE__ */ jsx8("span", { children: defaultLabel }),
+  return /* @__PURE__ */ jsx9(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary-tax": "", ...rest, children: children ?? /* @__PURE__ */ jsxs3(Fragment4, { children: [
+    /* @__PURE__ */ jsx9("span", { children: defaultLabel }),
     " ",
-    /* @__PURE__ */ jsx8("span", { "data-solvapay-checkout-summary-tax-amount": "", children: ctx.taxFormatted })
+    /* @__PURE__ */ jsx9("span", { "data-solvapay-checkout-summary-tax-amount": "", children: ctx.taxFormatted })
   ] }) });
 });
 var TotalSlot = forwardRef3(function CheckoutSummaryTotal({ asChild, children, ...rest }, forwardedRef) {
   const ctx = useCheckoutSummaryContext("Total");
   if (!ctx.taxBreakdown) return null;
   const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx8(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary-total": "", ...rest, children: children ?? ctx.totalFormatted });
+  return /* @__PURE__ */ jsx9(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary-total": "", ...rest, children: children ?? ctx.totalFormatted });
 });
 var TaxTreatmentNoteSlot = forwardRef3(
   function CheckoutSummaryTaxTreatmentNote({ asChild, children, ...rest }, forwardedRef) {
@@ -2697,21 +2926,21 @@ var TaxTreatmentNoteSlot = forwardRef3(
     const Comp = asChild ? Slot : "p";
     const defaultNote = treatment === "reverse_charge" ? REVERSE_CHARGE_NOTE : treatment === "not_collecting" || treatment === "not_supported" ? TAX_NOT_COLLECTED_NOTE : null;
     if (!defaultNote && !children) return null;
-    return /* @__PURE__ */ jsx8(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary-tax-treatment-note": "", ...rest, children: children ?? defaultNote });
+    return /* @__PURE__ */ jsx9(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary-tax-treatment-note": "", ...rest, children: children ?? defaultNote });
   }
 );
 var PriceSlot = forwardRef3(function CheckoutSummaryPrice({ asChild, children, ...rest }, forwardedRef) {
   const ctx = useCheckoutSummaryContext("Price");
   if (ctx.taxBreakdown) return null;
   const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx8(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary-price": "", ...rest, children: children ?? ctx.priceFormatted });
+  return /* @__PURE__ */ jsx9(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary-price": "", ...rest, children: children ?? ctx.priceFormatted });
 });
 var TrialSlot = forwardRef3(
   function CheckoutSummaryTrial({ asChild, children, ...rest }, forwardedRef) {
     const ctx = useCheckoutSummaryContext("Trial");
     if (!ctx.trialBanner || ctx.taxBreakdown) return null;
     const Comp = asChild ? Slot : "p";
-    return /* @__PURE__ */ jsx8(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary-trial": "", ...rest, children: children ?? ctx.trialBanner });
+    return /* @__PURE__ */ jsx9(Comp, { ref: forwardedRef, "data-solvapay-checkout-summary-trial": "", ...rest, children: children ?? ctx.trialBanner });
   }
 );
 var CheckoutSummaryRoot2 = Root;
@@ -2741,7 +2970,7 @@ function useCheckoutSummary() {
 }
 
 // src/components/CheckoutSummary.tsx
-import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var CheckoutSummary2 = ({
   planRef,
   productRef,
@@ -2762,25 +2991,25 @@ var CheckoutSummary2 = ({
       baseAmountMinor,
       className: rootClass,
       children: [
-        /* @__PURE__ */ jsx9(CheckoutSummary.Product, { className: "solvapay-checkout-summary-product" }),
+        /* @__PURE__ */ jsx10(CheckoutSummary.Product, { className: "solvapay-checkout-summary-product" }),
         /* @__PURE__ */ jsxs4("div", { className: "solvapay-checkout-summary-row", children: [
-          /* @__PURE__ */ jsx9(CheckoutSummary.Plan, { className: "solvapay-checkout-summary-plan" }),
-          !hasTax && /* @__PURE__ */ jsx9(CheckoutSummary.Price, { className: "solvapay-checkout-summary-price" })
+          /* @__PURE__ */ jsx10(CheckoutSummary.Plan, { className: "solvapay-checkout-summary-plan" }),
+          !hasTax && /* @__PURE__ */ jsx10(CheckoutSummary.Price, { className: "solvapay-checkout-summary-price" })
         ] }),
         hasTax ? /* @__PURE__ */ jsxs4(Fragment5, { children: [
           /* @__PURE__ */ jsxs4("div", { className: "solvapay-checkout-summary-row", children: [
-            /* @__PURE__ */ jsx9("span", { children: "Subtotal" }),
-            /* @__PURE__ */ jsx9(CheckoutSummary.Subtotal, { className: "solvapay-checkout-summary-subtotal" })
+            /* @__PURE__ */ jsx10("span", { children: "Subtotal" }),
+            /* @__PURE__ */ jsx10(CheckoutSummary.Subtotal, { className: "solvapay-checkout-summary-subtotal" })
           ] }),
-          /* @__PURE__ */ jsx9("div", { className: "solvapay-checkout-summary-row", children: /* @__PURE__ */ jsx9(CheckoutSummary.Tax, { className: "solvapay-checkout-summary-tax" }) }),
+          /* @__PURE__ */ jsx10("div", { className: "solvapay-checkout-summary-row", children: /* @__PURE__ */ jsx10(CheckoutSummary.Tax, { className: "solvapay-checkout-summary-tax" }) }),
           /* @__PURE__ */ jsxs4("div", { className: "solvapay-checkout-summary-row", children: [
-            /* @__PURE__ */ jsx9("span", { children: "Total" }),
-            /* @__PURE__ */ jsx9(CheckoutSummary.Total, { className: "solvapay-checkout-summary-total" })
+            /* @__PURE__ */ jsx10("span", { children: "Total" }),
+            /* @__PURE__ */ jsx10(CheckoutSummary.Total, { className: "solvapay-checkout-summary-total" })
           ] }),
-          /* @__PURE__ */ jsx9(CheckoutSummary.TaxTreatmentNote, { className: "solvapay-checkout-summary-tax-treatment-note" })
+          /* @__PURE__ */ jsx10(CheckoutSummary.TaxTreatmentNote, { className: "solvapay-checkout-summary-tax-treatment-note" })
         ] }) : /* @__PURE__ */ jsxs4(Fragment5, { children: [
-          showTrial && /* @__PURE__ */ jsx9(CheckoutSummary.Trial, { className: "solvapay-checkout-summary-trial" }),
-          showTaxNote && /* @__PURE__ */ jsx9(CheckoutSummary.TaxNote, { className: "solvapay-checkout-summary-tax-note" })
+          showTrial && /* @__PURE__ */ jsx10(CheckoutSummary.Trial, { className: "solvapay-checkout-summary-trial" }),
+          showTaxNote && /* @__PURE__ */ jsx10(CheckoutSummary.TaxNote, { className: "solvapay-checkout-summary-tax-note" })
         ] })
       ]
     }
@@ -2788,7 +3017,7 @@ var CheckoutSummary2 = ({
 };
 
 // src/hooks/useMerchant.ts
-import { useCallback as useCallback7, useEffect as useEffect5, useState as useState7 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect5, useState as useState7 } from "react";
 var merchantCache = /* @__PURE__ */ new Map();
 var CACHE_DURATION5 = 5 * 60 * 1e3;
 function cacheKeyFor2(config) {
@@ -2810,7 +3039,7 @@ function useMerchant() {
     return !cached || !cached.merchant && !cached.promise;
   });
   const [error, setError] = useState7(null);
-  const load = useCallback7(
+  const load = useCallback8(
     async (force = false) => {
       const cached = merchantCache.get(key);
       const now = Date.now();
@@ -2893,8 +3122,8 @@ function deriveVariant(plan, mode) {
 }
 
 // src/primitives/MandateText.tsx
-import { forwardRef as forwardRef4, useContext as useContext7, useMemo as useMemo5 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { forwardRef as forwardRef4, useContext as useContext8, useMemo as useMemo5 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var MandateText = forwardRef4(
   function MandateText2({
     planRef,
@@ -2907,10 +3136,11 @@ var MandateText = forwardRef4(
     children,
     ...rest
   }, forwardedRef) {
-    const solva = useContext7(SolvaPayContext);
+    const solva = useContext8(SolvaPayContext);
     if (!solva) throw new MissingProviderError("MandateText");
     const locale = useLocale();
     const copy = useCopy();
+    const handleExternalClick = useExternalLinkClick();
     const planSelection = usePlanSelection();
     const resolvedPlanRef = planRef ?? planSelection?.selectedPlanRef ?? void 0;
     const resolvedProductRef = productRef ?? planSelection?.productRef;
@@ -2951,19 +3181,19 @@ var MandateText = forwardRef4(
     const text = typeof template === "function" ? template(ctx) : template;
     if (!text) return null;
     const Comp = asChild ? Slot : "p";
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       Comp,
       {
         ref: forwardedRef,
         "data-solvapay-mandate-text": "",
         "data-variant": resolvedVariant,
         ...rest,
-        children: children ?? linkifyMandateText(text, ctx.merchant, copy)
+        children: children ?? linkifyMandateText(text, ctx.merchant, copy, handleExternalClick)
       }
     );
   }
 );
-function linkifyMandateText(text, merchant, copy) {
+function linkifyMandateText(text, merchant, copy, onLinkClick) {
   const entries = [
     { url: merchant.termsUrl, label: copy.legalFooter.terms },
     { url: merchant.privacyUrl, label: copy.legalFooter.privacy }
@@ -2973,13 +3203,14 @@ function linkifyMandateText(text, merchant, copy) {
   return text.split(pattern).map((part, i) => {
     const match = entries.find((e) => e.url === part);
     if (!match) return part;
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       "a",
       {
         href: match.url,
         target: "_blank",
         rel: "noopener noreferrer",
         "data-solvapay-mandate-link": "",
+        onClick: onLinkClick,
         children: match.label || match.url
       },
       i
@@ -2991,22 +3222,22 @@ function escapeRegExp(value) {
 }
 
 // src/components/Spinner.tsx
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var SIZE_PX = { sm: 16, md: 20, lg: 24 };
 var Spinner = ({ className, size = "md" }) => {
-  const px = SIZE_PX[size];
+  const px2 = SIZE_PX[size];
   return /* @__PURE__ */ jsxs5(
     "svg",
     {
       "data-solvapay-spinner": "",
       className,
-      width: px,
-      height: px,
+      width: px2,
+      height: px2,
       viewBox: "0 0 24 24",
       fill: "none",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "circle",
           {
             cx: "12",
@@ -3017,7 +3248,7 @@ var Spinner = ({ className, size = "md" }) => {
             strokeOpacity: "0.25"
           }
         ),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "path",
           {
             fill: "currentColor",
@@ -3031,6 +3262,26 @@ var Spinner = ({ className, size = "md" }) => {
 };
 
 // src/utils/confirmPayment.ts
+function buildConfirmBillingDetails(input) {
+  const name = input.name?.trim();
+  const email = input.email?.trim();
+  const country = input.country?.trim();
+  if (!name && !email && !country) return void 0;
+  return {
+    ...name && { name },
+    ...email && { email },
+    ...country && {
+      address: {
+        line1: "",
+        line2: "",
+        city: "",
+        state: input.state?.trim() ?? "",
+        postal_code: input.postalCode?.trim() ?? "",
+        country
+      }
+    }
+  };
+}
 async function confirmPayment(input) {
   const { stripe, elements, clientSecret, returnUrl, billingDetails, copy } = input;
   const mode = input.mode ?? "payment-element";
@@ -3157,14 +3408,14 @@ function resolveCta(input) {
 }
 
 // src/primitives/PaymentForm.tsx
-import React10, {
+import React11, {
   forwardRef as forwardRef5,
-  useCallback as useCallback9,
-  useContext as useContext8,
-  useEffect as useEffect7,
-  useMemo as useMemo6,
+  useCallback as useCallback10,
+  useContext as useContext9,
+  useEffect as useEffect8,
+  useMemo as useMemo7,
   useRef as useRef5,
-  useState as useState9
+  useState as useState10
 } from "react";
 import {
   Elements,
@@ -3237,18 +3488,205 @@ function toStripeElementLocale(locale) {
 
 // src/primitives/paymentElementDefaults.ts
 var DEFAULT_PAYMENT_ELEMENT_OPTIONS = {
-  wallets: { link: "never" }
+  wallets: { link: "never" },
+  fields: { billingDetails: { address: "never" } },
+  layout: { type: "tabs" }
 };
 function withPaymentElementDefaults(options) {
+  const defaultBilling = DEFAULT_PAYMENT_ELEMENT_OPTIONS.fields.billingDetails;
+  const callerBilling = options?.fields?.billingDetails;
+  const billingDetails = callerBilling && typeof callerBilling === "object" ? { ...defaultBilling, ...callerBilling } : callerBilling ?? defaultBilling;
   return {
+    ...DEFAULT_PAYMENT_ELEMENT_OPTIONS,
     ...options,
     wallets: {
       ...DEFAULT_PAYMENT_ELEMENT_OPTIONS.wallets,
       ...options?.wallets
+    },
+    fields: {
+      ...DEFAULT_PAYMENT_ELEMENT_OPTIONS.fields,
+      ...options?.fields,
+      billingDetails
     }
   };
 }
 
+// src/primitives/useStripeAppearance.ts
+import { useEffect as useEffect6, useLayoutEffect, useMemo as useMemo6, useState as useState8 } from "react";
+
+// src/primitives/buildStripeAppearance.ts
+var SENTINEL_TOKEN = "--solvapay-radius";
+var COLOR_VARIABLES = {
+  colorBackground: "--solvapay-surface",
+  colorText: "--solvapay-accent",
+  colorTextSecondary: "--solvapay-muted-foreground",
+  colorPrimary: "--solvapay-selection",
+  colorDanger: "--solvapay-danger"
+};
+var DIRECT_VARIABLES = {
+  borderRadius: "--solvapay-radius",
+  fontFamily: "--solvapay-font"
+};
+var CSS_WIDE_KEYWORDS = /* @__PURE__ */ new Set([
+  "",
+  "inherit",
+  "initial",
+  "unset",
+  "revert",
+  "revert-layer"
+]);
+var CONTROL_HEIGHT_RATIO = 2.5;
+var CONTROL_PADDING_X_RATIO = 0.75;
+var LINE_HEIGHT_RATIO = 1.5;
+var LABEL_FONT_RATIO = 0.8125;
+var LABEL_MARGIN_RATIO = 0.5;
+var ERROR_FONT_RATIO = 0.75;
+var ERROR_MARGIN_RATIO = 0.375;
+function readRootFontPx(root) {
+  const px2 = parseFloat(getComputedStyle(root).fontSize);
+  return Number.isFinite(px2) && px2 > 0 ? px2 : 16;
+}
+function px(value) {
+  return `${value}px`;
+}
+function deriveControlMetrics(rootPx) {
+  const lineHeight = LINE_HEIGHT_RATIO * rootPx;
+  const paddingY = (CONTROL_HEIGHT_RATIO * rootPx - 2 - lineHeight) / 2;
+  const paddingX = CONTROL_PADDING_X_RATIO * rootPx;
+  const gridGap = CONTROL_PADDING_X_RATIO * rootPx;
+  return {
+    fontSize: px(rootPx),
+    lineHeight: px(lineHeight),
+    padding: `${px(paddingY)} ${px(paddingX)}`,
+    labelFontSize: px(LABEL_FONT_RATIO * rootPx),
+    labelMarginBottom: px(LABEL_MARGIN_RATIO * rootPx),
+    errorFontSize: px(ERROR_FONT_RATIO * rootPx),
+    errorMarginTop: px(ERROR_MARGIN_RATIO * rootPx),
+    gridGap: px(gridGap)
+  };
+}
+function isUsableToken(value) {
+  return !CSS_WIDE_KEYWORDS.has(value.trim().toLowerCase());
+}
+function readToken(style, name) {
+  const value = style.getPropertyValue(name).trim();
+  return isUsableToken(value) ? value : void 0;
+}
+function resolveColor(probe, raw) {
+  probe.style.color = raw;
+  const resolved = getComputedStyle(probe).color.trim();
+  if (!isUsableToken(resolved)) return void 0;
+  if (resolved.toLowerCase().includes("light-dark")) return void 0;
+  return resolved;
+}
+function buildStripeAppearance(root) {
+  const style = getComputedStyle(root);
+  if (!readToken(style, SENTINEL_TOKEN)) return void 0;
+  const probe = document.createElement("span");
+  probe.style.cssText = "position:absolute;left:-9999px;top:0";
+  root.appendChild(probe);
+  const rootPx = readRootFontPx(root);
+  const metrics = deriveControlMetrics(rootPx);
+  const variables = {
+    fontSizeBase: metrics.fontSize,
+    gridRowSpacing: metrics.gridGap,
+    gridColumnSpacing: metrics.gridGap
+  };
+  for (const [stripeKey, token] of Object.entries(COLOR_VARIABLES)) {
+    const raw = readToken(style, token);
+    if (!raw) continue;
+    const resolved = resolveColor(probe, raw);
+    if (!resolved) continue;
+    variables[stripeKey] = resolved;
+  }
+  for (const [stripeKey, token] of Object.entries(DIRECT_VARIABLES)) {
+    const raw = readToken(style, token);
+    if (!raw) continue;
+    variables[stripeKey] = raw;
+  }
+  const border = (() => {
+    const raw = readToken(style, "--solvapay-border");
+    return raw ? resolveColor(probe, raw) : void 0;
+  })();
+  const accent = variables.colorText;
+  const muted = variables.colorTextSecondary;
+  const danger = variables.colorDanger;
+  const radius = variables.borderRadius;
+  const surface = variables.colorBackground;
+  const fontFamily = variables.fontFamily;
+  probe.remove();
+  const rules = {
+    ".Input": {
+      fontSize: metrics.fontSize,
+      lineHeight: metrics.lineHeight,
+      padding: metrics.padding,
+      boxShadow: "none",
+      ...fontFamily ? { fontFamily } : {},
+      ...border ? { border: `1px solid ${border}` } : {},
+      ...radius ? { borderRadius: radius } : {}
+    },
+    ".Input:focus": {
+      outline: "none",
+      ...accent ? {
+        borderColor: accent,
+        boxShadow: `0 0 0 1px ${accent}`
+      } : {}
+    },
+    ".Label": {
+      fontSize: metrics.labelFontSize,
+      fontWeight: "500",
+      marginBottom: metrics.labelMarginBottom,
+      ...muted ? { color: muted } : {}
+    },
+    ".Error": {
+      fontSize: metrics.errorFontSize,
+      marginTop: metrics.errorMarginTop,
+      ...danger ? { color: danger } : {}
+    },
+    ".Tab": {
+      ...border ? { border: `1px solid ${border}` } : {}
+    },
+    ".Tab--selected": {
+      ...surface ? { backgroundColor: surface } : {},
+      ...border ? { border: `1px solid ${border}` } : {},
+      ...accent ? { color: accent } : {}
+    },
+    ".AccordionItem": {
+      border: "none",
+      padding: "0"
+    }
+  };
+  return { variables, rules };
+}
+
+// src/primitives/useStripeAppearance.ts
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect6;
+function useStripeAppearance(root, appearance) {
+  const [themeTick, setThemeTick] = useState8(0);
+  useIsomorphicLayoutEffect(() => {
+    if (appearance !== void 0) return;
+    if (!root) return;
+    const apply = () => setThemeTick((tick) => tick + 1);
+    const media = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
+    media?.addEventListener("change", apply);
+    const observer = new MutationObserver(apply);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["style"]
+    });
+    return () => {
+      media?.removeEventListener("change", apply);
+      observer.disconnect();
+    };
+  }, [root, appearance]);
+  return useMemo6(() => {
+    if (appearance === null) return void 0;
+    if (appearance !== void 0) return appearance;
+    if (!root) return void 0;
+    return buildStripeAppearance(root);
+  }, [root, appearance, themeTick]);
+}
+
 // src/utils/processPaymentResult.ts
 async function reconcilePayment(input) {
   const { paymentIntentId, productRef, planRef, processPayment, refetchPurchase, copy } = input;
@@ -3321,8 +3759,10 @@ function normalizeOneTimePurchase(input) {
 }
 
 // src/hooks/useBusinessDetailsAttach.ts
-import { useCallback as useCallback8, useEffect as useEffect6, useRef as useRef4, useState as useState8 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect7, useRef as useRef4, useState as useState9 } from "react";
 import {
+  getCustomerAddressFieldErrors,
+  isCustomerAddressComplete,
   validateBusinessDetails as validateBusinessDetails2
 } from "@solvapay/core";
 var defaultBusinessDetails = { isBusiness: false };
@@ -3334,32 +3774,45 @@ function useBusinessDetailsAttach(options) {
     onTaxChange,
     refreshElements
   } = options;
-  const [businessDetails, setBusinessDetailsState] = useState8(defaultBusinessDetails);
-  const [taxBreakdown, setTaxBreakdown] = useState8(null);
-  const [businessDetailsAttached, setBusinessDetailsAttached] = useState8(false);
-  const [businessDetailsAttaching, setBusinessDetailsAttaching] = useState8(false);
-  const [businessDetailsError, setBusinessDetailsError] = useState8(null);
-  const [fieldErrors, setFieldErrors] = useState8({});
+  const [businessDetails, setBusinessDetailsState] = useState9(defaultBusinessDetails);
+  const [taxBreakdown, setTaxBreakdown] = useState9(null);
+  const [businessDetailsAttached, setBusinessDetailsAttached] = useState9(false);
+  const [businessDetailsAttaching, setBusinessDetailsAttaching] = useState9(false);
+  const [businessDetailsError, setBusinessDetailsError] = useState9(null);
+  const [fieldErrors, setFieldErrors] = useState9({});
   const attachRequestIdRef = useRef4(0);
-  const setBusinessDetails = useCallback8((patch) => {
+  const setBusinessDetails = useCallback9((patch) => {
     setBusinessDetailsState((prev) => {
       const next = { ...prev, ...patch };
       if (patch.isBusiness === false) {
-        return { isBusiness: false };
+        return {
+          isBusiness: false,
+          ...next.customerCountry && { customerCountry: next.customerCountry },
+          ...next.customerState && { customerState: next.customerState },
+          ...next.customerPostalCode && { customerPostalCode: next.customerPostalCode },
+          ...next.customerName && { customerName: next.customerName }
+        };
+      }
+      if (patch.isBusiness === true && !next.country && next.customerCountry) {
+        return { ...next, country: next.customerCountry };
       }
       return next;
     });
     setBusinessDetailsAttached(false);
     setBusinessDetailsError(null);
   }, []);
-  const runAttach = useCallback8(
+  const runAttach = useCallback9(
     async (input) => {
       if (!processorPaymentId || !attachBusinessDetails) {
         return !attachBusinessDetails;
       }
+      const addressErrors = getCustomerAddressFieldErrors(input);
       const validation = validateBusinessDetails2(input);
-      if (!validation.success) {
-        setFieldErrors(mapBusinessFieldErrors(input));
+      if (!validation.success || !isCustomerAddressComplete(input)) {
+        setFieldErrors({
+          ...mapBusinessFieldErrors(input),
+          ...addressErrors
+        });
         return false;
       }
       setFieldErrors({});
@@ -3394,11 +3847,15 @@ function useBusinessDetailsAttach(options) {
     },
     [processorPaymentId, attachBusinessDetails, customerRef, onTaxChange, refreshElements]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     if (!processorPaymentId || !attachBusinessDetails) return;
     const validation = validateBusinessDetails2(businessDetails);
-    if (!validation.success) {
-      setFieldErrors(mapBusinessFieldErrors(businessDetails));
+    if (!validation.success || !isCustomerAddressComplete(businessDetails)) {
+      const countrySelected = !!(businessDetails.customerCountry?.trim() || businessDetails.isBusiness && businessDetails.country?.trim());
+      setFieldErrors({
+        ...mapBusinessFieldErrors(businessDetails),
+        ...countrySelected ? getCustomerAddressFieldErrors(businessDetails) : {}
+      });
       setBusinessDetailsAttached(false);
       return;
     }
@@ -3423,7 +3880,8 @@ function useBusinessDetailsAttach(options) {
 }
 
 // src/primitives/PaymentForm.tsx
-import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { isCustomerAddressComplete as isCustomerAddressComplete2, resolveBuyerCountry as resolveBuyerCountry2 } from "@solvapay/core";
+import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 function toSubmitVariant(variant) {
   switch (variant) {
     case "freeTier":
@@ -3451,9 +3909,10 @@ var Root2 = forwardRef5(
       buttonClassName,
       prefillCustomer,
       requireTermsAcceptance = false,
+      appearance,
       children
     } = props;
-    const solva = useContext8(SolvaPayContext);
+    const solva = useContext9(SolvaPayContext);
     if (!solva) throw new MissingProviderError("PaymentForm");
     const { attachBusinessDetails, customerRef } = solva;
     const copy = useCopy();
@@ -3481,7 +3940,7 @@ var Root2 = forwardRef5(
     });
     const hasInitializedRef = useRef5(false);
     const hasPlanOrProduct = !!(effectivePlanRef || effectiveProductRef);
-    useEffect7(() => {
+    useEffect8(() => {
       if (isFreePlan) return;
       if (!hasInitializedRef.current && hasPlanOrProduct && !checkoutLoading && !checkoutError && !clientSecret) {
         hasInitializedRef.current = true;
@@ -3495,111 +3954,85 @@ var Root2 = forwardRef5(
       }
     }, [hasPlanOrProduct, checkoutLoading, checkoutError, clientSecret, startCheckout, isFreePlan]);
     const finalReturnUrl = returnUrl || (typeof window !== "undefined" ? window.location.href : "/");
-    const elementsOptions = useMemo6(() => {
+    const [rootEl, setRootEl] = useState10(null);
+    const attachRoot = useCallback10((node) => {
+      if (!node) return;
+      setRootEl((prev) => prev === node ? prev : node);
+    }, []);
+    const sectionRef = composeRefs(forwardedRef, attachRoot);
+    const resolvedAppearance = useStripeAppearance(rootEl, appearance);
+    const elementsOptions = useMemo7(() => {
       if (!clientSecret) return void 0;
-      return { clientSecret, locale: toStripeElementLocale(locale) };
-    }, [clientSecret, locale]);
-    const shouldRenderElements = !!(stripePromise && clientSecret);
-    if (!hasPlanOrProduct) {
-      return /* @__PURE__ */ jsx12(
-        "section",
-        {
-          ref: forwardedRef,
-          className,
-          "data-solvapay-payment-form": "",
-          "data-state": "error",
-          children: /* @__PURE__ */ jsx12("p", { role: "alert", "data-solvapay-payment-form-error": "", children: copy.errors.configMissingPlanOrProduct })
-        }
-      );
-    }
-    if (checkoutError) {
-      return /* @__PURE__ */ jsx12(
-        "section",
-        {
-          ref: forwardedRef,
-          className,
-          "data-solvapay-payment-form": "",
-          "data-state": "error",
-          children: /* @__PURE__ */ jsxs6("p", { role: "alert", "data-solvapay-payment-form-error": "", children: [
-            copy.errors.paymentInitFailed,
-            " ",
-            checkoutError.message || copy.errors.unknownError
-          ] })
-        }
-      );
-    }
-    if (isFreePlan && resolvedPlan) {
-      return /* @__PURE__ */ jsx12(
-        "section",
-        {
-          ref: forwardedRef,
-          className,
-          "data-solvapay-payment-form": "",
-          "data-state": "ready",
-          "data-variant": "free",
-          children: /* @__PURE__ */ jsx12(
-            FreeInner,
-            {
-              planRef: effectivePlanRef,
-              productRef: effectiveProductRef,
-              plan: resolvedPlan,
-              resolvedPlanRef,
-              requireTermsAcceptance,
-              submitButtonText,
-              buttonClassName,
-              onFreePlan,
-              onResult,
-              onError,
-              children
-            }
-          )
-        }
-      );
-    }
-    if (shouldRenderElements && elementsOptions && clientSecret) {
-      const resolvedClientSecret = clientSecret;
-      return /* @__PURE__ */ jsx12(
-        "section",
-        {
-          ref: forwardedRef,
-          className,
-          "data-solvapay-payment-form": "",
-          "data-state": "ready",
-          "data-variant": "paid",
-          children: /* @__PURE__ */ jsx12(Elements, { stripe: stripePromise, options: elementsOptions, children: /* @__PURE__ */ jsx12(
-            PaidInner,
-            {
-              planRef: effectivePlanRef,
-              productRef: effectiveProductRef,
-              prefillCustomer,
-              resolvedPlanRef,
-              plan: resolvedPlan ?? null,
-              clientSecret: resolvedClientSecret,
-              processorPaymentId,
-              returnUrl: finalReturnUrl,
-              submitButtonText,
-              buttonClassName,
-              requireTermsAcceptance,
-              onSuccess,
-              onResult,
-              onError,
-              onTaxChange: props.onTaxChange,
-              attachBusinessDetails,
-              customerRef,
-              children
-            }
-          ) }, resolvedClientSecret)
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx12(
+      return {
+        clientSecret,
+        locale: toStripeElementLocale(locale),
+        ...resolvedAppearance ? { appearance: resolvedAppearance } : {}
+      };
+    }, [clientSecret, locale, resolvedAppearance]);
+    const appearanceReady = appearance !== void 0 || rootEl !== null;
+    const shouldRenderElements = !!(stripePromise && clientSecret && appearanceReady);
+    const dataState = !hasPlanOrProduct || checkoutError ? "error" : isFreePlan && resolvedPlan ? "ready" : shouldRenderElements ? "ready" : "loading";
+    const dataVariant = isFreePlan && resolvedPlan ? "free" : shouldRenderElements ? "paid" : void 0;
+    const pending = /* @__PURE__ */ jsx13(
+      PendingInner,
+      {
+        planRef: effectivePlanRef,
+        productRef: effectiveProductRef,
+        resolvedPlanRef,
+        plan: resolvedPlan ?? null,
+        returnUrl: finalReturnUrl,
+        submitButtonText,
+        buttonClassName,
+        error: checkoutError ? `${copy.errors.paymentInitFailed} ${checkoutError.message || copy.errors.unknownError}` : null,
+        children
+      }
+    );
+    return /* @__PURE__ */ jsx13(
       "section",
       {
-        ref: forwardedRef,
+        ref: sectionRef,
         className,
         "data-solvapay-payment-form": "",
-        "data-state": "loading",
-        children: /* @__PURE__ */ jsx12("output", { "data-solvapay-payment-form-loading": "", children: /* @__PURE__ */ jsx12(Spinner, { size: "md" }) })
+        "data-state": dataState,
+        ...dataVariant ? { "data-variant": dataVariant } : {},
+        children: !hasPlanOrProduct ? /* @__PURE__ */ jsx13("p", { role: "alert", "data-solvapay-payment-form-error": "", children: copy.errors.configMissingPlanOrProduct }) : checkoutError ? pending : isFreePlan && resolvedPlan ? /* @__PURE__ */ jsx13(
+          FreeInner,
+          {
+            planRef: effectivePlanRef,
+            productRef: effectiveProductRef,
+            plan: resolvedPlan,
+            resolvedPlanRef,
+            requireTermsAcceptance,
+            submitButtonText,
+            buttonClassName,
+            onFreePlan,
+            onResult,
+            onError,
+            children
+          }
+        ) : shouldRenderElements && elementsOptions && clientSecret ? /* @__PURE__ */ jsx13(Elements, { stripe: stripePromise, options: elementsOptions, children: /* @__PURE__ */ jsx13(
+          PaidInner,
+          {
+            planRef: effectivePlanRef,
+            productRef: effectiveProductRef,
+            prefillCustomer,
+            resolvedPlanRef,
+            plan: resolvedPlan ?? null,
+            clientSecret,
+            processorPaymentId,
+            returnUrl: finalReturnUrl,
+            submitButtonText,
+            buttonClassName,
+            requireTermsAcceptance,
+            onSuccess,
+            onResult,
+            onError,
+            onTaxChange: props.onTaxChange,
+            attachBusinessDetails,
+            customerRef,
+            children
+          }
+        ) }, clientSecret) : pending
       }
     );
   }
@@ -3625,12 +4058,14 @@ var PaidInner = ({
   children
 }) => {
   const stripe = useStripe();
+  const stripeAvailable = !!stripe;
+  const stripeRef = useRef5(stripe);
   const elements = useElements();
   const copy = useCopy();
   const customer = useCustomer();
   const { processPayment, upsertPurchase } = useSolvaPay();
   const { refetch } = usePurchase();
-  const refreshElements = useCallback9(async () => {
+  const refreshElements = useCallback10(async () => {
     if (elements) {
       await elements.fetchUpdates();
     }
@@ -3652,17 +4087,23 @@ var PaidInner = ({
     onTaxChange,
     refreshElements
   });
-  const [elementKind, setElementKind] = useState9(
+  const [elementKind, setElementKind] = useState10(
     children ? null : "payment-element"
   );
-  const [customerName, setCustomerName] = useState9("");
-  const [paymentInputComplete, setPaymentInputComplete] = useState9(false);
-  const [termsAccepted, setTermsAccepted] = useState9(false);
-  const [isProcessing, setIsProcessing] = useState9(false);
-  const [error, setError] = useState9(null);
+  const [customerName, setCustomerName] = useState10("");
+  const [paymentInputComplete, setPaymentInputComplete] = useState10(false);
+  const [termsAccepted, setTermsAccepted] = useState10(false);
+  const [isProcessing, setIsProcessing] = useState10(false);
+  const [error, setError] = useState10(null);
   const returnResumeStarted = useRef5(false);
-  useEffect7(() => {
-    if (!stripe || returnResumeStarted.current || typeof window === "undefined") return;
+  useEffect8(() => {
+    stripeRef.current = stripe;
+  });
+  useEffect8(() => {
+    const stripeApi = stripeRef.current;
+    if (!stripeAvailable || !stripeApi || returnResumeStarted.current || typeof window === "undefined") {
+      return;
+    }
     const returnClientSecret = readPaymentIntentClientSecret(window.location.search);
     if (!returnClientSecret) return;
     returnResumeStarted.current = true;
@@ -3670,7 +4111,7 @@ var PaidInner = ({
     void (async () => {
       setIsProcessing(true);
       setError(null);
-      const retrieved = await stripe.retrievePaymentIntent(returnClientSecret);
+      const retrieved = await stripeApi.retrievePaymentIntent(returnClientSecret);
       if (cancelled) return;
       stripPaymentIntentParams();
       if (retrieved.error || !retrieved.paymentIntent) {
@@ -3680,7 +4121,7 @@ var PaidInner = ({
       }
       let paymentIntent = retrieved.paymentIntent;
       if (paymentIntent.status === "requires_action") {
-        const actionResult = await stripe.handleNextAction({ clientSecret: returnClientSecret });
+        const actionResult = await stripeApi.handleNextAction({ clientSecret: returnClientSecret });
         if (cancelled) return;
         if (actionResult.error || !actionResult.paymentIntent) {
           setError(copy.errors.paymentRequires3ds);
@@ -3735,7 +4176,7 @@ var PaidInner = ({
       cancelled = true;
     };
   }, [
-    stripe,
+    stripeAvailable,
     copy,
     productRef,
     planRef,
@@ -3748,8 +4189,8 @@ var PaidInner = ({
     onError
   ]);
   const isReady = !!(stripe && elements);
-  const canSubmit = isReady && !!clientSecret && !!elementKind && paymentInputComplete && (!requireTermsAcceptance || termsAccepted) && (!requiresBusinessAttach || businessDetailsAttached) && !businessDetailsAttaching && !isProcessing;
-  const submit = useCallback9(async () => {
+  const canSubmit = isReady && !!clientSecret && !!elementKind && paymentInputComplete && (!requireTermsAcceptance || termsAccepted) && (!requiresBusinessAttach || businessDetailsAttached) && isCustomerAddressComplete2(businessDetails) && !businessDetailsAttaching && !isProcessing;
+  const submit = useCallback10(async () => {
     if (!stripe || !elements || !clientSecret || !elementKind) {
       const msg = !stripe || !elements ? copy.errors.stripeUnavailable : copy.errors.paymentIntentUnavailable;
       setError(msg);
@@ -3776,10 +4217,13 @@ var PaidInner = ({
         clientSecret,
         mode: elementKind === "card-element" ? "card-element" : "payment-element",
         returnUrl,
-        billingDetails: {
-          ...customerName.trim() && { name: customerName.trim() },
-          email: customer.email ?? prefillCustomer?.email
-        },
+        billingDetails: buildConfirmBillingDetails({
+          name: customerName.trim() || customer.name,
+          email: customer.email ?? prefillCustomer?.email,
+          country: resolveBuyerCountry2(businessDetails),
+          state: businessDetails.customerState,
+          postalCode: businessDetails.customerPostalCode
+        }),
         copy
       });
       if (result.status === "error") {
@@ -3853,7 +4297,7 @@ var PaidInner = ({
     businessDetailsError
   ]);
   const effectiveError = error ?? businessDetailsError;
-  const contextValue = useMemo6(
+  const contextValue = useMemo7(
     () => ({
       planRef,
       productRef,
@@ -3922,7 +4366,7 @@ var PaidInner = ({
       submit
     ]
   );
-  return /* @__PURE__ */ jsx12(PaymentFormProvider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx13(PaymentFormProvider, { value: contextValue, children });
 };
 var FreeInner = ({
   planRef,
@@ -3940,10 +4384,10 @@ var FreeInner = ({
   const copy = useCopy();
   const { refetch } = usePurchase();
   const { activate, state, error: activationError, result: activationResult } = useActivation();
-  const [termsAccepted, setTermsAccepted] = useState9(false);
-  const [localError, setLocalError] = useState9(void 0);
+  const [termsAccepted, setTermsAccepted] = useState10(false);
+  const [localError, setLocalError] = useState10(void 0);
   const resultFiredRef = useRef5(false);
-  useEffect7(() => {
+  useEffect8(() => {
     if (state === "activated" && activationResult && !resultFiredRef.current) {
       resultFiredRef.current = true;
       const res = { kind: "activated", result: activationResult };
@@ -3955,7 +4399,7 @@ var FreeInner = ({
   }, [state, activationResult, onResult, refetch]);
   const isProcessing = state === "activating";
   const canSubmit = !isProcessing && (!requireTermsAcceptance || termsAccepted) && !!productRef;
-  const submit = useCallback9(async () => {
+  const submit = useCallback10(async () => {
     if (!productRef) {
       const msg = copy.errors.configMissingPlanOrProduct;
       setLocalError(msg);
@@ -3979,7 +4423,7 @@ var FreeInner = ({
     }
   }, [productRef, plan, onFreePlan, activate, onResult, onError, copy]);
   const error = localError ?? activationError;
-  const contextValue = useMemo6(
+  const contextValue = useMemo7(
     () => ({
       planRef,
       productRef,
@@ -4034,11 +4478,77 @@ var FreeInner = ({
       submit
     ]
   );
-  return /* @__PURE__ */ jsx12(PaymentFormProvider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx13(PaymentFormProvider, { value: contextValue, children });
+};
+var PendingInner = ({
+  planRef,
+  productRef,
+  resolvedPlanRef,
+  plan,
+  returnUrl,
+  submitButtonText,
+  buttonClassName,
+  error,
+  children
+}) => {
+  const contextValue = useMemo7(
+    () => ({
+      planRef,
+      productRef,
+      prefillCustomer: void 0,
+      resolvedPlanRef,
+      plan,
+      clientSecret: null,
+      processorPaymentId: null,
+      stripe: null,
+      elements: null,
+      isProcessing: false,
+      isReady: false,
+      paymentInputComplete: false,
+      termsAccepted: false,
+      requireTermsAcceptance: false,
+      canSubmit: false,
+      error,
+      elementKind: null,
+      returnUrl,
+      submitButtonText,
+      buttonClassName,
+      customerName: "",
+      setCustomerName: () => {
+      },
+      businessDetails: defaultBusinessDetails,
+      taxBreakdown: null,
+      businessDetailsAttached: false,
+      businessDetailsAttaching: false,
+      businessDetailsError: null,
+      fieldErrors: {},
+      setBusinessDetails: () => {
+      },
+      setElementKind: () => {
+      },
+      setPaymentInputComplete: () => {
+      },
+      setTermsAccepted: () => {
+      },
+      submit: async () => {
+      }
+    }),
+    [
+      planRef,
+      productRef,
+      resolvedPlanRef,
+      plan,
+      returnUrl,
+      submitButtonText,
+      buttonClassName,
+      error
+    ]
+  );
+  return /* @__PURE__ */ jsx13(PaymentFormProvider, { value: contextValue, children });
 };
 var Summary = (props) => {
   const ctx = usePaymentForm();
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     CheckoutSummary2,
     {
       ...props,
@@ -4051,7 +4561,7 @@ var Summary = (props) => {
 };
 var MandateTextPrimitive = (props) => {
   const ctx = usePaymentForm();
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     MandateText,
     {
       ...props,
@@ -4068,14 +4578,14 @@ var CustomerFields = forwardRef5(
     const email = customer.email ?? prefillCustomer?.email;
     if (!email) return null;
     const Comp = asChild ? Slot : "section";
-    return /* @__PURE__ */ jsx12(Comp, { ref, "data-solvapay-payment-form-customer-fields": "", ...rest, children: children ?? /* @__PURE__ */ jsxs6(Fragment6, { children: [
+    return /* @__PURE__ */ jsx13(Comp, { ref, "data-solvapay-payment-form-customer-fields": "", ...rest, children: children ?? /* @__PURE__ */ jsxs6(Fragment6, { children: [
       email && /* @__PURE__ */ jsxs6("dl", { "data-solvapay-payment-form-customer-email": "", children: [
-        /* @__PURE__ */ jsx12("dt", { children: copy.customer.emailLabel }),
-        /* @__PURE__ */ jsx12("dd", { children: email })
+        /* @__PURE__ */ jsx13("dt", { children: copy.customer.emailLabel }),
+        /* @__PURE__ */ jsx13("dd", { children: email })
       ] }),
       /* @__PURE__ */ jsxs6("dl", { "data-solvapay-payment-form-customer-name": "", children: [
-        /* @__PURE__ */ jsx12("dt", { children: copy.customer.nameLabel }),
-        /* @__PURE__ */ jsx12("dd", { children: /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13("dt", { children: copy.customer.nameLabel }),
+        /* @__PURE__ */ jsx13("dd", { children: /* @__PURE__ */ jsx13(
           "input",
           {
             type: "text",
@@ -4098,14 +4608,14 @@ var CustomerFields = forwardRef5(
 var PaymentElementSlot = ({ options }) => {
   const { setElementKind, setPaymentInputComplete, isReady, stripe, elements } = usePaymentForm();
   const locale = useLocale();
-  useEffect7(() => {
+  useEffect8(() => {
     if (stripe && elements) setElementKind("payment-element");
   }, [setElementKind, stripe, elements]);
   if (!stripe || !elements) return null;
   if (!isReady) {
-    return /* @__PURE__ */ jsx12("output", { "data-solvapay-payment-form-loading": "", children: /* @__PURE__ */ jsx12(Spinner, { size: "sm" }) });
+    return /* @__PURE__ */ jsx13("output", { "data-solvapay-payment-form-loading": "", children: /* @__PURE__ */ jsx13(Spinner, { size: "sm" }) });
   }
-  return /* @__PURE__ */ jsx12("section", { "data-solvapay-payment-form-payment-element": "", children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13("section", { "data-solvapay-payment-form-payment-element": "", children: /* @__PURE__ */ jsx13(
     StripePaymentElement,
     {
       options: withPaymentElementDefaults(options),
@@ -4116,14 +4626,14 @@ var PaymentElementSlot = ({ options }) => {
 };
 var CardElementSlot = ({ options }) => {
   const { setElementKind, setPaymentInputComplete, isReady, stripe, elements } = usePaymentForm();
-  useEffect7(() => {
+  useEffect8(() => {
     if (stripe && elements) setElementKind("card-element");
   }, [setElementKind, stripe, elements]);
   if (!stripe || !elements) return null;
   if (!isReady) {
-    return /* @__PURE__ */ jsx12("output", { "data-solvapay-payment-form-loading": "", children: /* @__PURE__ */ jsx12(Spinner, { size: "sm" }) });
+    return /* @__PURE__ */ jsx13("output", { "data-solvapay-payment-form-loading": "", children: /* @__PURE__ */ jsx13(Spinner, { size: "sm" }) });
   }
-  return /* @__PURE__ */ jsx12("section", { "data-solvapay-payment-form-card-element": "", children: /* @__PURE__ */ jsx12(StripeCardElement, { options, onChange: (e) => setPaymentInputComplete(e.complete) }) });
+  return /* @__PURE__ */ jsx13("section", { "data-solvapay-payment-form-card-element": "", children: /* @__PURE__ */ jsx13(StripeCardElement, { options, onChange: (e) => setPaymentInputComplete(e.complete) }) });
 };
 var TermsCheckbox = forwardRef5(
   function PaymentFormTermsCheckbox({ asChild, label, children, ...rest }, ref) {
@@ -4131,10 +4641,10 @@ var TermsCheckbox = forwardRef5(
     const copy = useCopy();
     const id = "solvapay-terms-checkbox";
     if (asChild) {
-      return /* @__PURE__ */ jsx12(Slot, { ref, "data-solvapay-payment-form-terms": "", ...rest, children });
+      return /* @__PURE__ */ jsx13(Slot, { ref, "data-solvapay-payment-form-terms": "", ...rest, children });
     }
     return /* @__PURE__ */ jsxs6("label", { ref, htmlFor: id, "data-solvapay-payment-form-terms": "", ...rest, children: [
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13(
         "input",
         {
           id,
@@ -4143,7 +4653,7 @@ var TermsCheckbox = forwardRef5(
           onChange: (e) => setTermsAccepted(e.target.checked)
         }
       ),
-      /* @__PURE__ */ jsx12("span", { children: label ?? copy.terms.checkboxLabel })
+      /* @__PURE__ */ jsx13("span", { children: label ?? copy.terms.checkboxLabel })
     ] });
   }
 );
@@ -4177,8 +4687,8 @@ var SubmitButton = forwardRef5(
       override: typeof children === "string" ? children : ctx.submitButtonText
     });
     const processingContent = /* @__PURE__ */ jsxs6(Fragment6, { children: [
-      /* @__PURE__ */ jsx12(Spinner, { size: "sm" }),
-      /* @__PURE__ */ jsx12("span", { children: copy.cta.processing })
+      /* @__PURE__ */ jsx13(Spinner, { size: "sm" }),
+      /* @__PURE__ */ jsx13("span", { children: copy.cta.processing })
     ] });
     const buttonProps = {
       "data-solvapay-payment-form-submit": "",
@@ -4196,30 +4706,30 @@ var SubmitButton = forwardRef5(
       ...rest
     };
     if (asChild) {
-      const slotChild = ctx.isProcessing && React10.isValidElement(children) ? React10.cloneElement(
+      const slotChild = ctx.isProcessing && React11.isValidElement(children) ? React11.cloneElement(
         children,
         void 0,
         processingContent
       ) : children;
-      return /* @__PURE__ */ jsx12(Slot, { ref, ...buttonProps, children: slotChild });
+      return /* @__PURE__ */ jsx13(Slot, { ref, ...buttonProps, children: slotChild });
     }
     const content = ctx.isProcessing ? processingContent : children && typeof children !== "string" ? children : label;
-    return /* @__PURE__ */ jsx12("button", { ref, type: "submit", ...buttonProps, children: content });
+    return /* @__PURE__ */ jsx13("button", { ref, type: "submit", ...buttonProps, children: content });
   }
 );
 var Loading = forwardRef5(function PaymentFormLoading({ asChild, children, ...rest }, ref) {
   const ctx = usePaymentForm();
   if (ctx.isReady && ctx.clientSecret) return null;
   if (asChild) {
-    return /* @__PURE__ */ jsx12(Slot, { ref, "data-solvapay-payment-form-loading": "", ...rest, children: children ?? /* @__PURE__ */ jsx12(Spinner, { size: "sm" }) });
+    return /* @__PURE__ */ jsx13(Slot, { ref, "data-solvapay-payment-form-loading": "", ...rest, children: children ?? /* @__PURE__ */ jsx13(Spinner, { size: "sm" }) });
   }
-  return /* @__PURE__ */ jsx12("output", { ref, "data-solvapay-payment-form-loading": "", ...rest, children: children ?? /* @__PURE__ */ jsx12(Spinner, { size: "sm" }) });
+  return /* @__PURE__ */ jsx13("output", { ref, "data-solvapay-payment-form-loading": "", ...rest, children: children ?? /* @__PURE__ */ jsx13(Spinner, { size: "sm" }) });
 });
 var ErrorSlot = forwardRef5(function PaymentFormError({ asChild, children, ...rest }, ref) {
   const ctx = usePaymentForm();
   if (!ctx.error) return null;
   if (asChild) {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       Slot,
       {
         ref,
@@ -4232,7 +4742,7 @@ var ErrorSlot = forwardRef5(function PaymentFormError({ asChild, children, ...re
       }
     );
   }
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "p",
     {
       ref,
@@ -4295,7 +4805,7 @@ var PaymentForm = {
 };
 
 // src/hooks/useTopupAmountSelector.ts
-import { useState as useState10, useCallback as useCallback10, useMemo as useMemo7 } from "react";
+import { useState as useState11, useCallback as useCallback11, useMemo as useMemo8 } from "react";
 function getQuickAmounts(currency) {
   switch (currency.toUpperCase()) {
     case "SEK":
@@ -4315,7 +4825,11 @@ function getQuickAmounts(currency) {
 }
 function getCurrencySymbol(currency) {
   try {
-    const parts = new Intl.NumberFormat("en", { style: "currency", currency }).formatToParts(0);
+    const parts = new Intl.NumberFormat("en", {
+      style: "currency",
+      currency,
+      currencyDisplay: "narrowSymbol"
+    }).formatToParts(0);
     const sym = parts.find((p) => p.type === "currency");
     return sym?.value || currency;
   } catch {
@@ -4327,19 +4841,19 @@ var DEFAULT_MAX = 1e5;
 function useTopupAmountSelector(options) {
   const { currency, minAmount = DEFAULT_MIN, maxAmount = DEFAULT_MAX } = options;
   const copy = useCopy();
-  const [selectedAmount, setSelectedAmount] = useState10(null);
-  const [customAmount, setCustomAmountRaw] = useState10("");
-  const [error, setError] = useState10(null);
-  const quickAmounts = useMemo7(() => getQuickAmounts(currency), [currency]);
-  const currencySymbol = useMemo7(() => getCurrencySymbol(currency), [currency]);
-  const resolvedAmount = useMemo7(() => {
+  const [selectedAmount, setSelectedAmount] = useState11(null);
+  const [customAmount, setCustomAmountRaw] = useState11("");
+  const [error, setError] = useState11(null);
+  const quickAmounts = useMemo8(() => getQuickAmounts(currency), [currency]);
+  const currencySymbol = useMemo8(() => getCurrencySymbol(currency), [currency]);
+  const resolvedAmount = useMemo8(() => {
     if (customAmount) {
       const parsed = parseFloat(customAmount);
       return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
     }
     return selectedAmount;
   }, [selectedAmount, customAmount]);
-  const selectQuickAmount = useCallback10(
+  const selectQuickAmount = useCallback11(
     (amount) => {
       setSelectedAmount(amount);
       setCustomAmountRaw("");
@@ -4347,7 +4861,7 @@ function useTopupAmountSelector(options) {
     },
     []
   );
-  const setCustomAmount = useCallback10(
+  const setCustomAmount = useCallback11(
     (value) => {
       const sanitized = value.replace(/[^0-9.]/g, "");
       const dotIndex = sanitized.indexOf(".");
@@ -4358,7 +4872,7 @@ function useTopupAmountSelector(options) {
     },
     []
   );
-  const validate = useCallback10(() => {
+  const validate = useCallback11(() => {
     if (resolvedAmount == null) {
       setError(copy.topup.selectOrEnterAmount);
       return false;
@@ -4386,7 +4900,7 @@ function useTopupAmountSelector(options) {
     setError(null);
     return true;
   }, [resolvedAmount, minAmount, maxAmount, currency, copy]);
-  const reset = useCallback10(() => {
+  const reset = useCallback11(() => {
     setSelectedAmount(null);
     setCustomAmountRaw("");
     setError(null);
@@ -4406,10 +4920,10 @@ function useTopupAmountSelector(options) {
 }
 
 // src/hooks/useBalance.ts
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 function useBalance() {
   const { balance } = useSolvaPay();
-  useEffect8(() => {
+  useEffect9(() => {
     balance.refetch();
   }, [balance.refetch]);
   return balance;
@@ -4417,17 +4931,17 @@ function useBalance() {
 
 // src/primitives/AmountPicker.tsx
 import {
-  createContext as createContext6,
+  createContext as createContext7,
   forwardRef as forwardRef6,
-  useCallback as useCallback11,
-  useContext as useContext9,
-  useEffect as useEffect9,
-  useMemo as useMemo8
+  useCallback as useCallback12,
+  useContext as useContext10,
+  useEffect as useEffect10,
+  useMemo as useMemo9
 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var AmountPickerContext = createContext6(null);
+import { jsx as jsx14 } from "react/jsx-runtime";
+var AmountPickerContext = createContext7(null);
 function usePickerCtx(part) {
-  const ctx = useContext9(AmountPickerContext);
+  const ctx = useContext10(AmountPickerContext);
   if (!ctx) {
     throw new Error(`AmountPicker.${part} must be rendered inside <AmountPicker.Root>.`);
   }
@@ -4444,14 +4958,14 @@ var Root3 = forwardRef6(function AmountPickerRoot({
   children,
   ...rest
 }, forwardedRef) {
-  const solva = useContext9(SolvaPayContext);
+  const solva = useContext10(SolvaPayContext);
   if (!solva) throw new MissingProviderError("AmountPicker");
   const internalSelector = useTopupAmountSelector({ currency, minAmount, maxAmount });
   const selector = externalSelector ?? internalSelector;
   const { creditsPerMinorUnit, displayExchangeRate } = useBalance();
   const minorPerMajor = getMinorUnitsPerMajor(currency);
   const resolvedAmountMinor = selector.resolvedAmount != null && selector.resolvedAmount > 0 ? Math.round(selector.resolvedAmount * minorPerMajor) : null;
-  useEffect9(() => {
+  useEffect10(() => {
     if (emit === "minor") {
       onChange?.(resolvedAmountMinor);
     } else {
@@ -4461,7 +4975,7 @@ var Root3 = forwardRef6(function AmountPickerRoot({
   const rate = displayExchangeRate ?? 1;
   const estimatedCredits = creditsPerMinorUnit != null && creditsPerMinorUnit > 0 && resolvedAmountMinor != null ? Math.floor(resolvedAmountMinor / rate * creditsPerMinorUnit) : null;
   const isApproximate = rate !== 1;
-  const ctx = useMemo8(
+  const ctx = useMemo9(
     () => ({
       ...selector,
       currency,
@@ -4484,7 +4998,7 @@ var Root3 = forwardRef6(function AmountPickerRoot({
     ]
   );
   const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx13(AmountPickerContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx13(Comp, { ref: forwardedRef, "data-solvapay-amount-picker": "", ...rest, children }) });
+  return /* @__PURE__ */ jsx14(AmountPickerContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx14(Comp, { ref: forwardedRef, "data-solvapay-amount-picker": "", ...rest, children }) });
 });
 var Option = forwardRef6(function AmountPickerOption({ asChild, amount, onClick, children, ...rest }, forwardedRef) {
   const ctx = usePickerCtx("Option");
@@ -4508,10 +5022,10 @@ var Option = forwardRef6(function AmountPickerOption({ asChild, amount, onClick,
   if (asChild) {
     return (
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      /* @__PURE__ */ jsx13(Slot, { ref: forwardedRef, ...commonProps, children: children ?? defaultLabel })
+      /* @__PURE__ */ jsx14(Slot, { ref: forwardedRef, ...commonProps, children: children ?? defaultLabel })
     );
   }
-  return /* @__PURE__ */ jsx13("button", { ref: forwardedRef, type: "button", ...commonProps, children: children ?? defaultLabel });
+  return /* @__PURE__ */ jsx14("button", { ref: forwardedRef, type: "button", ...commonProps, children: children ?? defaultLabel });
 });
 var Custom = forwardRef6(function AmountPickerCustom({ asChild, onChange, onFocus, ...rest }, forwardedRef) {
   const ctx = usePickerCtx("Custom");
@@ -4534,15 +5048,15 @@ var Custom = forwardRef6(function AmountPickerCustom({ asChild, onChange, onFocu
   if (asChild) {
     return (
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      /* @__PURE__ */ jsx13(Slot, { ref: forwardedRef, ...commonProps })
+      /* @__PURE__ */ jsx14(Slot, { ref: forwardedRef, ...commonProps })
     );
   }
-  return /* @__PURE__ */ jsx13("input", { ref: forwardedRef, ...commonProps });
+  return /* @__PURE__ */ jsx14("input", { ref: forwardedRef, ...commonProps });
 });
 var Confirm = forwardRef6(function AmountPickerConfirm({ asChild, onClick, onConfirm, disabled, children, ...rest }, forwardedRef) {
   const ctx = usePickerCtx("Confirm");
   const isDisabled = disabled || !ctx.resolvedAmount;
-  const handleConfirm = useCallback11(() => {
+  const handleConfirm = useCallback12(() => {
     if (!ctx.validate()) return;
     if (ctx.emit === "minor") {
       if (ctx.resolvedAmountMinor != null) onConfirm?.(ctx.resolvedAmountMinor);
@@ -4561,10 +5075,10 @@ var Confirm = forwardRef6(function AmountPickerConfirm({ asChild, onClick, onCon
   if (asChild) {
     return (
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      /* @__PURE__ */ jsx13(Slot, { ref: forwardedRef, ...commonProps, children })
+      /* @__PURE__ */ jsx14(Slot, { ref: forwardedRef, ...commonProps, children })
     );
   }
-  return /* @__PURE__ */ jsx13("button", { ref: forwardedRef, type: "button", ...commonProps, children });
+  return /* @__PURE__ */ jsx14("button", { ref: forwardedRef, type: "button", ...commonProps, children });
 });
 var AmountPickerRoot2 = Root3;
 var AmountPickerOption2 = Option;
@@ -4593,7 +5107,7 @@ function useAmountPickerCopy() {
 }
 
 // src/hooks/useTopup.ts
-import { useState as useState11, useCallback as useCallback12, useRef as useRef6 } from "react";
+import { useState as useState12, useCallback as useCallback13, useRef as useRef6 } from "react";
 import { loadStripe as loadStripe2 } from "@stripe/stripe-js";
 var stripePromiseCache2 = /* @__PURE__ */ new Map();
 function getStripeCacheKey2(publishableKey, accountId) {
@@ -4602,13 +5116,13 @@ function getStripeCacheKey2(publishableKey, accountId) {
 function useTopup(options) {
   const { amount, currency, autoRecharge } = options;
   const { createTopupPayment, customerRef, updateCustomerRef } = useSolvaPay();
-  const [loading, setLoading] = useState11(false);
-  const [error, setError] = useState11(null);
-  const [stripePromise, setStripePromise] = useState11(null);
-  const [clientSecret, setClientSecret] = useState11(null);
-  const [processorPaymentId, setProcessorPaymentId] = useState11(null);
+  const [loading, setLoading] = useState12(false);
+  const [error, setError] = useState12(null);
+  const [stripePromise, setStripePromise] = useState12(null);
+  const [clientSecret, setClientSecret] = useState12(null);
+  const [processorPaymentId, setProcessorPaymentId] = useState12(null);
   const isStartingRef = useRef6(false);
-  const startTopup = useCallback12(async () => {
+  const startTopup = useCallback13(async () => {
     if (isStartingRef.current || loading) {
       return;
     }
@@ -4656,7 +5170,7 @@ function useTopup(options) {
       isStartingRef.current = false;
     }
   }, [amount, currency, autoRecharge, createTopupPayment, customerRef, updateCustomerRef, loading]);
-  const reset = useCallback12(() => {
+  const reset = useCallback13(() => {
     isStartingRef.current = false;
     setLoading(false);
     setError(null);
@@ -4676,15 +5190,15 @@ function useTopup(options) {
 }
 
 // src/primitives/TopupForm.tsx
-import React12, {
-  createContext as createContext7,
+import React13, {
+  createContext as createContext8,
   forwardRef as forwardRef7,
-  useCallback as useCallback13,
-  useContext as useContext10,
-  useEffect as useEffect10,
-  useMemo as useMemo9,
+  useCallback as useCallback14,
+  useContext as useContext11,
+  useEffect as useEffect11,
+  useMemo as useMemo10,
   useRef as useRef7,
-  useState as useState12
+  useState as useState13
 } from "react";
 import {
   Elements as Elements2,
@@ -4692,10 +5206,14 @@ import {
   useElements as useElements2,
   PaymentElement as StripePaymentElement2
 } from "@stripe/react-stripe-js";
-import { Fragment as Fragment7, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
-var TopupFormContext = createContext7(null);
+import {
+  isCustomerAddressComplete as isCustomerAddressComplete3,
+  resolveBuyerCountry as resolveBuyerCountry3
+} from "@solvapay/core";
+import { Fragment as Fragment7, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+var TopupFormContext = createContext8(null);
 function useTopupCtx(part) {
-  const ctx = useContext10(TopupFormContext);
+  const ctx = useContext11(TopupFormContext);
   if (!ctx) {
     throw new Error(`TopupForm.${part} must be rendered inside <TopupForm.Root>.`);
   }
@@ -4712,12 +5230,13 @@ var Root4 = forwardRef7(function TopupFormRoot(props, forwardedRef) {
     returnUrl,
     submitButtonText: _submitButtonText,
     buttonClassName: _buttonClassName,
+    appearance,
     className,
     asChild,
     children,
     ...rest
   } = props;
-  const solva = useContext10(SolvaPayContext);
+  const solva = useContext11(SolvaPayContext);
   if (!solva) throw new MissingProviderError("TopupForm");
   const { processTopupPayment, attachBusinessDetails, customerRef } = solva;
   const copy = useCopy();
@@ -4736,7 +5255,7 @@ var Root4 = forwardRef7(function TopupFormRoot(props, forwardedRef) {
   });
   const hasInitializedRef = useRef7(false);
   const hasAmount = amount > 0;
-  useEffect10(() => {
+  useEffect11(() => {
     if (!hasInitializedRef.current && hasAmount && !loading && !topupError && !clientSecret) {
       hasInitializedRef.current = true;
       startTopup().catch((error) => {
@@ -4747,14 +5266,30 @@ var Root4 = forwardRef7(function TopupFormRoot(props, forwardedRef) {
     if (hasAmount && clientSecret) hasInitializedRef.current = true;
   }, [hasAmount, loading, topupError, clientSecret, startTopup]);
   const finalReturnUrl = returnUrl || (typeof window !== "undefined" ? window.location.href : "/");
-  const elementsOptions = useMemo9(() => {
+  const [rootEl, setRootEl] = useState13(null);
+  const attachRoot = useCallback14((node) => {
+    if (!node) return;
+    setRootEl((prev) => prev === node ? prev : node);
+  }, []);
+  const resolvedAppearance = useStripeAppearance(rootEl, appearance);
+  const elementsOptions = useMemo10(() => {
     if (!clientSecret) return void 0;
-    return { clientSecret, locale: toStripeElementLocale(locale) };
-  }, [clientSecret, locale]);
-  const Comp = asChild ? Slot : "section";
+    return {
+      clientSecret,
+      locale: toStripeElementLocale(locale),
+      ...resolvedAppearance ? { appearance: resolvedAppearance } : {}
+    };
+  }, [clientSecret, locale, resolvedAppearance]);
   const outerError = !hasAmount ? copy.errors.configMissingAmount : topupError ? `${copy.errors.topupInitFailed} ${topupError.message || copy.errors.unknownError}` : null;
   const dataState = outerError ? "error" : clientSecret && stripePromise ? "ready" : "loading";
-  const canMountElements = !!(stripePromise && clientSecret && elementsOptions);
+  const appearanceReady = appearance !== void 0 || rootEl !== null;
+  const canMountElements = !!(stripePromise && clientSecret && elementsOptions && appearanceReady);
+  const businessAttach = useBusinessDetailsAttach({
+    processorPaymentId,
+    attachBusinessDetails,
+    customerRef,
+    onTaxChange
+  });
   const innerCommon = {
     amount,
     currency,
@@ -4765,26 +5300,38 @@ var Root4 = forwardRef7(function TopupFormRoot(props, forwardedRef) {
     state: dataState,
     onSuccess,
     onError,
-    onTaxChange,
     processTopupPayment,
-    attachBusinessDetails,
-    customerRef
+    businessAttach
   };
-  const shell = /* @__PURE__ */ jsx14(
-    Comp,
+  const rootRef = composeRefs(forwardedRef, attachRoot);
+  if (asChild) {
+    const slotted = /* @__PURE__ */ jsx15(
+      Slot,
+      {
+        ref: rootRef,
+        className,
+        "data-solvapay-topup-form": "",
+        "data-state": dataState,
+        ...rest,
+        children
+      }
+    );
+    if (canMountElements) {
+      return /* @__PURE__ */ jsx15(Elements2, { stripe: stripePromise, options: elementsOptions, children: /* @__PURE__ */ jsx15(Inner, { ...innerCommon, children: slotted }) }, clientSecret);
+    }
+    return /* @__PURE__ */ jsx15(OfflineInner, { ...innerCommon, children: slotted });
+  }
+  return /* @__PURE__ */ jsx15(
+    "section",
     {
-      ref: forwardedRef,
+      ref: rootRef,
       className,
       "data-solvapay-topup-form": "",
       "data-state": dataState,
       ...rest,
-      children
+      children: canMountElements ? /* @__PURE__ */ jsx15(Elements2, { stripe: stripePromise, options: elementsOptions, children: /* @__PURE__ */ jsx15(Inner, { ...innerCommon, children }) }, clientSecret) : /* @__PURE__ */ jsx15(OfflineInner, { ...innerCommon, children })
     }
   );
-  if (canMountElements) {
-    return /* @__PURE__ */ jsx14(Elements2, { stripe: stripePromise, options: elementsOptions, children: /* @__PURE__ */ jsx14(Inner, { ...innerCommon, children: shell }) }, clientSecret);
-  }
-  return /* @__PURE__ */ jsx14(OfflineInner, { ...innerCommon, children: shell });
 });
 var Inner = ({
   amount,
@@ -4796,21 +5343,28 @@ var Inner = ({
   state,
   onSuccess,
   onError,
-  onTaxChange,
   processTopupPayment,
-  attachBusinessDetails,
-  customerRef,
+  businessAttach,
   children
 }) => {
   const stripe = useStripe2();
+  const stripeAvailable = !!stripe;
+  const stripeRef = useRef7(stripe);
   const elements = useElements2();
   const copy = useCopy();
-  const [paymentInputComplete, setPaymentInputComplete] = useState12(false);
-  const [isProcessing, setIsProcessing] = useState12(false);
-  const [error, setError] = useState12(null);
+  const customer = useCustomer();
+  const [paymentInputComplete, setPaymentInputComplete] = useState13(false);
+  const [isProcessing, setIsProcessing] = useState13(false);
+  const [error, setError] = useState13(null);
   const returnResumeStarted = useRef7(false);
-  useEffect10(() => {
-    if (!stripe || returnResumeStarted.current || typeof window === "undefined") return;
+  useEffect11(() => {
+    stripeRef.current = stripe;
+  });
+  useEffect11(() => {
+    const stripeApi = stripeRef.current;
+    if (!stripeAvailable || !stripeApi || returnResumeStarted.current || typeof window === "undefined") {
+      return;
+    }
     const returnClientSecret = readPaymentIntentClientSecret(window.location.search);
     if (!returnClientSecret) return;
     returnResumeStarted.current = true;
@@ -4818,7 +5372,7 @@ var Inner = ({
     void (async () => {
       setIsProcessing(true);
       setError(null);
-      const retrieved = await stripe.retrievePaymentIntent(returnClientSecret);
+      const retrieved = await stripeApi.retrievePaymentIntent(returnClientSecret);
       if (cancelled) return;
       stripPaymentIntentParams();
       if (retrieved.error || !retrieved.paymentIntent) {
@@ -4828,7 +5382,7 @@ var Inner = ({
       }
       let paymentIntent = retrieved.paymentIntent;
       if (paymentIntent.status === "requires_action") {
-        const actionResult = await stripe.handleNextAction({ clientSecret: returnClientSecret });
+        const actionResult = await stripeApi.handleNextAction({ clientSecret: returnClientSecret });
         if (cancelled) return;
         if (actionResult.error || !actionResult.paymentIntent) {
           setError(copy.errors.paymentRequires3ds);
@@ -4880,7 +5434,7 @@ var Inner = ({
     return () => {
       cancelled = true;
     };
-  }, [stripe, copy, processTopupPayment, onSuccess, onError]);
+  }, [stripeAvailable, copy, processTopupPayment, onSuccess, onError]);
   const {
     businessDetails,
     setBusinessDetails,
@@ -4891,15 +5445,10 @@ var Inner = ({
     businessDetailsError,
     requiresBusinessAttach,
     runAttach
-  } = useBusinessDetailsAttach({
-    processorPaymentId,
-    attachBusinessDetails,
-    customerRef,
-    onTaxChange
-  });
+  } = businessAttach;
   const isReady = !!(stripe && elements);
-  const canSubmit = isReady && paymentInputComplete && !isProcessing && !!clientSecret && (!requiresBusinessAttach || businessDetailsAttached) && !businessDetailsAttaching;
-  const submit = useCallback13(async () => {
+  const canSubmit = isReady && paymentInputComplete && !isProcessing && !!clientSecret && (!requiresBusinessAttach || businessDetailsAttached) && isCustomerAddressComplete3(businessDetails) && !businessDetailsAttaching;
+  const submit = useCallback14(async () => {
     if (!stripe || !elements || !clientSecret) {
       const msg = copy.errors.stripeUnavailable;
       setError(msg);
@@ -4917,44 +5466,51 @@ var Inner = ({
     }
     setError(null);
     setIsProcessing(true);
-    const { error: submitError } = await elements.submit();
-    if (submitError) {
-      const msg = submitError.message || copy.errors.paymentUnexpected;
-      setError(msg);
-      setIsProcessing(false);
-      onError?.(new Error(msg));
-      return;
-    }
-    const { error: confirmError, paymentIntent } = await stripe.confirmPayment({
+    const result = await confirmPayment({
+      stripe,
       elements,
       clientSecret,
-      confirmParams: { return_url: returnUrl },
-      redirect: "if_required"
+      returnUrl,
+      billingDetails: buildConfirmBillingDetails({
+        name: customer.name,
+        email: customer.email,
+        country: resolveBuyerCountry3(businessDetails),
+        state: businessDetails.customerState,
+        postalCode: businessDetails.customerPostalCode
+      }),
+      copy
     });
-    if (confirmError) {
-      const msg = confirmError.message || copy.errors.paymentUnexpected;
-      setError(msg);
+    if (result.status === "error" || result.status === "requires_action" || result.status === "other") {
+      setError(result.message);
       setIsProcessing(false);
-      onError?.(new Error(msg));
+      if (result.status === "error") {
+        onError?.(new Error(result.message));
+      }
       return;
     }
+    if (result.status === "pending") {
+      setError(result.message);
+      setIsProcessing(false);
+      return;
+    }
+    const paymentIntent = result.paymentIntent;
     let creditsAdded;
     if (paymentIntent && processTopupPayment) {
       try {
-        const result = await processTopupPayment({ paymentIntentId: paymentIntent.id });
-        if (result.status === "processing") {
+        const result2 = await processTopupPayment({ paymentIntentId: paymentIntent.id });
+        if (result2.status === "processing") {
           setError(copy.errors.paymentPending);
           setIsProcessing(false);
           return;
         }
-        if (result.status === "failed" || result.status === "cancelled") {
+        if (result2.status === "failed" || result2.status === "cancelled") {
           setError(copy.errors.paymentUnexpected);
           setIsProcessing(false);
-          onError?.(new Error(`Topup ${result.status}`));
+          onError?.(new Error(`Topup ${result2.status}`));
           return;
         }
-        if (result.status === "succeeded" && typeof result.creditsAdded === "number") {
-          creditsAdded = result.creditsAdded;
+        if (result2.status === "succeeded" && typeof result2.creditsAdded === "number") {
+          creditsAdded = result2.creditsAdded;
         }
       } catch (err) {
         const msg = err instanceof Error ? err.message : String(err);
@@ -4976,6 +5532,7 @@ var Inner = ({
     elements,
     clientSecret,
     returnUrl,
+    customer,
     copy,
     onSuccess,
     onError,
@@ -4987,7 +5544,7 @@ var Inner = ({
     businessDetailsError
   ]);
   const effectiveError = error ?? outerError ?? businessDetailsError;
-  const ctx = useMemo9(
+  const ctx = useMemo10(
     () => ({
       amount,
       currency,
@@ -5036,7 +5593,7 @@ var Inner = ({
       submit
     ]
   );
-  return /* @__PURE__ */ jsx14(TopupFormContext.Provider, { value: ctx, children });
+  return /* @__PURE__ */ jsx15(TopupFormContext.Provider, { value: ctx, children });
 };
 var OfflineInner = ({
   amount,
@@ -5046,15 +5603,14 @@ var OfflineInner = ({
   returnUrl,
   outerError,
   state,
+  businessAttach,
   children
 }) => {
-  const noopSubmit = useCallback13(async () => {
+  const noopSubmit = useCallback14(async () => {
   }, []);
-  const noopSet = useCallback13(() => {
+  const noopSet = useCallback14(() => {
   }, []);
-  const noopBusinessSet = useCallback13(() => {
-  }, []);
-  const ctx = useMemo9(
+  const ctx = useMemo10(
     () => ({
       amount,
       currency,
@@ -5069,13 +5625,13 @@ var OfflineInner = ({
       canSubmit: false,
       error: outerError,
       returnUrl,
-      businessDetails: defaultBusinessDetails,
-      taxBreakdown: null,
-      businessDetailsAttached: false,
-      businessDetailsAttaching: false,
-      businessDetailsError: null,
-      fieldErrors: {},
-      setBusinessDetails: noopBusinessSet,
+      businessDetails: businessAttach.businessDetails,
+      taxBreakdown: businessAttach.taxBreakdown,
+      businessDetailsAttached: businessAttach.businessDetailsAttached,
+      businessDetailsAttaching: businessAttach.businessDetailsAttaching,
+      businessDetailsError: businessAttach.businessDetailsError,
+      fieldErrors: businessAttach.fieldErrors,
+      setBusinessDetails: businessAttach.setBusinessDetails,
       setPaymentInputComplete: noopSet,
       submit: noopSubmit
     }),
@@ -5087,21 +5643,21 @@ var OfflineInner = ({
       processorPaymentId,
       outerError,
       returnUrl,
+      businessAttach,
       noopSet,
-      noopSubmit,
-      noopBusinessSet
+      noopSubmit
     ]
   );
-  return /* @__PURE__ */ jsx14(TopupFormContext.Provider, { value: ctx, children });
+  return /* @__PURE__ */ jsx15(TopupFormContext.Provider, { value: ctx, children });
 };
 var PaymentElementSlot2 = ({ options }) => {
   const { setPaymentInputComplete, isReady, stripe, elements } = useTopupCtx("PaymentElement");
   const locale = useLocale();
   if (!stripe || !elements) return null;
   if (!isReady) {
-    return /* @__PURE__ */ jsx14("output", { "data-solvapay-topup-form-loading": "", children: /* @__PURE__ */ jsx14(Spinner, { size: "sm" }) });
+    return /* @__PURE__ */ jsx15("output", { "data-solvapay-topup-form-loading": "", children: /* @__PURE__ */ jsx15(Spinner, { size: "sm" }) });
   }
-  return /* @__PURE__ */ jsx14("section", { "data-solvapay-topup-form-payment-element": "", children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15("section", { "data-solvapay-topup-form-payment-element": "", children: /* @__PURE__ */ jsx15(
     StripePaymentElement2,
     {
       options: withPaymentElementDefaults(options),
@@ -5116,8 +5672,8 @@ var SubmitButton2 = forwardRef7(
     const copy = useCopy();
     const dataState = ctx.isProcessing ? "processing" : !ctx.canSubmit ? "disabled" : "idle";
     const processingContent = /* @__PURE__ */ jsxs7(Fragment7, { children: [
-      /* @__PURE__ */ jsx14(Spinner, { size: "sm" }),
-      /* @__PURE__ */ jsx14("span", { children: copy.cta.processing })
+      /* @__PURE__ */ jsx15(Spinner, { size: "sm" }),
+      /* @__PURE__ */ jsx15("span", { children: copy.cta.processing })
     ] });
     const commonProps = {
       "data-solvapay-topup-form-submit": "",
@@ -5132,38 +5688,38 @@ var SubmitButton2 = forwardRef7(
       ...rest
     };
     if (asChild) {
-      const slotChild = ctx.isProcessing && React12.isValidElement(children) ? React12.cloneElement(
+      const slotChild = ctx.isProcessing && React13.isValidElement(children) ? React13.cloneElement(
         children,
         void 0,
         processingContent
       ) : children;
-      return /* @__PURE__ */ jsx14(Slot, { ref: forwardedRef, ...commonProps, children: slotChild });
+      return /* @__PURE__ */ jsx15(Slot, { ref: forwardedRef, ...commonProps, children: slotChild });
     }
     const content = ctx.isProcessing ? processingContent : children ? children : copy.cta.topUp;
-    return /* @__PURE__ */ jsx14("button", { ref: forwardedRef, type: "submit", ...commonProps, children: content });
+    return /* @__PURE__ */ jsx15("button", { ref: forwardedRef, type: "submit", ...commonProps, children: content });
   }
 );
 var Loading2 = forwardRef7(function TopupFormLoading({ asChild, children, ...rest }, forwardedRef) {
   const ctx = useTopupCtx("Loading");
   if (ctx.state !== "loading") return null;
   if (asChild) {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       Slot,
       {
         ref: forwardedRef,
         "data-solvapay-topup-form-loading": "",
         ...rest,
-        children: children ?? /* @__PURE__ */ jsx14(Spinner, { size: "sm" })
+        children: children ?? /* @__PURE__ */ jsx15(Spinner, { size: "sm" })
       }
     );
   }
-  return /* @__PURE__ */ jsx14("output", { ref: forwardedRef, "data-solvapay-topup-form-loading": "", ...rest, children: children ?? /* @__PURE__ */ jsx14(Spinner, { size: "sm" }) });
+  return /* @__PURE__ */ jsx15("output", { ref: forwardedRef, "data-solvapay-topup-form-loading": "", ...rest, children: children ?? /* @__PURE__ */ jsx15(Spinner, { size: "sm" }) });
 });
 var ErrorSlot2 = forwardRef7(function TopupFormError({ asChild, children, ...rest }, forwardedRef) {
   const ctx = useTopupCtx("Error");
   if (!ctx.error) return null;
   if (asChild) {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       Slot,
       {
         ref: forwardedRef,
@@ -5176,7 +5732,7 @@ var ErrorSlot2 = forwardRef7(function TopupFormError({ asChild, children, ...res
       }
     );
   }
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "p",
     {
       ref: forwardedRef,
@@ -5233,11 +5789,11 @@ function useTopupForm() {
 }
 
 // src/primitives/BalanceBadge.tsx
-import { forwardRef as forwardRef8, useContext as useContext11 } from "react";
+import { forwardRef as forwardRef8, useContext as useContext12 } from "react";
 import { creditsToDisplayMinorUnits, minorUnitsPerMajor } from "@solvapay/core";
-import { Fragment as Fragment8, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 var BalanceBadge = forwardRef8(function BalanceBadge2({ asChild, numberOnly, lowThreshold = 10, children, ...rest }, forwardedRef) {
-  const solva = useContext11(SolvaPayContext);
+  const solva = useContext12(SolvaPayContext);
   if (!solva) throw new MissingProviderError("BalanceBadge");
   const { credits, displayCurrency, creditsPerMinorUnit, displayExchangeRate, loading } = useBalance();
   const copy = useCopy();
@@ -5254,10 +5810,10 @@ var BalanceBadge = forwardRef8(function BalanceBadge2({ asChild, numberOnly, low
     if (asChild) {
       return (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        /* @__PURE__ */ jsx15(Slot, { ref: forwardedRef, ...commonProps, children: children ?? /* @__PURE__ */ jsx15(Fragment8, {}) })
+        /* @__PURE__ */ jsx16(Slot, { ref: forwardedRef, ...commonProps, children: children ?? /* @__PURE__ */ jsx16(Fragment8, {}) })
       );
     }
-    return /* @__PURE__ */ jsx15("span", { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ jsx16("span", { ref: forwardedRef, ...commonProps });
   }
   if (credits == null) return null;
   const formattedCredits = new Intl.NumberFormat(locale).format(credits);
@@ -5287,22 +5843,22 @@ var BalanceBadge = forwardRef8(function BalanceBadge2({ asChild, numberOnly, low
   if (asChild) {
     return (
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      /* @__PURE__ */ jsx15(Slot, { ref: forwardedRef, ...commonProps, children: content })
+      /* @__PURE__ */ jsx16(Slot, { ref: forwardedRef, ...commonProps, children: content })
     );
   }
-  return /* @__PURE__ */ jsx15("span", { ref: forwardedRef, ...commonProps, children: content });
+  return /* @__PURE__ */ jsx16("span", { ref: forwardedRef, ...commonProps, children: content });
 });
 
 // src/primitives/PlanSelector.tsx
 import {
-  createContext as createContext8,
+  createContext as createContext9,
   forwardRef as forwardRef9,
-  useCallback as useCallback14,
-  useContext as useContext12,
-  useEffect as useEffect11,
-  useMemo as useMemo10,
+  useCallback as useCallback15,
+  useContext as useContext13,
+  useEffect as useEffect12,
+  useMemo as useMemo11,
   useRef as useRef8,
-  useState as useState13
+  useState as useState14
 } from "react";
 
 // src/utils/isPayg.ts
@@ -5343,18 +5899,18 @@ function resolvePlanPricingOption(plan, currency) {
 }
 
 // src/primitives/PlanSelector.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var PlanSelectorContext = createContext8(null);
+import { jsx as jsx17 } from "react/jsx-runtime";
+var PlanSelectorContext = createContext9(null);
 function usePlanSelectorContext(part) {
-  const ctx = useContext12(PlanSelectorContext);
+  const ctx = useContext13(PlanSelectorContext);
   if (!ctx) {
     throw new Error(`PlanSelector.${part} must be rendered inside <PlanSelector.Root>.`);
   }
   return ctx;
 }
-var CardContext = createContext8(null);
+var CardContext = createContext9(null);
 function useCardContext(part) {
-  const ctx = useContext12(CardContext);
+  const ctx = useContext13(CardContext);
   if (!ctx) {
     throw new Error(`PlanSelector.${part} must be rendered inside <PlanSelector.Card>.`);
   }
@@ -5374,12 +5930,12 @@ var Root5 = forwardRef9(function PlanSelectorRoot(props, forwardedRef) {
     children,
     ...rest
   } = props;
-  const solva = useContext12(SolvaPayContext);
+  const solva = useContext13(SolvaPayContext);
   if (!solva) throw new MissingProviderError("PlanSelector");
   if (!productRef) throw new MissingProductRefError("PlanSelector");
   const { _config } = solva;
   const { purchases } = usePurchase();
-  const effectiveFetcher = useMemo10(
+  const effectiveFetcher = useMemo11(
     () => fetcher ?? ((ref) => defaultListPlans(ref, _config)),
     [fetcher, _config]
   );
@@ -5391,24 +5947,24 @@ var Root5 = forwardRef9(function PlanSelectorRoot(props, forwardedRef) {
     autoSelectFirstPaid,
     initialPlanRef
   });
-  const autoCurrentPlanRef = useMemo10(() => {
+  const autoCurrentPlanRef = useMemo11(() => {
     const active = purchases.filter((p) => p.status === "active").sort((a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime())[0];
     return active?.planSnapshot?.reference ?? null;
   }, [purchases]);
   const resolvedCurrentPlanRef = currentPlanRef === null ? null : currentPlanRef ?? autoCurrentPlanRef;
-  const isCurrent = useCallback14(
+  const isCurrent = useCallback15(
     (ref) => resolvedCurrentPlanRef === ref,
     [resolvedCurrentPlanRef]
   );
-  const isFree = useCallback14(
+  const isFree = useCallback15(
     (ref) => plans.find((p) => p.reference === ref)?.requiresPayment === false,
     [plans]
   );
-  const isPopular = useCallback14(
+  const isPopular = useCallback15(
     (ref) => popularPlanRef === ref,
     [popularPlanRef]
   );
-  const select = useCallback14(
+  const select = useCallback15(
     (ref) => {
       const plan = plans.find((p) => p.reference === ref);
       if (!plan) return;
@@ -5418,29 +5974,29 @@ var Root5 = forwardRef9(function PlanSelectorRoot(props, forwardedRef) {
     },
     [plans, selectPlan, onSelect]
   );
-  const clearSelection = useCallback14(() => {
+  const clearSelection = useCallback15(() => {
     setSelectedPlanIndex(-1);
   }, [setSelectedPlanIndex]);
   const selectedPlanRef = selectedPlan?.reference ?? null;
-  const [preferredCurrency, setPreferredCurrencyState] = useState13(null);
-  const [selectedCurrencies, setSelectedCurrencies] = useState13({});
-  const getSelectedOption = useCallback14(
+  const [preferredCurrency, setPreferredCurrencyState] = useState14(null);
+  const [selectedCurrencies, setSelectedCurrencies] = useState14({});
+  const getSelectedOption = useCallback15(
     (plan) => resolvePlanPricingOption(
       plan,
       selectedCurrencies[plan.reference] ?? preferredCurrency ?? null
     ),
     [selectedCurrencies, preferredCurrency]
   );
-  const setPreferredCurrency = useCallback14((currency) => {
+  const setPreferredCurrency = useCallback15((currency) => {
     setPreferredCurrencyState(currency.toUpperCase());
     setSelectedCurrencies({});
   }, []);
-  const setPlanCurrency = useCallback14((planRef, currency) => {
+  const setPlanCurrency = useCallback15((planRef, currency) => {
     setSelectedCurrencies((current) => ({ ...current, [planRef]: currency }));
   }, []);
   const selectedCurrency = selectedPlan ? getSelectedOption(selectedPlan).currency : null;
   const autoCurrentAppliedKeyRef = useRef8(null);
-  useEffect11(() => {
+  useEffect12(() => {
     if (autoCurrentAppliedKeyRef.current === productRef) return;
     if (selectedPlanRef) {
       autoCurrentAppliedKeyRef.current = productRef;
@@ -5455,7 +6011,7 @@ var Root5 = forwardRef9(function PlanSelectorRoot(props, forwardedRef) {
     autoCurrentAppliedKeyRef.current = productRef;
     select(resolvedCurrentPlanRef);
   }, [productRef, plans, resolvedCurrentPlanRef, selectedPlanRef, select]);
-  const ctx = useMemo10(
+  const ctx = useMemo11(
     () => ({
       plans,
       loading,
@@ -5495,7 +6051,7 @@ var Root5 = forwardRef9(function PlanSelectorRoot(props, forwardedRef) {
       getSelectedOption
     ]
   );
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     PlanSelectionProvider,
     {
       value: {
@@ -5514,7 +6070,7 @@ var Root5 = forwardRef9(function PlanSelectorRoot(props, forwardedRef) {
         loading,
         error
       },
-      children: /* @__PURE__ */ jsx16("div", { ref: forwardedRef, "data-solvapay-plan-selector": "", ...rest, children: /* @__PURE__ */ jsx16(PlanSelectorContext.Provider, { value: ctx, children }) })
+      children: /* @__PURE__ */ jsx17("div", { ref: forwardedRef, "data-solvapay-plan-selector": "", ...rest, children: /* @__PURE__ */ jsx17(PlanSelectorContext.Provider, { value: ctx, children }) })
     }
   );
 });
@@ -5522,11 +6078,11 @@ var Heading = forwardRef9(function PlanSelectorHeading({ asChild, children, ...r
   usePlanSelectorContext("Heading");
   const copy = useCopy();
   const Comp = asChild ? Slot : "h3";
-  return /* @__PURE__ */ jsx16(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-heading": "", ...rest, children: children ?? copy.planSelector.heading });
+  return /* @__PURE__ */ jsx17(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-heading": "", ...rest, children: children ?? copy.planSelector.heading });
 });
 var Grid = forwardRef9(function PlanSelectorGrid({ children, ...rest }, forwardedRef) {
   const ctx = usePlanSelectorContext("Grid");
-  return /* @__PURE__ */ jsx16("div", { ref: forwardedRef, "data-solvapay-plan-selector-grid": "", ...rest, children: ctx.plans.map((plan) => {
+  return /* @__PURE__ */ jsx17("div", { ref: forwardedRef, "data-solvapay-plan-selector-grid": "", ...rest, children: ctx.plans.map((plan) => {
     const isCurrent = ctx.isCurrent(plan.reference);
     const isFree = ctx.isFree(plan.reference);
     const isPopular = ctx.isPopular(plan.reference);
@@ -5548,7 +6104,7 @@ var Grid = forwardRef9(function PlanSelectorGrid({ children, ...rest }, forwarde
       select: () => ctx.select(plan.reference),
       setCurrency: (currency) => ctx.setPlanCurrency(plan.reference, currency)
     };
-    return /* @__PURE__ */ jsx16(CardContext.Provider, { value: cardCtx, children }, plan.reference);
+    return /* @__PURE__ */ jsx17(CardContext.Provider, { value: cardCtx, children }, plan.reference);
   }) });
 });
 var Card = forwardRef9(function PlanSelectorCard({ asChild, onClick, children, ...rest }, forwardedRef) {
@@ -5569,10 +6125,10 @@ var Card = forwardRef9(function PlanSelectorCard({ asChild, onClick, children, .
   if (asChild) {
     return (
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      /* @__PURE__ */ jsx16(Slot, { ref: forwardedRef, ...commonProps, children })
+      /* @__PURE__ */ jsx17(Slot, { ref: forwardedRef, ...commonProps, children })
     );
   }
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "button",
     {
       ref: forwardedRef,
@@ -5589,13 +6145,13 @@ var CardName = forwardRef9(function PlanSelectorCardName({ asChild, children, ..
   const label = card.plan.name ?? fallback;
   if (!label && children == null) return null;
   const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx16(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-card-name": "", ...rest, children: children ?? label });
+  return /* @__PURE__ */ jsx17(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-card-name": "", ...rest, children: children ?? label });
 });
 var CardPrice = forwardRef9(function PlanSelectorCardPrice({ asChild, children, ...rest }, forwardedRef) {
   const card = useCardContext("CardPrice");
   const locale = useLocale();
   const copy = useCopy();
-  const formatted = useMemo10(() => {
+  const formatted = useMemo11(() => {
     if (card.isFree) return copy.planSelector.freeBadge;
     if (card.plan.type === "usage-based") {
       return copy.planSelector.usageRateLabel;
@@ -5615,7 +6171,7 @@ var CardPrice = forwardRef9(function PlanSelectorCardPrice({ asChild, children,
     copy.interval.free
   ]);
   const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx16(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-card-price": "", ...rest, children: children ?? formatted });
+  return /* @__PURE__ */ jsx17(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-card-price": "", ...rest, children: children ?? formatted });
 });
 var CardInterval = forwardRef9(function PlanSelectorCardInterval({ asChild, children, ...rest }, forwardedRef) {
   const card = useCardContext("CardInterval");
@@ -5625,7 +6181,7 @@ var CardInterval = forwardRef9(function PlanSelectorCardInterval({ asChild, chil
   if (!rawInterval) return null;
   const text = interpolate(copy.planSelector.perIntervalShort, { interval: rawInterval });
   const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx16(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-card-interval": "", ...rest, children: children ?? text });
+  return /* @__PURE__ */ jsx17(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-card-interval": "", ...rest, children: children ?? text });
 });
 function normalizeBillingCycle(cycle) {
   if (!cycle) return null;
@@ -5638,7 +6194,7 @@ function normalizeBillingCycle(cycle) {
 }
 var CurrencySwitcher = forwardRef9(function PlanSelectorCurrencySwitcher({ children, onChange, className, ...rest }, forwardedRef) {
   const ctx = usePlanSelectorContext("CurrencySwitcher");
-  const availableCurrencies = useMemo10(() => {
+  const availableCurrencies = useMemo11(() => {
     const currencies = /* @__PURE__ */ new Set();
     for (const plan of ctx.plans) {
       const options = getPlanPricingOptions(plan);
@@ -5651,7 +6207,7 @@ var CurrencySwitcher = forwardRef9(function PlanSelectorCurrencySwitcher({ child
   }, [ctx.plans]);
   if (availableCurrencies.length < 2) return null;
   const effectiveCurrency = ctx.preferredCurrency ?? (ctx.selectedPlan ? ctx.getSelectedOption(ctx.selectedPlan).currency.toUpperCase() : null) ?? availableCurrencies[0];
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "select",
     {
       ref: forwardedRef,
@@ -5663,7 +6219,7 @@ var CurrencySwitcher = forwardRef9(function PlanSelectorCurrencySwitcher({ child
         onChange?.(event);
       },
       ...rest,
-      children: children ?? availableCurrencies.map((currency) => /* @__PURE__ */ jsx16("option", { value: currency, children: currency }, currency))
+      children: children ?? availableCurrencies.map((currency) => /* @__PURE__ */ jsx17("option", { value: currency, children: currency }, currency))
     }
   );
 });
@@ -5671,7 +6227,7 @@ var CardCurrency = forwardRef9(
   function PlanSelectorCardCurrency({ children, onChange, ...rest }, forwardedRef) {
     const card = useCardContext("CardCurrency");
     if (card.pricingOptions.length <= 1) return null;
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(
       "select",
       {
         ref: forwardedRef,
@@ -5682,7 +6238,7 @@ var CardCurrency = forwardRef9(
           onChange?.(event);
         },
         ...rest,
-        children: children ?? card.pricingOptions.map((option) => /* @__PURE__ */ jsx16("option", { value: option.currency, children: option.currency }, option.currency))
+        children: children ?? card.pricingOptions.map((option) => /* @__PURE__ */ jsx17("option", { value: option.currency, children: option.currency }, option.currency))
       }
     );
   }
@@ -5701,7 +6257,7 @@ var CardBadge = forwardRef9(function PlanSelectorCardBadge({ asChild, children,
   }
   if (!variant) return null;
   const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     Comp,
     {
       ref: forwardedRef,
@@ -5716,13 +6272,13 @@ var Loading3 = forwardRef9(function PlanSelectorLoading({ asChild, children, ...
   const ctx = usePlanSelectorContext("Loading");
   if (!ctx.loading || ctx.plans.length > 0) return null;
   const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx16(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-loading": "", ...rest, children });
+  return /* @__PURE__ */ jsx17(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-loading": "", ...rest, children });
 });
 var ErrorSlot3 = forwardRef9(function PlanSelectorError({ asChild, children, ...rest }, forwardedRef) {
   const ctx = usePlanSelectorContext("Error");
   if (!ctx.error) return null;
   const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx16(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-error": "", role: "alert", ...rest, children: children ?? ctx.error.message });
+  return /* @__PURE__ */ jsx17(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-error": "", role: "alert", ...rest, children: children ?? ctx.error.message });
 });
 var PlanSelectorRoot2 = Root5;
 var PlanSelectorHeading2 = Heading;
@@ -5755,13 +6311,13 @@ function usePlanSelector() {
 }
 
 // src/hooks/usePurchaseActions.ts
-import { useState as useState14, useCallback as useCallback15 } from "react";
+import { useState as useState15, useCallback as useCallback16 } from "react";
 function usePurchaseActions() {
   const ctx = useSolvaPay();
-  const [isCancelling, setIsCancelling] = useState14(false);
-  const [isReactivating, setIsReactivating] = useState14(false);
-  const [isActivating, setIsActivating] = useState14(false);
-  const cancelRenewal = useCallback15(
+  const [isCancelling, setIsCancelling] = useState15(false);
+  const [isReactivating, setIsReactivating] = useState15(false);
+  const [isActivating, setIsActivating] = useState15(false);
+  const cancelRenewal = useCallback16(
     async (params) => {
       setIsCancelling(true);
       try {
@@ -5772,7 +6328,7 @@ function usePurchaseActions() {
     },
     [ctx.cancelRenewal]
   );
-  const reactivateRenewal = useCallback15(
+  const reactivateRenewal = useCallback16(
     async (params) => {
       setIsReactivating(true);
       try {
@@ -5783,7 +6339,7 @@ function usePurchaseActions() {
     },
     [ctx.reactivateRenewal]
   );
-  const activatePlan = useCallback15(
+  const activatePlan = useCallback16(
     async (params) => {
       setIsActivating(true);
       try {
@@ -5804,88 +6360,15 @@ function usePurchaseActions() {
   };
 }
 
-// src/primitives/CancelPlanButton.tsx
-import { countsUsage } from "@solvapay/core";
-import { forwardRef as forwardRef10, useCallback as useCallback16, useContext as useContext13 } from "react";
-import { Fragment as Fragment9, jsx as jsx17 } from "react/jsx-runtime";
-function resolveConfirmText(confirm, purchase, defaults) {
-  if (confirm === false) return null;
-  if (typeof confirm === "string") return confirm;
-  const isUsageBased = (countsUsage(purchase?.planSnapshot) || purchase?.planSnapshot?.isMetered === true) && purchase?.isRecurring !== true;
-  if (isUsageBased) return defaults.usageBased;
-  return defaults.recurring;
-}
-var CancelPlanButton = forwardRef10(
-  function CancelPlanButton2({
-    asChild,
-    purchaseRef,
-    reason,
-    confirm = true,
-    onCancelled,
-    onError,
-    onClick,
-    children,
-    ...rest
-  }, forwardedRef) {
-    const solva = useContext13(SolvaPayContext);
-    if (!solva) throw new MissingProviderError("CancelPlanButton");
-    const copy = useCopy();
-    const { activePurchase } = usePurchase();
-    const { cancelRenewal, isCancelling } = usePurchaseActions();
-    const effectivePurchase = purchaseRef ? activePurchase && activePurchase.reference === purchaseRef ? activePurchase : { reference: purchaseRef } : activePurchase;
-    const effectiveRef = purchaseRef ?? effectivePurchase?.reference;
-    const cancel = useCallback16(async () => {
-      if (!effectiveRef) return;
-      const confirmText = resolveConfirmText(confirm, effectivePurchase, {
-        recurring: copy.cancelPlan.confirmRecurring,
-        usageBased: copy.cancelPlan.confirmUsageBased
-      });
-      if (confirmText && typeof window !== "undefined" && !window.confirm(confirmText)) {
-        return;
-      }
-      try {
-        await cancelRenewal({ purchaseRef: effectiveRef, reason });
-        onCancelled?.();
-      } catch (err) {
-        onError?.(err instanceof Error ? err : new Error(String(err)));
-      }
-    }, [effectiveRef, effectivePurchase, confirm, copy, cancelRenewal, reason, onCancelled, onError]);
-    if (effectivePurchase?.status === "active" && effectivePurchase.cancelledAt) {
-      return null;
-    }
-    const disabled = isCancelling || !effectiveRef;
-    const state = isCancelling ? "cancelling" : "idle";
-    const commonProps = {
-      "data-solvapay-cancel-plan": "",
-      "data-state": state,
-      "aria-busy": isCancelling,
-      "aria-disabled": disabled || void 0,
-      disabled,
-      onClick: composeEventHandlers(onClick, () => {
-        void cancel();
-      }),
-      ...rest
-    };
-    const label = isCancelling ? copy.cancelPlan.buttonLoading : copy.cancelPlan.button;
-    if (asChild) {
-      return (
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        /* @__PURE__ */ jsx17(Slot, { ref: forwardedRef, ...commonProps, children: children ?? /* @__PURE__ */ jsx17(Fragment9, { children: label }) })
-      );
-    }
-    return /* @__PURE__ */ jsx17("button", { ref: forwardedRef, type: "button", ...commonProps, children: children ?? label });
-  }
-);
-
 // src/hooks/usePurchaseStatus.ts
-import { useMemo as useMemo11, useCallback as useCallback17 } from "react";
+import { useMemo as useMemo12, useCallback as useCallback17 } from "react";
 function usePurchaseStatus() {
   const { purchases } = usePurchase();
   const locale = useLocale();
   const isPaidPurchase2 = useCallback17((p) => {
     return (p.amount ?? 0) > 0;
   }, []);
-  const purchaseData = useMemo11(() => {
+  const purchaseData = useMemo12(() => {
     const cancelledPaidPurchases = purchases.filter((p) => {
       return p.status === "active" && p.cancelledAt && isPaidPurchase2(p) && isPlanPurchase(p);
     });
@@ -5927,14 +6410,14 @@ function usePurchaseStatus() {
 
 // src/primitives/CancelledPlanNotice.tsx
 import {
-  createContext as createContext9,
-  forwardRef as forwardRef11,
+  createContext as createContext10,
+  forwardRef as forwardRef10,
   useCallback as useCallback18,
   useContext as useContext14,
-  useMemo as useMemo12
+  useMemo as useMemo13
 } from "react";
-import { Fragment as Fragment10, jsx as jsx18 } from "react/jsx-runtime";
-var CancelledPlanNoticeContext = createContext9(null);
+import { Fragment as Fragment9, jsx as jsx18 } from "react/jsx-runtime";
+var CancelledPlanNoticeContext = createContext10(null);
 function useNoticeCtx(part) {
   const ctx = useContext14(CancelledPlanNoticeContext);
   if (!ctx) {
@@ -5944,7 +6427,7 @@ function useNoticeCtx(part) {
   }
   return ctx;
 }
-var Root6 = forwardRef11(function CancelledPlanNoticeRoot({ onReactivated, onError, asChild, children, ...rest }, forwardedRef) {
+var Root6 = forwardRef10(function CancelledPlanNoticeRoot({ onReactivated, onError, asChild, children, ...rest }, forwardedRef) {
   const solva = useContext14(SolvaPayContext);
   if (!solva) throw new MissingProviderError("CancelledPlanNotice");
   const {
@@ -5963,11 +6446,11 @@ var Root6 = forwardRef11(function CancelledPlanNoticeRoot({ onReactivated, onErr
       onError?.(err instanceof Error ? err : new Error(String(err)));
     }
   }, [cancelledPurchase, reactivateRenewal, onReactivated, onError]);
-  const daysRemaining = useMemo12(
+  const daysRemaining = useMemo13(
     () => cancelledPurchase ? getDaysUntilExpiration(cancelledPurchase.endDate) : null,
     [cancelledPurchase, getDaysUntilExpiration]
   );
-  const ctx = useMemo12(() => {
+  const ctx = useMemo13(() => {
     if (!cancelledPurchase) return null;
     const state = daysRemaining != null && daysRemaining > 0 ? "active" : "expired";
     return {
@@ -5994,13 +6477,13 @@ var Root6 = forwardRef11(function CancelledPlanNoticeRoot({ onReactivated, onErr
     }
   ) });
 });
-var Heading2 = forwardRef11(function CancelledPlanNoticeHeading({ asChild, children, ...rest }, forwardedRef) {
+var Heading2 = forwardRef10(function CancelledPlanNoticeHeading({ asChild, children, ...rest }, forwardedRef) {
   useNoticeCtx("Heading");
   const copy = useCopy();
   const Comp = asChild ? Slot : "p";
   return /* @__PURE__ */ jsx18(Comp, { ref: forwardedRef, "data-solvapay-cancelled-notice-heading": "", ...rest, children: children ?? copy.cancelledNotice.heading });
 });
-var Expires = forwardRef11(function CancelledPlanNoticeExpires({ asChild, children, ...rest }, forwardedRef) {
+var Expires = forwardRef10(function CancelledPlanNoticeExpires({ asChild, children, ...rest }, forwardedRef) {
   const ctx = useNoticeCtx("Expires");
   const copy = useCopy();
   const date = ctx.formatDate(ctx.purchase.endDate);
@@ -6011,7 +6494,7 @@ var Expires = forwardRef11(function CancelledPlanNoticeExpires({ asChild, childr
   const Comp = asChild ? Slot : "p";
   return /* @__PURE__ */ jsx18(Comp, { ref: forwardedRef, "data-solvapay-cancelled-notice-expires": "", ...rest, children: children ?? interpolate(copy.cancelledNotice.expiresLabel, { date: date ?? "" }) });
 });
-var DaysRemaining = forwardRef11(
+var DaysRemaining = forwardRef10(
   function CancelledPlanNoticeDaysRemaining({ asChild, children, ...rest }, forwardedRef) {
     const ctx = useNoticeCtx("DaysRemaining");
     const copy = useCopy();
@@ -6021,7 +6504,7 @@ var DaysRemaining = forwardRef11(
     return /* @__PURE__ */ jsx18(Comp, { ref: forwardedRef, "data-solvapay-cancelled-notice-days-remaining": "", ...rest, children: children ?? interpolate(template, { days: ctx.daysRemaining }) });
   }
 );
-var AccessUntil = forwardRef11(
+var AccessUntil = forwardRef10(
   function CancelledPlanNoticeAccessUntil({ asChild, children, ...rest }, forwardedRef) {
     const ctx = useNoticeCtx("AccessUntil");
     const copy = useCopy();
@@ -6032,7 +6515,7 @@ var AccessUntil = forwardRef11(
     }) });
   }
 );
-var CancelledOn = forwardRef11(
+var CancelledOn = forwardRef10(
   function CancelledPlanNoticeCancelledOn({ asChild, children, ...rest }, forwardedRef) {
     const ctx = useNoticeCtx("CancelledOn");
     const copy = useCopy();
@@ -6042,13 +6525,13 @@ var CancelledOn = forwardRef11(
     return /* @__PURE__ */ jsx18(Comp, { ref: forwardedRef, "data-solvapay-cancelled-notice-cancelled-on": "", ...rest, children: children ?? interpolate(copy.cancelledNotice.cancelledOn, { date: date ?? "" }) });
   }
 );
-var Reason = forwardRef11(function CancelledPlanNoticeReason({ asChild, children, ...rest }, forwardedRef) {
+var Reason = forwardRef10(function CancelledPlanNoticeReason({ asChild, children, ...rest }, forwardedRef) {
   const ctx = useNoticeCtx("Reason");
   if (!ctx.hasReason) return null;
   const Comp = asChild ? Slot : "span";
   return /* @__PURE__ */ jsx18(Comp, { ref: forwardedRef, "data-solvapay-cancelled-notice-reason": "", ...rest, children: children ?? ctx.purchase.cancellationReason });
 });
-var ReactivateButton = forwardRef11(
+var ReactivateButton = forwardRef10(
   function CancelledPlanNoticeReactivateButton({ asChild, onClick, children, ...rest }, forwardedRef) {
     const ctx = useNoticeCtx("ReactivateButton");
     const copy = useCopy();
@@ -6068,7 +6551,7 @@ var ReactivateButton = forwardRef11(
     if (asChild) {
       return (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        /* @__PURE__ */ jsx18(Slot, { ref: forwardedRef, ...commonProps, children: children ?? /* @__PURE__ */ jsx18(Fragment10, { children: label }) })
+        /* @__PURE__ */ jsx18(Slot, { ref: forwardedRef, ...commonProps, children: children ?? /* @__PURE__ */ jsx18(Fragment9, { children: label }) })
       );
     }
     return /* @__PURE__ */ jsx18("button", { ref: forwardedRef, type: "button", ...commonProps, children: children ?? label });
@@ -6097,14 +6580,14 @@ function useCancelledPlanNotice() {
 }
 
 // src/hooks/useTransport.ts
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo14 } from "react";
 function useTransport() {
   const { _config } = useSolvaPay();
-  return useMemo13(() => _config?.transport ?? createHttpTransport(_config), [_config]);
+  return useMemo14(() => _config?.transport ?? createHttpTransport(_config), [_config]);
 }
 
 // src/hooks/useLimits.ts
-import { useCallback as useCallback19, useEffect as useEffect12, useRef as useRef9, useState as useState15 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect13, useRef as useRef9, useState as useState16 } from "react";
 var CACHE_TTL_MS = 1e4;
 var OPTIMISTIC_GRACE_MS = 8e3;
 var limitsCache = /* @__PURE__ */ new Map();
@@ -6121,13 +6604,13 @@ function useLimits(options) {
   const { customerRef } = useCustomer();
   const { purchase } = useSolvaPay();
   const currentKey = !productRef || !enabled ? null : cacheKey(customerRef, productRef, meterName2);
-  const [data, setData] = useState15(() => {
+  const [data, setData] = useState16(() => {
     if (!currentKey) return null;
     const cached = limitsCache.get(currentKey);
     if (!cached || Date.now() - cached.timestamp >= CACHE_TTL_MS) return null;
     return cached.data;
   });
-  const [loading, setLoading] = useState15(() => {
+  const [loading, setLoading] = useState16(() => {
     if (!currentKey) return false;
     const cached = limitsCache.get(currentKey);
     if (!cached) return true;
@@ -6135,8 +6618,8 @@ function useLimits(options) {
     if (Date.now() - cached.timestamp >= CACHE_TTL_MS) return true;
     return false;
   });
-  const [error, setError] = useState15(null);
-  const [trackedKey, setTrackedKey] = useState15(currentKey);
+  const [error, setError] = useState16(null);
+  const [trackedKey, setTrackedKey] = useState16(currentKey);
   if (trackedKey !== currentKey) {
     setTrackedKey(currentKey);
     setData(null);
@@ -6144,10 +6627,10 @@ function useLimits(options) {
   const unlimited = data === null ? null : isUnlimited(data.remaining);
   const optimisticTimerRef = useRef9(null);
   const unlimitedRef = useRef9(false);
-  useEffect12(() => {
+  useEffect13(() => {
     unlimitedRef.current = unlimited === true;
   }, [unlimited]);
-  useEffect12(() => {
+  useEffect13(() => {
     return () => {
       if (optimisticTimerRef.current) clearTimeout(optimisticTimerRef.current);
     };
@@ -6171,7 +6654,18 @@ function useLimits(options) {
   );
   const fetchLimits = useCallback19(
     async (force) => {
-      if (!productRef || !enabled || !transport.getLimits) {
+      if (!productRef || !enabled) {
+        setLoading(false);
+        return;
+      }
+      if (!transport.getLimits) {
+        const seeded = limitsCache.get(cacheKey(customerRef, productRef, meterName2));
+        if (seeded?.data) {
+          setData(seeded.data);
+          setLoading(false);
+          setError(null);
+          return;
+        }
         setLoading(false);
         return;
       }
@@ -6199,11 +6693,11 @@ function useLimits(options) {
     },
     [transport, customerRef, productRef, meterName2, enabled, attachToFetch]
   );
-  useEffect12(() => {
+  useEffect13(() => {
     fetchLimits(false);
   }, [fetchLimits]);
   const prevPurchasesRef = useRef9(null);
-  useEffect12(() => {
+  useEffect13(() => {
     if (prevPurchasesRef.current !== null && prevPurchasesRef.current !== purchase.purchases) {
       fetchLimits(true).catch(() => {
       });
@@ -6222,7 +6716,10 @@ function useLimits(options) {
         if (!baseline) return prev;
         const next = {
           ...baseline,
-          remaining: Math.max(0, baseline.remaining + delta)
+          remaining: Math.max(0, baseline.remaining + delta),
+          // Keep `used` self-consistent with the remaining nudge so
+          // a meter that reads both does not flash a collapsing cap.
+          ...typeof baseline.used === "number" ? { used: Math.max(0, baseline.used - delta) } : {}
           // Don't optimistically flip `withinLimits` — paywall gating
           // can hinge on factors beyond `remaining > 0`
           // (activationRequired, etc.). Let the trailing refetch
@@ -6255,6 +6752,8 @@ function useLimits(options) {
     needsTopUp: data?.needsTopUp ?? null,
     needsUpgrade: data?.needsUpgrade ?? null,
     upgraded: data?.upgraded ?? null,
+    used: data?.used ?? null,
+    limit: data?.limit ?? null,
     loading,
     error,
     refetch,
@@ -6263,18 +6762,24 @@ function useLimits(options) {
 }
 
 // src/hooks/useUsage.ts
-import { countsUsage as countsUsage2 } from "@solvapay/core";
-import { useCallback as useCallback20, useEffect as useEffect13, useMemo as useMemo14, useState as useState16 } from "react";
+import { countsUsage } from "@solvapay/core";
+import { useCallback as useCallback20, useEffect as useEffect14, useMemo as useMemo15, useState as useState17 } from "react";
+var seededUsage = null;
+var usageSeedGeneration = 0;
+function seedUsageSnapshot(usage) {
+  seededUsage = usage;
+  usageSeedGeneration += 1;
+}
 function deriveUsage(purchase, limits) {
   if (!purchase) return null;
   const usage = purchase.usage;
-  if (!countsUsage2(purchase.planSnapshot) && purchase.planSnapshot?.isMetered !== true && !usage) {
+  if (!countsUsage(purchase.planSnapshot) && purchase.planSnapshot?.isMetered !== true && !usage) {
     return null;
   }
-  const used = typeof usage?.used === "number" ? usage.used : 0;
   const hasFiniteCap = limits.unlimited === false && limits.remaining !== null;
   const remaining = hasFiniteCap ? limits.remaining : null;
-  const total = remaining === null ? null : used + remaining;
+  const total = typeof limits.limit === "number" && limits.limit > 0 ? limits.limit : null;
+  const used = typeof limits.used === "number" ? limits.used : total !== null && remaining !== null ? Math.max(0, total - remaining) : typeof usage?.used === "number" ? usage.used : 0;
   const percentUsed = total !== null && total > 0 ? Math.min(100, Math.round(used / total * 1e4) / 100) : null;
   return {
     meterRef: limits.meterName,
@@ -6290,25 +6795,38 @@ function deriveUsage(purchase, limits) {
 function useUsage() {
   const { activePurchase, refetch: refetchPurchase, loading: purchaseLoading } = usePurchase();
   const transport = useTransport();
-  const [override, setOverride] = useState16(null);
-  const [error, setError] = useState16(null);
-  const [transportLoading, setTransportLoading] = useState16(false);
-  const usageCounted = countsUsage2(activePurchase?.planSnapshot) || activePurchase?.planSnapshot?.isMetered === true;
+  const [override, setOverride] = useState17(() => seededUsage);
+  const [seedGeneration, setSeedGeneration] = useState17(usageSeedGeneration);
+  const [error, setError] = useState17(null);
+  const [transportLoading, setTransportLoading] = useState17(false);
+  if (seedGeneration !== usageSeedGeneration) {
+    setSeedGeneration(usageSeedGeneration);
+    setOverride(seededUsage);
+  }
+  const usageCounted = countsUsage(activePurchase?.planSnapshot) || activePurchase?.planSnapshot?.isMetered === true;
   const {
     remaining: limitRemaining,
     unlimited,
-    meterName: meterName2
+    meterName: meterName2,
+    used: limitUsed,
+    limit
   } = useLimits({
     productRef: activePurchase?.productRef,
     enabled: usageCounted
   });
-  const derived = useMemo14(
-    () => deriveUsage(activePurchase ?? null, { remaining: limitRemaining, unlimited, meterName: meterName2 }),
-    [activePurchase, limitRemaining, unlimited, meterName2]
+  const derived = useMemo15(
+    () => deriveUsage(activePurchase ?? null, {
+      remaining: limitRemaining,
+      unlimited,
+      meterName: meterName2,
+      used: limitUsed,
+      limit
+    }),
+    [activePurchase, limitRemaining, unlimited, meterName2, limitUsed, limit]
   );
   const activePurchaseRef = activePurchase?.reference ?? null;
-  useEffect13(() => {
-    setOverride(null);
+  useEffect14(() => {
+    setOverride(seededUsage);
   }, [activePurchaseRef]);
   const usage = override ?? derived;
   const refetch = useCallback20(async () => {
@@ -6349,9 +6867,9 @@ function useUsage() {
 }
 
 // src/primitives/UsageMeter.tsx
-import { createContext as createContext10, forwardRef as forwardRef12, useContext as useContext15, useMemo as useMemo15 } from "react";
+import { createContext as createContext11, forwardRef as forwardRef11, useContext as useContext15, useMemo as useMemo16 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
-var UsageMeterContext = createContext10(null);
+var UsageMeterContext = createContext11(null);
 function useUsageMeterCtx(part) {
   const ctx = useContext15(UsageMeterContext);
   if (!ctx) {
@@ -6359,7 +6877,7 @@ function useUsageMeterCtx(part) {
   }
   return ctx;
 }
-var Root7 = forwardRef12(function UsageMeterRoot({
+var Root7 = forwardRef11(function UsageMeterRoot({
   warningAt = 75,
   criticalAt = 90,
   classNames,
@@ -6374,7 +6892,7 @@ var Root7 = forwardRef12(function UsageMeterRoot({
   const loading = hookResult.loading && !usage;
   const percentUsed = usage?.percentUsed ?? null;
   const state = loading ? "loading" : percentUsed === null ? "safe" : percentUsed >= criticalAt ? "critical" : percentUsed >= warningAt ? "warning" : "safe";
-  const ctx = useMemo15(
+  const ctx = useMemo16(
     () => ({
       usage,
       loading,
@@ -6414,7 +6932,7 @@ var Root7 = forwardRef12(function UsageMeterRoot({
     }
   ) });
 });
-var Bar = forwardRef12(function UsageMeterBar({ className, style, ...rest }, forwardedRef) {
+var Bar = forwardRef11(function UsageMeterBar({ className, style, ...rest }, forwardedRef) {
   const ctx = useUsageMeterCtx("Bar");
   const width = ctx.percentUsed === null ? 0 : Math.max(0, Math.min(100, ctx.percentUsed));
   return /* @__PURE__ */ jsx19(
@@ -6438,7 +6956,7 @@ var Bar = forwardRef12(function UsageMeterBar({ className, style, ...rest }, for
     }
   );
 });
-var Label = forwardRef12(function UsageMeterLabel({ className, children, ...rest }, forwardedRef) {
+var Label = forwardRef11(function UsageMeterLabel({ className, children, ...rest }, forwardedRef) {
   const ctx = useUsageMeterCtx("Label");
   const copy = useCopy();
   if (!ctx.usage) return null;
@@ -6474,7 +6992,7 @@ var Label = forwardRef12(function UsageMeterLabel({ className, children, ...rest
     }
   );
 });
-var Percentage = forwardRef12(function UsageMeterPercentage({ className, children, ...rest }, forwardedRef) {
+var Percentage = forwardRef11(function UsageMeterPercentage({ className, children, ...rest }, forwardedRef) {
   const ctx = useUsageMeterCtx("Percentage");
   const copy = useCopy();
   if (ctx.percentUsed === null) return null;
@@ -6495,7 +7013,7 @@ function formatResetsIn(copy, periodEnd, nowMs = typeof performance !== "undefin
   const daysLeft = Math.max(0, Math.ceil((end - nowMs) / (24 * 60 * 60 * 1e3)));
   return daysLeft > 0 ? interpolate(copy.usage.resetsInLabel, { days: String(daysLeft) }) : interpolate(copy.usage.resetsOnLabel, { date: new Date(periodEnd).toLocaleDateString() });
 }
-var ResetsIn = forwardRef12(function UsageMeterResetsIn({ className, children, ...rest }, forwardedRef) {
+var ResetsIn = forwardRef11(function UsageMeterResetsIn({ className, children, ...rest }, forwardedRef) {
   const ctx = useUsageMeterCtx("ResetsIn");
   const copy = useCopy();
   const periodEnd = ctx.usage?.periodEnd;
@@ -6513,7 +7031,7 @@ var ResetsIn = forwardRef12(function UsageMeterResetsIn({ className, children, .
     }
   );
 });
-var Loading4 = forwardRef12(function UsageMeterLoading({ className, children, ...rest }, forwardedRef) {
+var Loading4 = forwardRef11(function UsageMeterLoading({ className, children, ...rest }, forwardedRef) {
   const ctx = useUsageMeterCtx("Loading");
   const copy = useCopy();
   if (ctx.state !== "loading") return null;
@@ -6529,7 +7047,7 @@ var Loading4 = forwardRef12(function UsageMeterLoading({ className, children, ..
     }
   );
 });
-var Empty = forwardRef12(function UsageMeterEmpty({ className, children, ...rest }, forwardedRef) {
+var Empty = forwardRef11(function UsageMeterEmpty({ className, children, ...rest }, forwardedRef) {
   const ctx = useUsageMeterCtx("Empty");
   const copy = useCopy();
   if (ctx.loading || ctx.usage !== null) return null;
@@ -6557,8 +7075,488 @@ function useUsageMeter() {
   return useUsageMeterCtx("useUsageMeter");
 }
 
+// src/hooks/useAutoRecharge.ts
+import { useCallback as useCallback21, useEffect as useEffect15, useRef as useRef10, useState as useState18 } from "react";
+function mergeAutoRechargeConfig(config, display) {
+  return display ? { ...config, display } : config;
+}
+async function fetchAutoRecharge(config) {
+  const transport = config?.transport ?? createHttpTransport(config);
+  if (!transport.getAutoRecharge) return null;
+  const response = await transport.getAutoRecharge();
+  if (!response.config) return null;
+  return mergeAutoRechargeConfig(response.config, response.display);
+}
+function useAutoRecharge() {
+  const { _config } = useSolvaPay();
+  const key = autoRechargeCacheKeyFor(_config);
+  const [config, setConfig] = useState18(
+    () => autoRechargeCache.get(key)?.config ?? null
+  );
+  const [loading, setLoading] = useState18(() => {
+    const cached = autoRechargeCache.get(key);
+    return !cached || !cached.config && !cached.promise;
+  });
+  const [saving, setSaving] = useState18(false);
+  const [disabling, setDisabling] = useState18(false);
+  const [error, setError] = useState18(null);
+  const requestSeq = useRef10(0);
+  const load = useCallback21(
+    async (force = false) => {
+      const seq = requestSeq.current;
+      const cached = autoRechargeCache.get(key);
+      const now = Date.now();
+      if (!force && cached?.config && now - cached.timestamp < CACHE_DURATION2) {
+        if (seq !== requestSeq.current) return;
+        setConfig(cached.config);
+        setLoading(false);
+        setError(null);
+        return;
+      }
+      if (!force && cached?.promise) {
+        setLoading(true);
+        try {
+          const value = await cached.promise;
+          if (seq !== requestSeq.current) return;
+          setConfig(value);
+          setError(null);
+        } catch (caught) {
+          if (seq !== requestSeq.current) return;
+          setError(caught instanceof Error ? caught : new Error(String(caught)));
+        } finally {
+          if (seq === requestSeq.current) {
+            setLoading(false);
+          }
+        }
+        return;
+      }
+      setLoading(true);
+      setError(null);
+      const promise = fetchAutoRecharge(_config);
+      writeAutoRechargeCache(key, {
+        config: cached?.config ?? null,
+        promise,
+        timestamp: now
+      });
+      try {
+        const value = await promise;
+        if (seq !== requestSeq.current) return;
+        writeAutoRechargeCache(key, { config: value, promise: null, timestamp: Date.now() });
+        setConfig(value);
+      } catch (caught) {
+        if (seq !== requestSeq.current) return;
+        const err = caught instanceof Error ? caught : new Error(String(caught));
+        writeAutoRechargeCache(key, {
+          config: cached?.config ?? null,
+          promise: null,
+          timestamp: Date.now()
+        });
+        setError(err);
+      } finally {
+        if (seq === requestSeq.current) {
+          setLoading(false);
+        }
+      }
+    },
+    [_config, key]
+  );
+  useEffect15(() => {
+    void load();
+  }, [load]);
+  useEffect15(() => {
+    return subscribeAutoRecharge(key, () => {
+      const cached = autoRechargeCache.get(key);
+      if (cached) {
+        setConfig(cached.config);
+        return;
+      }
+      void load(true);
+    });
+  }, [key, load]);
+  const refresh = useCallback21(
+    async (force = true) => {
+      await load(force);
+    },
+    [load]
+  );
+  const save = useCallback21(
+    async (input) => {
+      const transport = _config?.transport ?? createHttpTransport(_config);
+      if (!transport.saveAutoRecharge) {
+        throw new Error("saveAutoRecharge is not available on this transport");
+      }
+      setSaving(true);
+      setError(null);
+      const seq = ++requestSeq.current;
+      try {
+        const result = await transport.saveAutoRecharge(input);
+        if (seq !== requestSeq.current) return result;
+        const nextConfig = mergeAutoRechargeConfig(result.config, result.display);
+        writeAutoRechargeCache(key, {
+          config: nextConfig,
+          promise: null,
+          timestamp: Date.now()
+        });
+        setConfig(nextConfig);
+        return result;
+      } catch (caught) {
+        const err = caught instanceof Error ? caught : new Error(String(caught));
+        setError(err);
+        throw err;
+      } finally {
+        setSaving(false);
+      }
+    },
+    [_config, key]
+  );
+  const disable = useCallback21(async () => {
+    const transport = _config?.transport ?? createHttpTransport(_config);
+    if (!transport.disableAutoRecharge) {
+      throw new Error("disableAutoRecharge is not available on this transport");
+    }
+    setDisabling(true);
+    setError(null);
+    const seq = ++requestSeq.current;
+    try {
+      const result = await transport.disableAutoRecharge();
+      if (seq === requestSeq.current) {
+        setConfig((current) => {
+          const disabledConfig = current ? { ...current, enabled: false } : null;
+          writeAutoRechargeCache(key, {
+            config: disabledConfig,
+            promise: null,
+            timestamp: Date.now()
+          });
+          return disabledConfig;
+        });
+        await refresh(true);
+        setConfig((current) => {
+          const disabledConfig = current ? { ...current, enabled: false } : null;
+          writeAutoRechargeCache(key, {
+            config: disabledConfig,
+            promise: null,
+            timestamp: Date.now()
+          });
+          return disabledConfig;
+        });
+      }
+      return result;
+    } catch (caught) {
+      const err = caught instanceof Error ? caught : new Error(String(caught));
+      setError(err);
+      throw err;
+    } finally {
+      setDisabling(false);
+    }
+  }, [_config, key, refresh]);
+  return { config, loading, saving, disabling, error, refresh, save, disable };
+}
+
+// src/utils/credit-estimation.ts
+import { creditsToDisplayMinorUnits as creditsToDisplayMinorUnits2 } from "@solvapay/core";
+function estimateCredits(resolvedAmountMajor, currency, creditsPerMinorUnit, displayExchangeRate) {
+  if (resolvedAmountMajor == null || resolvedAmountMajor <= 0) return null;
+  if (creditsPerMinorUnit == null || creditsPerMinorUnit <= 0) return null;
+  const rate = displayExchangeRate ?? 1;
+  const resolvedAmountMinor = Math.round(resolvedAmountMajor * getMinorUnitsPerMajor(currency));
+  return Math.round(resolvedAmountMinor / rate * creditsPerMinorUnit);
+}
+function estimateCurrencyMajorFromCredits(credits, currency, creditsPerMinorUnit, displayExchangeRate) {
+  if (credits == null || credits <= 0) return null;
+  if (creditsPerMinorUnit == null || creditsPerMinorUnit <= 0) return null;
+  const rate = displayExchangeRate ?? 1;
+  const displayMinor = creditsToDisplayMinorUnits2({
+    credits,
+    creditsPerMinorUnit,
+    displayExchangeRate: rate,
+    displayCurrency: currency
+  });
+  if (displayMinor === null) return null;
+  return displayMinor / getMinorUnitsPerMajor(currency);
+}
+
+// src/helpers/stripe-minimums.ts
+var STRIPE_MINIMUM_MINOR = {
+  USD: 50,
+  EUR: 50,
+  GBP: 30,
+  SEK: 300,
+  NOK: 300,
+  DKK: 250,
+  CHF: 50,
+  CAD: 50,
+  AUD: 50,
+  JPY: 50,
+  KRW: 500
+};
+var DEFAULT_MINIMUM_MINOR = 50;
+function getStripeMinimumMinor(currency) {
+  return STRIPE_MINIMUM_MINOR[currency.toUpperCase()] ?? DEFAULT_MINIMUM_MINOR;
+}
+
+// src/helpers/auto-recharge-form.ts
+var DEFAULT_VALIDATION_MESSAGES = {
+  invalidThreshold: "Enter a valid balance threshold.",
+  thresholdTooLow: "Balance threshold must be greater than zero.",
+  minTopupAmount: "Top-up amount must be at least {amount}.",
+  invalidMaxMonthlySpend: "Maximum monthly spend must be a positive amount.",
+  maxMonthlySpendBelowTopup: "Maximum monthly spend must be at least your top-up amount ({amount})."
+};
+function amountAnchors(thresholdValue, topupValue, unit = "currency") {
+  return {
+    thresholdBaseValue: thresholdValue,
+    thresholdBaseUnit: unit,
+    topupBaseValue: topupValue,
+    topupBaseUnit: unit
+  };
+}
+function createDefaultAutoRechargeForm(currency, defaultTopupMajor, defaultThresholdMajor) {
+  const topup = defaultTopupMajor != null && defaultTopupMajor > 0 ? String(defaultTopupMajor) : "10";
+  const threshold = defaultThresholdMajor != null && defaultThresholdMajor >= 0 ? String(defaultThresholdMajor) : "5";
+  return {
+    enabled: false,
+    thresholdAmountMajor: threshold,
+    thresholdUnit: "currency",
+    topupAmountMajor: topup,
+    topupUnit: "currency",
+    maxMonthlySpendMajor: "",
+    ...amountAnchors(threshold, topup, "currency")
+  };
+}
+function currentSpendPeriod(now = /* @__PURE__ */ new Date()) {
+  const year = now.getUTCFullYear();
+  const month = now.getUTCMonth() + 1;
+  return `${year}-${String(month).padStart(2, "0")}`;
+}
+function effectiveMonthlySpend(config, now = /* @__PURE__ */ new Date()) {
+  if (config.monthlySpendPeriod !== currentSpendPeriod(now)) {
+    return 0;
+  }
+  return config.monthlySpendMinor ?? 0;
+}
+function isMonthlySpendCapReached(config, now = /* @__PURE__ */ new Date()) {
+  if (config.maxMonthlySpendMinor == null) return false;
+  const effectiveSpend = effectiveMonthlySpend(config, now);
+  return effectiveSpend + config.topup.amountMinor > config.maxMonthlySpendMinor;
+}
+function maxMonthlySpendMajorFromConfig(config, currency) {
+  if (config.maxMonthlySpendMinor == null) return "";
+  const minorPerMajor = getMinorUnitsPerMajor(currency);
+  return String(config.maxMonthlySpendMinor / minorPerMajor);
+}
+function parsePositiveNumber(value) {
+  const trimmed = value.trim();
+  if (trimmed.length === 0) return null;
+  const parsed = Number(trimmed);
+  if (!Number.isFinite(parsed) || parsed <= 0) return null;
+  return parsed;
+}
+function parseNonNegativeNumber(value) {
+  const trimmed = value.trim();
+  if (trimmed.length === 0) return null;
+  const parsed = Number(trimmed);
+  if (!Number.isFinite(parsed) || parsed < 0) return null;
+  return parsed;
+}
+function validateAutoRechargeForm(form, currency, conversion, messages = DEFAULT_VALIDATION_MESSAGES) {
+  if (!form.enabled) {
+    return {
+      ok: true,
+      payload: {
+        enabled: false,
+        triggerType: "balance",
+        currency: currency.toUpperCase()
+      }
+    };
+  }
+  const payload = {
+    enabled: true,
+    triggerType: "balance",
+    currency: currency.toUpperCase()
+  };
+  const minorPerMajor = getMinorUnitsPerMajor(currency);
+  const minMinor = getStripeMinimumMinor(currency);
+  const thresholdRaw = parseNonNegativeNumber(form.thresholdAmountMajor);
+  if (thresholdRaw == null) {
+    return { ok: false, error: messages.invalidThreshold };
+  }
+  if (form.thresholdUnit === "credits") {
+    const major = estimateCurrencyMajorFromCredits(
+      thresholdRaw,
+      currency,
+      conversion?.creditsPerMinorUnit,
+      conversion?.displayExchangeRate
+    );
+    if (major == null) {
+      return { ok: false, error: messages.invalidThreshold };
+    }
+    payload.thresholdAmountMajor = major;
+  } else {
+    payload.thresholdAmountMajor = thresholdRaw;
+  }
+  if (payload.thresholdAmountMajor == null || payload.thresholdAmountMajor <= 0) {
+    return { ok: false, error: messages.thresholdTooLow };
+  }
+  const amountRaw = parsePositiveNumber(form.topupAmountMajor);
+  if (amountRaw == null) {
+    return {
+      ok: false,
+      error: interpolate(messages.minTopupAmount, {
+        amount: formatPrice(minMinor, currency, { free: "" })
+      })
+    };
+  }
+  const amountMajor = form.topupUnit === "credits" ? estimateCurrencyMajorFromCredits(
+    amountRaw,
+    currency,
+    conversion?.creditsPerMinorUnit,
+    conversion?.displayExchangeRate
+  ) : amountRaw;
+  if (amountMajor == null || Math.round(amountMajor * minorPerMajor) < minMinor) {
+    return {
+      ok: false,
+      error: interpolate(messages.minTopupAmount, {
+        amount: formatPrice(minMinor, currency, { free: "" })
+      })
+    };
+  }
+  payload.topupAmountMajor = amountMajor;
+  if (form.maxMonthlySpendMajor.trim().length > 0) {
+    const max = parsePositiveNumber(form.maxMonthlySpendMajor);
+    if (max == null) {
+      return { ok: false, error: messages.invalidMaxMonthlySpend };
+    }
+    if (max < amountMajor) {
+      return {
+        ok: false,
+        error: interpolate(messages.maxMonthlySpendBelowTopup, {
+          amount: formatPrice(Math.round(amountMajor * minorPerMajor), currency, { free: "" })
+        })
+      };
+    }
+    payload.maxMonthlySpendMajor = max;
+  }
+  return { ok: true, payload };
+}
+function triggerAmountMajorFromConfig(config) {
+  const topupCurrency = config.topup.currency.toUpperCase();
+  const minorPerMajor = getMinorUnitsPerMajor(topupCurrency);
+  const { thresholdAmountMinor } = config.trigger;
+  if (!Number.isFinite(thresholdAmountMinor) || thresholdAmountMinor < 0) {
+    return null;
+  }
+  return thresholdAmountMinor / minorPerMajor;
+}
+function configToAutoRechargeInput(config, options) {
+  if (!config.enabled) return null;
+  const display = options?.display ?? config.display;
+  const currency = (display?.currency ?? config.topup.currency ?? options?.currency ?? "USD").toUpperCase();
+  if (display?.thresholdAmountMajor != null && display.topupAmountMajor != null) {
+    return {
+      enabled: true,
+      triggerType: "balance",
+      thresholdAmountMajor: display.thresholdAmountMajor,
+      topupAmountMajor: display.topupAmountMajor,
+      currency,
+      ...config.maxMonthlySpendMinor != null ? {
+        maxMonthlySpendMajor: config.maxMonthlySpendMinor / getMinorUnitsPerMajor(currency)
+      } : {}
+    };
+  }
+  const thresholdMajor = triggerAmountMajorFromConfig(config);
+  const topupAmountMajor = config.topup.amountMinor / getMinorUnitsPerMajor(currency);
+  if (thresholdMajor == null || !Number.isFinite(topupAmountMajor) || topupAmountMajor <= 0) {
+    return null;
+  }
+  return {
+    enabled: true,
+    triggerType: "balance",
+    thresholdAmountMajor: Math.max(0, thresholdMajor),
+    topupAmountMajor,
+    currency,
+    ...config.maxMonthlySpendMinor != null ? {
+      maxMonthlySpendMajor: config.maxMonthlySpendMinor / getMinorUnitsPerMajor(currency)
+    } : {}
+  };
+}
+function configToForm(config, currency) {
+  const base = createDefaultAutoRechargeForm(currency);
+  const display = config.display;
+  if (display?.thresholdAmountMajor != null && display.topupAmountMajor != null) {
+    const thresholdStr2 = String(Math.max(0, display.thresholdAmountMajor));
+    const topupStr2 = String(display.topupAmountMajor);
+    return {
+      ...base,
+      enabled: config.enabled,
+      thresholdAmountMajor: thresholdStr2,
+      topupAmountMajor: topupStr2,
+      maxMonthlySpendMajor: maxMonthlySpendMajorFromConfig(config, currency),
+      ...amountAnchors(thresholdStr2, topupStr2, "currency")
+    };
+  }
+  const thresholdMajor = triggerAmountMajorFromConfig(config);
+  const thresholdStr = thresholdMajor != null ? String(Math.max(0, thresholdMajor)) : "0";
+  const topupStr = String(config.topup.amountMinor / getMinorUnitsPerMajor(currency));
+  return {
+    ...base,
+    enabled: config.enabled,
+    thresholdAmountMajor: thresholdStr,
+    topupAmountMajor: topupStr,
+    maxMonthlySpendMajor: maxMonthlySpendMajorFromConfig(config, currency),
+    ...amountAnchors(thresholdStr, topupStr, "currency")
+  };
+}
+function formatAmountWithUnit(value, unit, currency) {
+  const num = Number(value);
+  if (!value || !Number.isFinite(num)) return "\u2014";
+  if (unit === "credits") {
+    return `${new Intl.NumberFormat().format(num)} credits`;
+  }
+  return formatPrice(Math.round(num * getMinorUnitsPerMajor(currency)), currency, { free: "" });
+}
+function buildSummaryLine(form, currency) {
+  if (!form.enabled) return null;
+  const thresholdDisplay = formatAmountWithUnit(
+    form.thresholdAmountMajor,
+    form.thresholdUnit,
+    currency
+  );
+  const fixedDisplay = formatAmountWithUnit(form.topupAmountMajor, form.topupUnit, currency);
+  return `When my balance falls below ${thresholdDisplay}, add ${fixedDisplay}.`;
+}
+function convertAmountForUnitFlip(value, fromUnit, toUnit, currency, creditsPerMinorUnit, displayExchangeRate) {
+  if (fromUnit === toUnit) return value;
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed) || parsed <= 0) return value;
+  if (fromUnit === "currency" && toUnit === "credits") {
+    const credits = estimateCredits(parsed, currency, creditsPerMinorUnit, displayExchangeRate);
+    return credits != null ? String(credits) : value;
+  }
+  const major = estimateCurrencyMajorFromCredits(
+    parsed,
+    currency,
+    creditsPerMinorUnit,
+    displayExchangeRate
+  );
+  return major != null ? String(major) : value;
+}
+function flipUnitValue(anchor, targetUnit, currency, creditsPerMinorUnit, displayExchangeRate) {
+  if (targetUnit === anchor.unit) {
+    return { value: anchor.value, unit: anchor.unit };
+  }
+  const converted = convertAmountForUnitFlip(
+    anchor.value,
+    anchor.unit,
+    targetUnit,
+    currency,
+    creditsPerMinorUnit,
+    displayExchangeRate
+  );
+  return { value: converted, unit: targetUnit };
+}
+
 // src/hooks/useCheckoutFlow.ts
-import { useCallback as useCallback21, useMemo as useMemo16, useRef as useRef10, useState as useState17 } from "react";
+import { useCallback as useCallback22, useMemo as useMemo17, useRef as useRef11, useState as useState19 } from "react";
 
 // src/primitives/checkout/shared.ts
 import {
@@ -6566,6 +7564,7 @@ import {
   creditsPerUnitFromBalance,
   includedUnits,
   meterName,
+  planPricingShape,
   usageRate
 } from "@solvapay/core";
 function isPayg(plan) {
@@ -6597,28 +7596,60 @@ function buildDefaultCheckoutPlanFilter(allPlans) {
 }
 function formatContinueLabel(plan, locale, pricingOption) {
   if (!plan) return "Continue";
-  if (isPayg(plan)) {
-    return `Continue with ${plan.name ?? "Pay as you go"}`;
-  }
-  const option = pricingOption ?? resolveBootstrapPlanPricing(plan);
-  const currency = option.currency.toUpperCase();
-  const priceLabel = formatPrice(option.price ?? 0, currency, { locale });
-  const interval = planBillingInterval(plan);
-  const cycle = interval ? `/${shortCycle(interval)}` : "";
-  return `Continue with ${plan.name ?? "Plan"} \u2014 ${priceLabel}${cycle}`;
+  const priceLabel = formatPlanPriceLabel(plan, locale ?? "en-US", pricingOption);
+  return `Continue with ${plan.name ?? "Plan"} \u2014 ${priceLabel}`;
+}
+function planBillingCycle(plan) {
+  return readBillingCycle(plan);
 }
 function planBillingInterval(plan) {
   return readBillingCycle(plan)?.interval ?? null;
 }
+function formatCycleSuffix(cycle) {
+  if (!cycle) return "";
+  const short = shortCycle(cycle.interval);
+  if (cycle.count && cycle.count > 1) return `/${cycle.count} ${short}`;
+  return `/${short}`;
+}
+function formatPlanPriceLabel(plan, locale, pricingOption) {
+  const shape = planPricingShape(plan);
+  switch (shape.shape) {
+    case "free":
+      return "Free";
+    case "usage":
+      return "Pay per use";
+    case "recurring":
+    case "hybrid": {
+      const option = pricingOption ?? resolveBootstrapPlanPricing(plan);
+      const amount = option.price ?? shape.headlineMinor;
+      const currency = option.currency.toUpperCase();
+      const priceLabel = formatPrice(amount, currency, { locale, free: "" });
+      return `${priceLabel}${formatCycleSuffix(shape.cycle)}`;
+    }
+    case "oneTime": {
+      const option = pricingOption ?? resolveBootstrapPlanPricing(plan);
+      const amount = option.price ?? shape.headlineMinor;
+      const currency = option.currency.toUpperCase();
+      const priceLabel = formatPrice(amount, currency, { locale, free: "" });
+      return `${priceLabel} once`;
+    }
+  }
+}
+function singularMeterNoun(unit) {
+  if (unit.endsWith("ies")) return `${unit.slice(0, -3)}y`;
+  if (unit.endsWith("s") && !unit.endsWith("ss")) return unit.slice(0, -1);
+  return unit;
+}
 function formatPaygRate(plan, locale, balance) {
   const rate = usageRate(plan);
   if (!rate || !(rate.amountMinor > 0)) return null;
   const prefix = rate.tiered ? "from " : "";
   const credits = creditsPerUnitFromBalance(plan, balance);
+  const unit = singularMeterNoun(rate.meter ?? meterName(plan) ?? "unit");
   if (credits != null) {
-    return `${prefix}${credits.toLocaleString(locale)} ${credits === 1 ? "credit" : "credits"} / call`;
+    return `${prefix}${credits.toLocaleString(locale)} ${credits === 1 ? "credit" : "credits"} / ${unit}`;
   }
-  return `${prefix}${formatPrice(rate.amountMinor, rate.currency.toUpperCase(), { locale })} / call`;
+  return `${prefix}${formatPrice(rate.amountMinor, rate.currency.toUpperCase(), { locale })} / ${unit}`;
 }
 function inferIncludedUnits(plan) {
   const cap = includedUnits(plan);
@@ -6628,12 +7659,13 @@ function planMeterName(plan) {
   return meterName(plan);
 }
 function shortCycle(cycle) {
-  if (!cycle) return "mo";
+  if (!cycle) return "";
   const lc = cycle.toLowerCase();
-  if (lc.startsWith("year") || lc === "annually" || lc === "annual") return "yr";
-  if (lc.startsWith("week")) return "wk";
-  if (lc.startsWith("day")) return "d";
-  return "mo";
+  if (lc === "week" || lc.startsWith("week")) return "wk";
+  if (lc === "year" || lc.startsWith("year") || lc === "annually" || lc === "annual") return "yr";
+  if (lc === "month" || lc.startsWith("month")) return "mo";
+  if (lc === "day" || lc.startsWith("day")) return "d";
+  return cycle;
 }
 
 // src/hooks/useCheckoutFlow.ts
@@ -6643,10 +7675,10 @@ function resolveInitialCheckoutStep(initialStep) {
 }
 function useCheckoutFlow(opts) {
   const { productRef, initialStep = "plan", initialAmountMinor = null } = opts;
-  const onPlanSelectRef = useRef10(opts.onPlanSelect);
-  const onAmountSelectRef = useRef10(opts.onAmountSelect);
-  const onPurchaseSuccessRef = useRef10(opts.onPurchaseSuccess);
-  const onErrorRef = useRef10(opts.onError);
+  const onPlanSelectRef = useRef11(opts.onPlanSelect);
+  const onAmountSelectRef = useRef11(opts.onAmountSelect);
+  const onPurchaseSuccessRef = useRef11(opts.onPurchaseSuccess);
+  const onErrorRef = useRef11(opts.onError);
   onPlanSelectRef.current = opts.onPlanSelect;
   onAmountSelectRef.current = opts.onAmountSelect;
   onPurchaseSuccessRef.current = opts.onPurchaseSuccess;
@@ -6659,8 +7691,8 @@ function useCheckoutFlow(opts) {
   const { creditsPerMinorUnit, displayExchangeRate, adjustBalance } = balance;
   const { refetchPurchase } = useSolvaPay();
   const { merchant } = useMerchant();
-  const [topupCurrencyOverride, setTopupCurrencyOverride] = useState17(null);
-  const topupCurrencies = useMemo16(() => {
+  const [topupCurrencyOverride, setTopupCurrencyOverride] = useState19(null);
+  const topupCurrencies = useMemo17(() => {
     const fromMerchant = (merchant?.supportedTopupCurrencies ?? []).map((code) => code.toUpperCase()).filter(Boolean);
     const fallback = opts.topupCurrency?.toUpperCase() ?? merchant?.defaultCurrency?.toUpperCase() ?? null;
     const list = fromMerchant.length > 0 ? fromMerchant : fallback ? [fallback] : [];
@@ -6670,22 +7702,22 @@ function useCheckoutFlow(opts) {
   const planPickerCurrency = planCtx.preferredCurrency?.toUpperCase() ?? null;
   const topupCurrency = (topupCurrencyOverride && topupCurrencies.includes(topupCurrencyOverride) ? topupCurrencyOverride : null) ?? (planPickerCurrency && topupCurrencies.includes(planPickerCurrency) ? planPickerCurrency : null) ?? resolvedDefaultTopupCurrency;
   const topupCurrencyReady = topupCurrency != null;
-  const setTopupCurrency = useCallback21((code) => {
+  const setTopupCurrency = useCallback22((code) => {
     const normalized = code.toUpperCase();
     setTopupCurrencyOverride(normalized);
   }, []);
-  const [step, setStep] = useState17(() => resolveInitialCheckoutStep(initialStep));
-  const [status, setStatus] = useState17("idle");
-  const [selectedAmountMinor, setSelectedAmountMinor] = useState17(initialAmountMinor);
-  const [successMeta, setSuccessMeta] = useState17(null);
-  const [error, setError] = useState17(null);
-  const selectedAmountMinorRef = useRef10(initialAmountMinor);
+  const [step, setStep] = useState19(() => resolveInitialCheckoutStep(initialStep));
+  const [status, setStatus] = useState19("idle");
+  const [selectedAmountMinor, setSelectedAmountMinor] = useState19(initialAmountMinor);
+  const [successMeta, setSuccessMeta] = useState19(null);
+  const [error, setError] = useState19(null);
+  const selectedAmountMinorRef = useRef11(initialAmountMinor);
   const selectedPlan = planCtx.selectedPlan;
   const selectedPlanRef = planCtx.selectedPlanRef;
   const selectedPlanShape = toBootstrapPlanLike(selectedPlan);
   const branch = selectedPlanShape ? isPayg(selectedPlanShape) ? "payg" : "recurring" : null;
   const canGoBack = step === "amount" || step === "payment";
-  const selectPlan = useCallback21(
+  const selectPlan = useCallback22(
     (ref) => {
       planCtx.select(ref);
       const plan = planCtx.plans.find((p) => p.reference === ref) ?? null;
@@ -6695,7 +7727,7 @@ function useCheckoutFlow(opts) {
     },
     [planCtx]
   );
-  const selectAmount = useCallback21(
+  const selectAmount = useCallback22(
     (amountMinor) => {
       selectedAmountMinorRef.current = amountMinor;
       setSelectedAmountMinor(amountMinor);
@@ -6704,7 +7736,7 @@ function useCheckoutFlow(opts) {
     },
     [topupCurrency]
   );
-  const runActivate = useCallback21(async () => {
+  const runActivate = useCallback22(async () => {
     if (!selectedPlanShape || !selectedPlanRef) return false;
     setError(null);
     setStatus("activating");
@@ -6736,7 +7768,7 @@ function useCheckoutFlow(opts) {
       return false;
     }
   }, [balance, locale, productRef, selectedPlanRef, selectedPlanShape, transport]);
-  const advanceFromPlan = useCallback21(async () => {
+  const advanceFromPlan = useCallback22(async () => {
     if (!selectedPlanShape || !selectedPlanRef) return;
     if (branch === "payg") {
       if (planCtx.currentPlanRef === selectedPlanRef) {
@@ -6774,7 +7806,7 @@ function useCheckoutFlow(opts) {
     setError(null);
     setStep("payment");
   }, [balance, branch, locale, planCtx.currentPlanRef, runActivate, selectedPlanRef, selectedPlanShape]);
-  const recordPaygSuccess = useCallback21(
+  const recordPaygSuccess = useCallback22(
     (creditsAddedFromBackend) => {
       if (!selectedPlanShape || selectedAmountMinor == null) return;
       const currency = topupCurrency ?? "USD";
@@ -6818,7 +7850,7 @@ function useCheckoutFlow(opts) {
       transport
     ]
   );
-  const recordRecurringSuccess = useCallback21(() => {
+  const recordRecurringSuccess = useCallback22(() => {
     if (!selectedPlanShape) return;
     const pricingOption = selectedPlan ? resolvePlanPricingOption(selectedPlan, planSelection?.selectedCurrency) : {
       currency: selectedPlanShape.currency ?? "USD",
@@ -6838,7 +7870,7 @@ function useCheckoutFlow(opts) {
     setStep("success");
     onPurchaseSuccessRef.current?.(meta);
   }, [selectedPlanShape, selectedPlan, planSelection?.selectedCurrency]);
-  const advance = useCallback21(async () => {
+  const advance = useCallback22(async () => {
     if (step === "plan") {
       await advanceFromPlan();
       return;
@@ -6865,7 +7897,7 @@ function useCheckoutFlow(opts) {
     selectedAmountMinor,
     step
   ]);
-  const back = useCallback21(() => {
+  const back = useCallback22(() => {
     setError(null);
     if (step === "amount") {
       setStep("plan");
@@ -6876,7 +7908,7 @@ function useCheckoutFlow(opts) {
       return;
     }
   }, [branch, step]);
-  const reset = useCallback21(() => {
+  const reset = useCallback22(() => {
     setStep("plan");
     selectedAmountMinorRef.current = null;
     setSelectedAmountMinor(null);
@@ -6885,13 +7917,13 @@ function useCheckoutFlow(opts) {
     setStatus("idle");
     setTopupCurrencyOverride(null);
   }, []);
-  const retry = useCallback21(async () => {
+  const retry = useCallback22(async () => {
     if (status !== "error") return;
     if (step === "plan" && branch === "payg") {
       await runActivate();
     }
   }, [branch, runActivate, status, step]);
-  const notifyPaymentSuccess = useCallback21(
+  const notifyPaymentSuccess = useCallback22(
     (_intent, extras) => {
       if (branch === "payg") {
         recordPaygSuccess(extras?.creditsAdded);
@@ -6901,7 +7933,7 @@ function useCheckoutFlow(opts) {
     },
     [branch, recordPaygSuccess, recordRecurringSuccess]
   );
-  return useMemo16(
+  return useMemo17(
     () => ({
       step,
       status,
@@ -6951,11 +7983,6 @@ function useCheckoutFlow(opts) {
 
 export {
   createTransportCacheKey,
-  autoRechargeCache,
-  CACHE_DURATION2 as CACHE_DURATION,
-  autoRechargeCacheKeyFor,
-  writeAutoRechargeCache,
-  subscribeAutoRecharge,
   filterPurchases,
   getActivePurchases,
   getCancelledPurchasesWithEndDate,
@@ -6979,6 +8006,9 @@ export {
   composeEventHandlers,
   useCopy,
   useLocale,
+  ExternalLinkProvider,
+  useOpenExternal,
+  useExternalLinkClick,
   LegalFooter,
   withPaymentElementDefaults,
   MissingProviderError,
@@ -7076,7 +8106,6 @@ export {
   PlanSelector,
   usePlanSelector,
   usePurchaseActions,
-  CancelPlanButton,
   usePurchaseStatus,
   CancelledPlanNoticeRoot2 as CancelledPlanNoticeRoot,
   CancelledPlanNoticeHeading2 as CancelledPlanNoticeHeading,
@@ -7089,8 +8118,10 @@ export {
   CancelledPlanNotice,
   useCancelledPlanNotice,
   useTransport,
+  limitsCache,
   isUnlimited,
   useLimits,
+  seedUsageSnapshot,
   useUsage,
   Root7 as Root,
   Bar,
@@ -7105,9 +8136,24 @@ export {
   planSortByPaygFirstThenAsc,
   buildDefaultCheckoutPlanFilter,
   formatContinueLabel,
+  planBillingCycle,
   planBillingInterval,
+  formatCycleSuffix,
+  formatPlanPriceLabel,
+  formatPaygRate,
   inferIncludedUnits,
   planMeterName,
-  shortCycle,
+  useAutoRecharge,
+  estimateCredits,
+  estimateCurrencyMajorFromCredits,
+  createDefaultAutoRechargeForm,
+  effectiveMonthlySpend,
+  isMonthlySpendCapReached,
+  validateAutoRechargeForm,
+  configToAutoRechargeInput,
+  configToForm,
+  formatAmountWithUnit,
+  buildSummaryLine,
+  flipUnitValue,
   useCheckoutFlow
 };