@solvapay/react 1.2.1 → 1.3.0-preview-cb8ad16e16ce8f8f357bd7f2e7068d85159df587

package/dist/{chunk-Y2UAJG67.js → chunk-ORMHGGOU.js}

@@ -105,6 +105,17 @@ async function buildRequestHeaders(config) {
   return { headers, userId };
 }
 
+// src/utils/readErrorMessage.ts
+async function readErrorMessage(res, fallbackPrefix) {
+  let serverMessage;
+  try {
+    const data = await res.clone().json();
+    serverMessage = data?.error;
+  } catch {
+  }
+  return serverMessage || `${fallbackPrefix}: ${res.statusText || res.status}`;
+}
+
 // src/transport/http.ts
 async function request(config, url, opts) {
   const { headers } = await buildRequestHeaders(config);
@@ -115,13 +126,8 @@ async function request(config, url, opts) {
   }
   const res = await fetchFn(url, init);
   if (!res.ok) {
-    let serverMessage;
-    try {
-      const data = await res.clone().json();
-      serverMessage = data?.error;
-    } catch {
-    }
-    const error = new Error(serverMessage || `${opts.errorPrefix}: ${res.statusText || res.status}`);
+    const message = await readErrorMessage(res, opts.errorPrefix);
+    const error = new Error(message);
     config?.onError?.(error, opts.onErrorContext);
     throw error;
   }
@@ -161,6 +167,7 @@ function createHttpTransport(config) {
       const body = {};
       if (params.planRef) body.planRef = params.planRef;
       if (params.productRef) body.productRef = params.productRef;
+      if (params.currency) body.currency = params.currency;
       if (params.customer && (params.customer.name || params.customer.email)) {
         body.customer = params.customer;
       }
@@ -390,6 +397,7 @@ var enCopy = {
     currentBadge: "Current",
     popularBadge: "Popular",
     freeBadge: "Free",
+    usageRateLabel: "Usage-based",
     perIntervalShort: "/{interval}",
     continueButton: "Continue",
     backButton: "\u2190 Back to plans",
@@ -1226,6 +1234,20 @@ function useSolvaPay() {
 // src/hooks/useCheckout.ts
 import { useState as useState2, useCallback as useCallback2, 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);
+var PlanSelectionProvider = ({
+  value,
+  children
+}) => /* @__PURE__ */ jsx5(PlanSelectionContext.Provider, { value, children });
+function usePlanSelection() {
+  return useContext3(PlanSelectionContext);
+}
+
+// src/hooks/useCheckout.ts
 var stripePromiseCache = /* @__PURE__ */ new Map();
 function getStripeCacheKey(publishableKey, accountId) {
   return accountId ? `${publishableKey}:${accountId}` : publishableKey;
@@ -1237,7 +1259,11 @@ async function resolvePlanRef(productRef, config) {
   const { headers } = await buildRequestHeaders(config);
   const res = await fetchFn(url, { method: "GET", headers });
   if (!res.ok) {
-    throw new Error(`Failed to fetch plans for product "${productRef}": ${res.statusText}`);
+    const message = await readErrorMessage(
+      res,
+      `Failed to fetch plans for product "${productRef}"`
+    );
+    throw new Error(message);
   }
   const data = await res.json();
   const allPlans = data.plans ?? [];
@@ -1259,7 +1285,8 @@ async function resolvePlanRef(productRef, config) {
   );
 }
 function useCheckout(options) {
-  const { planRef, productRef, customer } = options;
+  const { planRef, productRef, currency: currencyOverride, customer } = options;
+  const planSelection = usePlanSelection();
   const { createPayment, customerRef, updateCustomerRef, _config } = useSolvaPay();
   const [loading, setLoading] = useState2(false);
   const [error, setError] = useState2(null);
@@ -1291,9 +1318,11 @@ function useCheckout(options) {
       if (!effectivePlanRef) {
         throw new Error("Could not determine plan reference for checkout");
       }
+      const selectedCurrency = currencyOverride ?? planSelection?.selectedCurrency ?? void 0;
       const result = await createPayment({
         planRef: effectivePlanRef,
         productRef,
+        ...selectedCurrency && { currency: selectedCurrency },
         customer
       });
       if (!result || typeof result !== "object") {
@@ -1327,7 +1356,17 @@ function useCheckout(options) {
       setLoading(false);
       isStartingRef.current = false;
     }
-  }, [planRef, productRef, customer, createPayment, updateCustomerRef, loading, _config]);
+  }, [
+    planRef,
+    productRef,
+    currencyOverride,
+    planSelection?.selectedCurrency,
+    customer,
+    createPayment,
+    updateCustomerRef,
+    loading,
+    _config
+  ]);
   const reset = useCallback2(() => {
     isStartingRef.current = false;
     setLoading(false);
@@ -1368,7 +1407,7 @@ function useCustomer() {
 }
 
 // src/hooks/usePlans.ts
-import { useContext as useContext3, useState as useState3, useEffect as useEffect2, useCallback as useCallback3, useMemo as useMemo3, useRef as useRef3 } from "react";
+import { useContext as useContext4, useState as useState3, useEffect as useEffect2, useCallback as useCallback3, useMemo as useMemo3, useRef as useRef3 } from "react";
 
 // src/transport/list-plans.ts
 async function defaultListPlans(productRef, config) {
@@ -1382,7 +1421,8 @@ async function defaultListPlans(productRef, config) {
   const { headers } = await buildRequestHeaders(config);
   const res = await fetchFn(url, { method: "GET", headers });
   if (!res.ok) {
-    const error = new Error(`Failed to fetch plans: ${res.statusText || res.status}`);
+    const message = await readErrorMessage(res, "Failed to fetch plans");
+    const error = new Error(message);
     config?.onError?.(error, "listPlans");
     throw error;
   }
@@ -1420,7 +1460,7 @@ function usePlans(options) {
     initialPlanRef,
     selectionReady = true
   } = options;
-  const solvaContext = useContext3(SolvaPayContext);
+  const solvaContext = useContext4(SolvaPayContext);
   const config = solvaContext?._config;
   const effectiveFetcher = useMemo3(
     () => fetcher ?? ((ref) => defaultListPlans(ref, config)),
@@ -1851,11 +1891,11 @@ function useActivation() {
 }
 
 // src/components/PaymentFormContext.tsx
-import { createContext as createContext3, useContext as useContext4 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var PaymentFormContext = createContext3(null);
+import { createContext as createContext4, useContext as useContext5 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var PaymentFormContext = createContext4(null);
 function usePaymentForm() {
-  const ctx = useContext4(PaymentFormContext);
+  const ctx = useContext5(PaymentFormContext);
   if (!ctx) {
     throw new Error(
       "PaymentForm subcomponents must be used inside a <PaymentForm>. Wrap the slots with <PaymentForm planRef=... productRef=...>."
@@ -1863,7 +1903,7 @@ function usePaymentForm() {
   }
   return ctx;
 }
-var PaymentFormProvider = ({ value, children }) => /* @__PURE__ */ jsx5(PaymentFormContext.Provider, { value, children });
+var PaymentFormProvider = ({ value, children }) => /* @__PURE__ */ jsx6(PaymentFormContext.Provider, { value, children });
 
 // src/utils/format.ts
 var ZERO_DECIMAL_CURRENCIES = /* @__PURE__ */ new Set([
@@ -1895,7 +1935,7 @@ function toMajorUnits(amountMinor, currency) {
   return fractionDigits === 0 ? amountMinor : amountMinor / 100;
 }
 function formatPrice(amountMinor, currency, opts = {}) {
-  const { locale, interval, intervalCount = 1, free = "Free" } = opts;
+  const { locale, interval, intervalCount = 1, free = "Free", currencyDisplay } = opts;
   if (amountMinor === 0 && free !== "") {
     return free;
   }
@@ -1904,12 +1944,16 @@ function formatPrice(amountMinor, currency, opts = {}) {
   const isWhole = amountMinor % minorPerMajor === 0;
   const fractionDigits = isWhole ? 0 : naturalFractionDigits;
   const major = toMajorUnits(amountMinor, currency);
-  const formatter = new Intl.NumberFormat(locale, {
+  const formatterOptions = {
     style: "currency",
     currency: currency.toUpperCase(),
     minimumFractionDigits: fractionDigits,
     maximumFractionDigits: fractionDigits
-  });
+  };
+  if (currencyDisplay) {
+    formatterOptions.currencyDisplay = currencyDisplay;
+  }
+  const formatter = new Intl.NumberFormat(locale, formatterOptions);
   const formatted = formatter.format(major);
   if (!interval) return formatted;
   const suffix = intervalCount > 1 ? `${intervalCount} ${interval}s` : interval;
@@ -1928,18 +1972,6 @@ function interpolate(template, vars) {
 // src/primitives/CheckoutSummary.tsx
 import { createContext as createContext5, forwardRef as forwardRef2, useContext as useContext6, useMemo as useMemo4 } from "react";
 
-// src/components/PlanSelectionContext.tsx
-import { createContext as createContext4, useContext as useContext5 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var PlanSelectionContext = createContext4(null);
-var PlanSelectionProvider = ({
-  value,
-  children
-}) => /* @__PURE__ */ jsx6(PlanSelectionContext.Provider, { value, children });
-function usePlanSelection() {
-  return useContext5(PlanSelectionContext);
-}
-
 // src/utils/errors.ts
 var DOCS_BASE_URL = "https://solvapay.com/docs";
 var SolvaPayError = class extends Error {
@@ -3949,7 +3981,8 @@ import {
   useContext as useContext12,
   useEffect as useEffect10,
   useMemo as useMemo10,
-  useRef as useRef7
+  useRef as useRef7,
+  useState as useState12
 } from "react";
 
 // src/utils/isPayg.ts
@@ -3959,6 +3992,28 @@ function isPaygPlan(plan) {
   return type === "usage-based" || type === "hybrid";
 }
 
+// src/utils/planPricing.ts
+function getPlanPricingOptions(plan) {
+  if (plan.pricingOptions && plan.pricingOptions.length > 0) {
+    return plan.pricingOptions;
+  }
+  return [
+    {
+      currency: plan.currency ?? "USD",
+      price: plan.price ?? 0,
+      default: true
+    }
+  ];
+}
+function resolvePlanPricingOption(plan, currency) {
+  const options = getPlanPricingOptions(plan);
+  if (currency) {
+    const match = options.find((option) => option.currency.toUpperCase() === currency.toUpperCase());
+    if (match) return match;
+  }
+  return options.find((option) => option.default) ?? options[0];
+}
+
 // src/primitives/PlanSelector.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
 var PlanSelectorContext = createContext8(null);
@@ -4039,6 +4094,23 @@ var Root5 = forwardRef8(function PlanSelectorRoot(props, forwardedRef) {
     setSelectedPlanIndex(-1);
   }, [setSelectedPlanIndex]);
   const selectedPlanRef = selectedPlan?.reference ?? null;
+  const [preferredCurrency, setPreferredCurrencyState] = useState12(null);
+  const [selectedCurrencies, setSelectedCurrencies] = useState12({});
+  const getSelectedOption = useCallback13(
+    (plan) => resolvePlanPricingOption(
+      plan,
+      selectedCurrencies[plan.reference] ?? preferredCurrency ?? null
+    ),
+    [selectedCurrencies, preferredCurrency]
+  );
+  const setPreferredCurrency = useCallback13((currency) => {
+    setPreferredCurrencyState(currency.toUpperCase());
+    setSelectedCurrencies({});
+  }, []);
+  const setPlanCurrency = useCallback13((planRef, currency) => {
+    setSelectedCurrencies((current) => ({ ...current, [planRef]: currency }));
+  }, []);
+  const selectedCurrency = selectedPlan ? getSelectedOption(selectedPlan).currency : null;
   const autoCurrentAppliedKeyRef = useRef7(null);
   useEffect10(() => {
     if (autoCurrentAppliedKeyRef.current === productRef) return;
@@ -4068,7 +4140,12 @@ var Root5 = forwardRef8(function PlanSelectorRoot(props, forwardedRef) {
       isFree,
       isPopular,
       select,
-      clearSelection
+      clearSelection,
+      preferredCurrency,
+      setPreferredCurrency,
+      selectedCurrencies,
+      setPlanCurrency,
+      getSelectedOption
     }),
     [
       plans,
@@ -4082,7 +4159,12 @@ var Root5 = forwardRef8(function PlanSelectorRoot(props, forwardedRef) {
       isFree,
       isPopular,
       select,
-      clearSelection
+      clearSelection,
+      preferredCurrency,
+      setPreferredCurrency,
+      selectedCurrencies,
+      setPlanCurrency,
+      getSelectedOption
     ]
   );
   return /* @__PURE__ */ jsx15(
@@ -4094,6 +4176,12 @@ var Root5 = forwardRef8(function PlanSelectorRoot(props, forwardedRef) {
         setSelectedPlanRef: (ref) => {
           if (ref) select(ref);
         },
+        selectedCurrency,
+        setSelectedCurrency: (currency) => {
+          if (currency) {
+            setPreferredCurrency(currency);
+          }
+        },
         plans,
         loading,
         error
@@ -4118,14 +4206,19 @@ var Grid = forwardRef8(function PlanSelectorGrid({ children, ...rest }, forwarde
     const isPaygCurrent = isCurrent && isPaygPlan(plan);
     const disabled = isFree || isCurrent && !isPaygCurrent;
     const state = isCurrent && !isPaygCurrent ? "current" : selected ? "selected" : isCurrent ? "current" : isFree ? "disabled" : "idle";
+    const pricingOptions = getPlanPricingOptions(plan);
+    const selectedOption = ctx.getSelectedOption(plan);
     const cardCtx = {
       plan,
+      selectedOption,
+      pricingOptions,
       state,
       isCurrent,
       isFree,
       isPopular,
       disabled,
-      select: () => ctx.select(plan.reference)
+      select: () => ctx.select(plan.reference),
+      setCurrency: (currency) => ctx.setPlanCurrency(plan.reference, currency)
     };
     return /* @__PURE__ */ jsx15(CardContext.Provider, { value: cardCtx, children }, plan.reference);
   }) });
@@ -4177,26 +4270,20 @@ var CardPrice = forwardRef8(function PlanSelectorCardPrice({ asChild, children,
   const formatted = useMemo10(() => {
     if (card.isFree) return copy.planSelector.freeBadge;
     if (card.plan.type === "usage-based") {
-      const creditsPerUnit = card.plan.creditsPerUnit ?? 1;
-      const perCallMinor = Math.max(1, Math.round(1 / creditsPerUnit));
-      const rate = formatPrice(perCallMinor, card.plan.currency ?? "usd", {
-        locale,
-        free: ""
-      });
-      return `${rate} / call`;
+      return copy.planSelector.usageRateLabel;
     }
-    return formatPrice(card.plan.price ?? 0, card.plan.currency ?? "usd", {
+    return formatPrice(card.selectedOption.price ?? 0, card.selectedOption.currency ?? "usd", {
       locale,
       free: copy.interval.free
     });
   }, [
     card.isFree,
     card.plan.type,
-    card.plan.price,
-    card.plan.currency,
-    card.plan.creditsPerUnit,
+    card.selectedOption.price,
+    card.selectedOption.currency,
     locale,
     copy.planSelector.freeBadge,
+    copy.planSelector.usageRateLabel,
     copy.interval.free
   ]);
   const Comp = asChild ? Slot : "span";
@@ -4221,6 +4308,57 @@ function normalizeBillingCycle(cycle) {
   if (lc === "daily" || lc === "day") return "day";
   return cycle;
 }
+var CurrencySwitcher = forwardRef8(function PlanSelectorCurrencySwitcher({ children, onChange, className, ...rest }, forwardedRef) {
+  const ctx = usePlanSelectorContext("CurrencySwitcher");
+  const availableCurrencies = useMemo10(() => {
+    const currencies = /* @__PURE__ */ new Set();
+    for (const plan of ctx.plans) {
+      const options = getPlanPricingOptions(plan);
+      if (options.length <= 1) continue;
+      for (const option of options) {
+        currencies.add(option.currency.toUpperCase());
+      }
+    }
+    return [...currencies].sort();
+  }, [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__ */ jsx15(
+    "select",
+    {
+      ref: forwardedRef,
+      "data-solvapay-plan-selector-currency-switcher": "",
+      className,
+      value: effectiveCurrency,
+      onChange: (event) => {
+        ctx.setPreferredCurrency(event.target.value);
+        onChange?.(event);
+      },
+      ...rest,
+      children: children ?? availableCurrencies.map((currency) => /* @__PURE__ */ jsx15("option", { value: currency, children: currency }, currency))
+    }
+  );
+});
+var CardCurrency = forwardRef8(
+  function PlanSelectorCardCurrency({ children, onChange, ...rest }, forwardedRef) {
+    const card = useCardContext("CardCurrency");
+    if (card.pricingOptions.length <= 1) return null;
+    return /* @__PURE__ */ jsx15(
+      "select",
+      {
+        ref: forwardedRef,
+        "data-solvapay-plan-selector-card-currency": "",
+        value: card.selectedOption.currency,
+        onChange: (event) => {
+          card.setCurrency(event.target.value);
+          onChange?.(event);
+        },
+        ...rest,
+        children: children ?? card.pricingOptions.map((option) => /* @__PURE__ */ jsx15("option", { value: option.currency, children: option.currency }, option.currency))
+      }
+    );
+  }
+);
 var CardBadge = forwardRef8(function PlanSelectorCardBadge({ asChild, children, ...rest }, forwardedRef) {
   const card = useCardContext("CardBadge");
   const copy = useCopy();
@@ -4265,6 +4403,8 @@ var PlanSelectorCard2 = Card;
 var PlanSelectorCardName2 = CardName;
 var PlanSelectorCardPrice2 = CardPrice;
 var PlanSelectorCardInterval2 = CardInterval;
+var PlanSelectorCurrencySwitcher2 = CurrencySwitcher;
+var PlanSelectorCardCurrency2 = CardCurrency;
 var PlanSelectorCardBadge2 = CardBadge;
 var PlanSelectorLoading2 = Loading3;
 var PlanSelectorError2 = ErrorSlot3;
@@ -4276,6 +4416,8 @@ var PlanSelector = {
   CardName,
   CardPrice,
   CardInterval,
+  CurrencySwitcher,
+  CardCurrency,
   CardBadge,
   Loading: Loading3,
   Error: ErrorSlot3
@@ -4285,12 +4427,12 @@ function usePlanSelector() {
 }
 
 // src/hooks/usePurchaseActions.ts
-import { useState as useState12, useCallback as useCallback14 } from "react";
+import { useState as useState13, useCallback as useCallback14 } from "react";
 function usePurchaseActions() {
   const ctx = useSolvaPay();
-  const [isCancelling, setIsCancelling] = useState12(false);
-  const [isReactivating, setIsReactivating] = useState12(false);
-  const [isActivating, setIsActivating] = useState12(false);
+  const [isCancelling, setIsCancelling] = useState13(false);
+  const [isReactivating, setIsReactivating] = useState13(false);
+  const [isActivating, setIsActivating] = useState13(false);
   const cancelRenewal = useCallback14(
     async (params) => {
       setIsCancelling(true);
@@ -4633,7 +4775,7 @@ function useTransport() {
 }
 
 // src/hooks/useUsage.ts
-import { useCallback as useCallback18, useEffect as useEffect11, useMemo as useMemo14, useState as useState13 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect11, useMemo as useMemo14, useState as useState14 } from "react";
 function deriveUsage(purchase) {
   if (!purchase) return null;
   const snap = purchase.planSnapshot;
@@ -4658,9 +4800,9 @@ function deriveUsage(purchase) {
 function useUsage() {
   const { activePurchase, refetch: refetchPurchase, loading: purchaseLoading } = usePurchase();
   const transport = useTransport();
-  const [override, setOverride] = useState13(null);
-  const [error, setError] = useState13(null);
-  const [transportLoading, setTransportLoading] = useState13(false);
+  const [override, setOverride] = useState14(null);
+  const [error, setError] = useState14(null);
+  const [transportLoading, setTransportLoading] = useState14(false);
   const derived = useMemo14(() => deriveUsage(activePurchase ?? null), [activePurchase]);
   const activePurchaseRef = activePurchase?.reference ?? null;
   useEffect11(() => {
@@ -4913,7 +5055,7 @@ function useUsageMeter() {
 }
 
 // src/hooks/useCheckoutFlow.ts
-import { useCallback as useCallback19, useMemo as useMemo16, useRef as useRef8, useState as useState14 } from "react";
+import { useCallback as useCallback19, useMemo as useMemo16, useRef as useRef8, useState as useState15 } from "react";
 
 // src/primitives/checkout/shared.ts
 function isPayg(plan) {
@@ -4936,21 +5078,21 @@ function buildDefaultCheckoutPlanFilter(allPlans) {
     return true;
   };
 }
-function formatContinueLabel(plan, locale) {
+function formatContinueLabel(plan, locale, pricingOption) {
   if (!plan) return "Continue";
   if (isPayg(plan)) {
     return `Continue with ${plan.name ?? "Pay as you go"}`;
   }
-  const currency = (plan.currency ?? "USD").toUpperCase();
-  const priceLabel = formatPrice(plan.price ?? 0, currency, { locale });
+  const option = pricingOption ?? resolvePlanPricingOption(plan, null);
+  const currency = option.currency.toUpperCase();
+  const priceLabel = formatPrice(option.price ?? 0, currency, { locale });
   const cycle = plan.billingCycle ? `/${shortCycle(plan.billingCycle)}` : "";
   return `Continue with ${plan.name ?? "Plan"} \u2014 ${priceLabel}${cycle}`;
 }
 function formatPaygRate(plan, locale) {
-  const currency = (plan.currency ?? "USD").toUpperCase();
   const creditsPerUnit = plan.creditsPerUnit ?? 1;
-  const perCreditMinor = Math.max(1, Math.round(1 / creditsPerUnit));
-  return `${formatPrice(perCreditMinor, currency, { locale })} / call`;
+  const creditLabel = creditsPerUnit === 1 ? "credit" : "credits";
+  return `${creditsPerUnit.toLocaleString(locale)} ${creditLabel} / call`;
 }
 function inferIncludedCredits(plan) {
   const price = plan.price ?? 0;
@@ -4985,19 +5127,36 @@ function useCheckoutFlow(opts) {
   onPurchaseSuccessRef.current = opts.onPurchaseSuccess;
   onErrorRef.current = opts.onError;
   const planCtx = usePlanSelector();
+  const planSelection = usePlanSelection();
   const transport = useTransport();
   const locale = useLocale();
   const balance = useBalance();
   const { creditsPerMinorUnit, displayExchangeRate, adjustBalance } = balance;
   const { refetchPurchase } = useSolvaPay();
   const { merchant } = useMerchant();
-  const topupCurrency = opts.topupCurrency?.toUpperCase() ?? merchant?.defaultCurrency?.toUpperCase() ?? null;
+  const [topupCurrencyOverride, setTopupCurrencyOverride] = useState15(null);
+  const topupCurrencies = useMemo16(() => {
+    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] : [];
+    return Array.from(new Set(list));
+  }, [merchant?.supportedTopupCurrencies, merchant?.defaultCurrency, opts.topupCurrency]);
+  const resolvedDefaultTopupCurrency = opts.topupCurrency?.toUpperCase() ?? merchant?.defaultCurrency?.toUpperCase() ?? null;
+  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 [step, setStep] = useState14(initialStep);
-  const [status, setStatus] = useState14("idle");
-  const [selectedAmountMinor, setSelectedAmountMinor] = useState14(initialAmountMinor);
-  const [successMeta, setSuccessMeta] = useState14(null);
-  const [error, setError] = useState14(null);
+  const setTopupCurrency = useCallback19(
+    (code) => {
+      const normalized = code.toUpperCase();
+      setTopupCurrencyOverride(normalized);
+    },
+    []
+  );
+  const [step, setStep] = useState15(initialStep);
+  const [status, setStatus] = useState15("idle");
+  const [selectedAmountMinor, setSelectedAmountMinor] = useState15(initialAmountMinor);
+  const [successMeta, setSuccessMeta] = useState15(null);
+  const [error, setError] = useState15(null);
   const selectedAmountMinorRef = useRef8(initialAmountMinor);
   const selectedPlan = planCtx.selectedPlan;
   const selectedPlanRef = planCtx.selectedPlanRef;
@@ -5090,19 +5249,23 @@ function useCheckoutFlow(opts) {
   );
   const recordRecurringSuccess = useCallback19(() => {
     if (!selectedPlanShape) return;
-    const currency = (selectedPlanShape.currency ?? "USD").toUpperCase();
+    const pricingOption = selectedPlan ? resolvePlanPricingOption(selectedPlan, planSelection?.selectedCurrency) : {
+      currency: selectedPlanShape.currency ?? "USD",
+      price: selectedPlanShape.price ?? 0
+    };
+    const currency = pricingOption.currency.toUpperCase();
     const meta = {
       branch: "recurring",
       plan: selectedPlanShape,
       creditsIncluded: inferIncludedCredits(selectedPlanShape),
-      chargedTodayMinor: selectedPlanShape.price ?? 0,
+      chargedTodayMinor: pricingOption.price ?? 0,
       currency,
       nextRenewalLabel: null
     };
     setSuccessMeta(meta);
     setStep("success");
     onPurchaseSuccessRef.current?.(meta);
-  }, [selectedPlanShape]);
+  }, [selectedPlanShape, selectedPlan, planSelection?.selectedCurrency]);
   const advance = useCallback19(async () => {
     if (step === "plan") {
       await advanceFromPlan();
@@ -5148,6 +5311,7 @@ function useCheckoutFlow(opts) {
     setSuccessMeta(null);
     setError(null);
     setStatus("idle");
+    setTopupCurrencyOverride(null);
   }, []);
   const retry = useCallback19(async () => {
     if (status !== "error") return;
@@ -5177,6 +5341,8 @@ function useCheckoutFlow(opts) {
       branch,
       topupCurrency,
       topupCurrencyReady,
+      topupCurrencies,
+      setTopupCurrency,
       canGoBack,
       selectPlan,
       selectAmount,
@@ -5197,6 +5363,8 @@ function useCheckoutFlow(opts) {
       branch,
       topupCurrency,
       topupCurrencyReady,
+      topupCurrencies,
+      setTopupCurrency,
       canGoBack,
       selectPlan,
       selectAmount,
@@ -5237,6 +5405,7 @@ export {
   MissingProviderError,
   MissingProductRefError,
   useSolvaPay,
+  usePlanSelection,
   useCheckout,
   usePurchase,
   useCustomer,
@@ -5248,7 +5417,6 @@ export {
   productCache,
   useProduct,
   useActivation,
-  usePlanSelection,
   PaymentFormContext,
   usePaymentForm,
   PaymentFormProvider,
@@ -5304,6 +5472,7 @@ export {
   useTopupForm,
   BalanceBadge,
   isPaygPlan,
+  resolvePlanPricingOption,
   PlanSelectorRoot2 as PlanSelectorRoot,
   PlanSelectorHeading2 as PlanSelectorHeading,
   PlanSelectorGrid2 as PlanSelectorGrid,
@@ -5311,6 +5480,8 @@ export {
   PlanSelectorCardName2 as PlanSelectorCardName,
   PlanSelectorCardPrice2 as PlanSelectorCardPrice,
   PlanSelectorCardInterval2 as PlanSelectorCardInterval,
+  PlanSelectorCurrencySwitcher2 as PlanSelectorCurrencySwitcher,
+  PlanSelectorCardCurrency2 as PlanSelectorCardCurrency,
   PlanSelectorCardBadge2 as PlanSelectorCardBadge,
   PlanSelectorLoading2 as PlanSelectorLoading,
   PlanSelectorError2 as PlanSelectorError,

package/dist/{chunk-MYD6KTR2.js → chunk-WGDHMTDO.js}

@@ -30,7 +30,7 @@ import {
   useProduct,
   usePurchase,
   useTopupAmountSelector
-} from "./chunk-Y2UAJG67.js";
+} from "./chunk-ORMHGGOU.js";
 
 // src/TopupForm.tsx
 import { jsx, jsxs } from "react/jsx-runtime";