@solvapay/react 1.2.1 → 1.3.0-preview-cb8ad16e16ce8f8f357bd7f2e7068d85159df587

package/dist/mcp/index.cjs

@@ -342,7 +342,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;
   }
@@ -351,12 +351,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;
@@ -682,6 +686,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);
@@ -692,13 +707,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;
   }
@@ -738,6 +748,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;
       }
@@ -970,6 +981,7 @@ var enCopy = {
     currentBadge: "Current",
     popularBadge: "Popular",
     freeBadge: "Free",
+    usageRateLabel: "Usage-based",
     perIntervalShort: "/{interval}",
     continueButton: "Continue",
     backButton: "\u2190 Back to plans",
@@ -1838,7 +1850,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;
   }
@@ -3778,6 +3791,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
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var PlanSelectorContext = (0, import_react26.createContext)(null);
@@ -3858,6 +3893,23 @@ var Root3 = (0, import_react26.forwardRef)(function PlanSelectorRoot(props, forw
     setSelectedPlanIndex(-1);
   }, [setSelectedPlanIndex]);
   const selectedPlanRef = selectedPlan?.reference ?? null;
+  const [preferredCurrency, setPreferredCurrencyState] = (0, import_react26.useState)(null);
+  const [selectedCurrencies, setSelectedCurrencies] = (0, import_react26.useState)({});
+  const getSelectedOption = (0, import_react26.useCallback)(
+    (plan) => resolvePlanPricingOption(
+      plan,
+      selectedCurrencies[plan.reference] ?? preferredCurrency ?? null
+    ),
+    [selectedCurrencies, preferredCurrency]
+  );
+  const setPreferredCurrency = (0, import_react26.useCallback)((currency) => {
+    setPreferredCurrencyState(currency.toUpperCase());
+    setSelectedCurrencies({});
+  }, []);
+  const setPlanCurrency = (0, import_react26.useCallback)((planRef, currency) => {
+    setSelectedCurrencies((current) => ({ ...current, [planRef]: currency }));
+  }, []);
+  const selectedCurrency = selectedPlan ? getSelectedOption(selectedPlan).currency : null;
   const autoCurrentAppliedKeyRef = (0, import_react26.useRef)(null);
   (0, import_react26.useEffect)(() => {
     if (autoCurrentAppliedKeyRef.current === productRef) return;
@@ -3887,7 +3939,12 @@ var Root3 = (0, import_react26.forwardRef)(function PlanSelectorRoot(props, forw
       isFree,
       isPopular,
       select,
-      clearSelection
+      clearSelection,
+      preferredCurrency,
+      setPreferredCurrency,
+      selectedCurrencies,
+      setPlanCurrency,
+      getSelectedOption
     }),
     [
       plans,
@@ -3901,7 +3958,12 @@ var Root3 = (0, import_react26.forwardRef)(function PlanSelectorRoot(props, forw
       isFree,
       isPopular,
       select,
-      clearSelection
+      clearSelection,
+      preferredCurrency,
+      setPreferredCurrency,
+      selectedCurrencies,
+      setPlanCurrency,
+      getSelectedOption
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -3913,6 +3975,12 @@ var Root3 = (0, import_react26.forwardRef)(function PlanSelectorRoot(props, forw
         setSelectedPlanRef: (ref) => {
           if (ref) select(ref);
         },
+        selectedCurrency,
+        setSelectedCurrency: (currency) => {
+          if (currency) {
+            setPreferredCurrency(currency);
+          }
+        },
         plans,
         loading,
         error
@@ -3937,14 +4005,19 @@ var Grid = (0, import_react26.forwardRef)(function PlanSelectorGrid({ children,
     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__ */ (0, import_jsx_runtime17.jsx)(CardContext.Provider, { value: cardCtx, children }, plan.reference);
   }) });
@@ -3996,26 +4069,20 @@ var CardPrice = (0, import_react26.forwardRef)(function PlanSelectorCardPrice({
   const formatted = (0, import_react26.useMemo)(() => {
     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";
@@ -4040,6 +4107,57 @@ function normalizeBillingCycle(cycle) {
   if (lc === "daily" || lc === "day") return "day";
   return cycle;
 }
+var CurrencySwitcher = (0, import_react26.forwardRef)(function PlanSelectorCurrencySwitcher({ children, onChange, className, ...rest }, forwardedRef) {
+  const ctx = usePlanSelectorContext("CurrencySwitcher");
+  const availableCurrencies = (0, import_react26.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime17.jsx)(
+    "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__ */ (0, import_jsx_runtime17.jsx)("option", { value: currency, children: currency }, currency))
+    }
+  );
+});
+var CardCurrency = (0, import_react26.forwardRef)(
+  function PlanSelectorCardCurrency({ children, onChange, ...rest }, forwardedRef) {
+    const card = useCardContext("CardCurrency");
+    if (card.pricingOptions.length <= 1) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "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__ */ (0, import_jsx_runtime17.jsx)("option", { value: option.currency, children: option.currency }, option.currency))
+      }
+    );
+  }
+);
 var CardBadge = (0, import_react26.forwardRef)(function PlanSelectorCardBadge({ asChild, children, ...rest }, forwardedRef) {
   const card = useCardContext("CardBadge");
   const copy = useCopy();
@@ -4085,6 +4203,8 @@ var PlanSelector = {
   CardName,
   CardPrice,
   CardInterval,
+  CurrencySwitcher,
+  CardCurrency,
   CardBadge,
   Loading: Loading2,
   Error: ErrorSlot
@@ -4107,21 +4227,21 @@ function planSortByPaygFirstThenAsc(a, b) {
   if (!aPayg && bPayg) return 1;
   return (a.price ?? 0) - (b.price ?? 0);
 }
-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;
@@ -4156,14 +4276,31 @@ 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] = (0, import_react27.useState)(null);
+  const topupCurrencies = (0, import_react27.useMemo)(() => {
+    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 setTopupCurrency = (0, import_react27.useCallback)(
+    (code) => {
+      const normalized = code.toUpperCase();
+      setTopupCurrencyOverride(normalized);
+    },
+    []
+  );
   const [step, setStep] = (0, import_react27.useState)(initialStep);
   const [status, setStatus] = (0, import_react27.useState)("idle");
   const [selectedAmountMinor, setSelectedAmountMinor] = (0, import_react27.useState)(initialAmountMinor);
@@ -4261,19 +4398,23 @@ function useCheckoutFlow(opts) {
   );
   const recordRecurringSuccess = (0, import_react27.useCallback)(() => {
     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 = (0, import_react27.useCallback)(async () => {
     if (step === "plan") {
       await advanceFromPlan();
@@ -4319,6 +4460,7 @@ function useCheckoutFlow(opts) {
     setSuccessMeta(null);
     setError(null);
     setStatus("idle");
+    setTopupCurrencyOverride(null);
   }, []);
   const retry = (0, import_react27.useCallback)(async () => {
     if (status !== "error") return;
@@ -4348,6 +4490,8 @@ function useCheckoutFlow(opts) {
       branch,
       topupCurrency,
       topupCurrencyReady,
+      topupCurrencies,
+      setTopupCurrency,
       canGoBack,
       selectPlan,
       selectAmount,
@@ -4368,6 +4512,8 @@ function useCheckoutFlow(opts) {
       branch,
       topupCurrency,
       topupCurrencyReady,
+      topupCurrencies,
+      setTopupCurrency,
       canGoBack,
       selectPlan,
       selectAmount,
@@ -4414,16 +4560,20 @@ var PlanStep = (0, import_react28.memo)(function PlanStep2({
   activationError,
   cx
 }) {
-  const { selectedPlan, selectedPlanRef } = usePlanSelector();
+  const { selectedPlan, selectedPlanRef, getSelectedOption } = usePlanSelector();
   const locale = useHostLocale();
   const copy = useCopy();
   const selectedPlanShape = selectedPlan;
-  const ctaLabel = formatContinueLabel(selectedPlanShape, locale);
+  const pricingOption = selectedPlan ? getSelectedOption(selectedPlan) : void 0;
+  const ctaLabel = formatContinueLabel(selectedPlanShape, locale, pricingOption);
   const showBanner = fromPaywall && !hideUpgradeBanner;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
     onBack ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BackLink, { label: copy.checkout.backToAccount, onClick: onBack }) : null,
     showBanner ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(UpgradeBanner, { kind: paywallKind, cx }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: cx.heading, children: "Choose a plan" }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "solvapay-mcp-plan-step-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: cx.heading, children: "Choose a plan" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlanSelector.CurrencySwitcher, { className: "solvapay-plan-selector-currency-switcher" })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlanSelector.Grid, { className: "solvapay-plan-selector-grid", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(PlanSelector.Card, { className: "solvapay-plan-selector-card", children: [
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlanSelector.CardBadge, { className: "solvapay-plan-selector-card-badge" }),
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlanSelector.CardName, { className: "solvapay-plan-selector-card-name" }),
@@ -4748,17 +4898,34 @@ function useAmountPicker() {
 // src/mcp/views/checkout/steps/AmountStep.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var AmountStep = (0, import_react31.memo)(function AmountStep2({
-  plan,
+  topupCurrency,
+  topupCurrencies,
+  onCurrencyChange,
   onBack,
   onContinue,
   cx
 }) {
-  const currency = (plan.currency ?? "USD").toUpperCase();
+  const currency = (topupCurrency ?? "USD").toUpperCase();
   const locale = useHostLocale();
   const [stagedAmountMinor, setStagedAmountMinor] = (0, import_react31.useState)(null);
+  const currencies = topupCurrencies ?? [];
+  const showCurrencySwitch = currencies.length > 1 && !!onCurrencyChange;
+  const currencyDisplay = showCurrencySwitch ? "code" : "symbol";
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(BackLink, { label: "Back", onClick: onBack }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: cx.heading, children: "How many credits?" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "solvapay-mcp-step-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: cx.heading, children: "How many credits?" }),
+      showCurrencySwitch && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "select",
+        {
+          className: "solvapay-mcp-currency-switch",
+          value: currency,
+          onChange: (event) => onCurrencyChange?.(event.target.value),
+          "aria-label": "Topup currency",
+          children: currencies.map((code) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: code, children: code }, code))
+        }
+      )
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: cx.muted, children: "Top up to start using the tool." }),
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       AmountPicker.Root,
@@ -4768,14 +4935,14 @@ var AmountStep = (0, import_react31.memo)(function AmountStep2({
         className: cx.amountPicker,
         onChange: (value) => setStagedAmountMinor(value),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PresetAmountRow, { cx }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CustomAmountRow, { rowClassName: cx.amountCustom }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PresetAmountRow, { cx, currencyDisplay }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CustomAmountRow, { rowClassName: cx.amountCustom, currencyDisplay }),
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             AmountPicker.Confirm,
             {
               className: cx.button,
               onConfirm: (amountMinor) => onContinue(amountMinor),
-              children: stagedAmountMinor ? `Continue \u2014 ${formatPrice(stagedAmountMinor, currency, { locale })}` : "Continue"
+              children: stagedAmountMinor ? `Continue \u2014 ${formatPrice(stagedAmountMinor, currency, { locale, currencyDisplay })}` : "Continue"
             }
           )
         ]
@@ -4783,14 +4950,18 @@ var AmountStep = (0, import_react31.memo)(function AmountStep2({
     )
   ] });
 });
-function PresetAmountRow({ cx }) {
+function PresetAmountRow({
+  cx,
+  currencyDisplay
+}) {
   const { quickAmounts, currency } = useAmountPicker();
   const locale = useHostLocale();
   const popularIndex = Math.min(1, quickAmounts.length - 1);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cx.amountOptions, children: quickAmounts.map((amount, i) => {
     const label = formatPrice(amount * getMinorUnitsPerMajor(currency), currency, {
       locale,
-      free: ""
+      free: "",
+      currencyDisplay
     });
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       AmountPicker.Option,
@@ -4798,16 +4969,21 @@ function PresetAmountRow({ cx }) {
         amount,
         className: cx.amountOption,
         "data-popular": i === popularIndex ? "" : void 0,
-        "aria-label": `${label}${i === popularIndex ? " (popular)" : ""}`
+        "aria-label": `${label}${i === popularIndex ? " (popular)" : ""}`,
+        children: label
       },
       amount
     );
   }) });
 }
-function CustomAmountRow({ rowClassName }) {
-  const { currencySymbol } = useAmountPicker();
+function CustomAmountRow({
+  rowClassName,
+  currencyDisplay
+}) {
+  const { currencySymbol, currency } = useAmountPicker();
+  const prefix = currencyDisplay === "code" ? currency.toUpperCase() : currencySymbol;
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: rowClassName, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "solvapay-mcp-amount-currency-symbol", children: currencySymbol }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "solvapay-mcp-amount-currency-symbol", children: prefix }),
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AmountPicker.Custom, { className: "solvapay-mcp-amount-custom-input", placeholder: "0.00" })
   ] });
 }
@@ -5543,14 +5719,15 @@ var TopupForm = {
 // src/mcp/views/checkout/steps/PaygPaymentStep.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var PaygPaymentStep = (0, import_react37.memo)(function PaygPaymentStep2({
-  plan,
+  plan: _plan,
   amountMinor,
+  topupCurrency,
   returnUrl,
   onBack,
   onSuccess,
   cx
 }) {
-  const currency = (plan.currency ?? "USD").toUpperCase();
+  const currency = (topupCurrency ?? "USD").toUpperCase();
   const locale = useHostLocale();
   const { creditsPerMinorUnit, displayExchangeRate } = useBalance();
   const creditsAdded = creditsPerMinorUnit != null && creditsPerMinorUnit > 0 ? Math.floor(amountMinor / (displayExchangeRate ?? 1) * creditsPerMinorUnit) : null;
@@ -5612,7 +5789,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 ?? [];
@@ -5634,7 +5815,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] = (0, import_react38.useState)(false);
   const [error, setError] = (0, import_react38.useState)(null);
@@ -5666,9 +5848,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") {
@@ -5702,7 +5886,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 = (0, import_react38.useCallback)(() => {
     isStartingRef.current = false;
     setLoading(false);
@@ -6701,9 +6895,14 @@ var RecurringPaymentStep = (0, import_react43.memo)(function RecurringPaymentSte
   onSuccess,
   cx
 }) {
-  const currency = (plan.currency ?? "USD").toUpperCase();
+  const planSelection = usePlanSelection();
+  const pricingOption = resolvePlanPricingOption(
+    plan,
+    planSelection?.selectedCurrency
+  );
+  const currency = pricingOption.currency.toUpperCase();
   const locale = useHostLocale();
-  const amountMinor = plan.price ?? 0;
+  const amountMinor = pricingOption.price ?? 0;
   const cycle = plan.billingCycle ?? "monthly";
   const credits = inferIncludedCredits(plan);
   const planName = plan.name ?? "Plan";
@@ -6960,6 +7159,9 @@ function McpCheckoutBody({
       AmountStep,
       {
         plan: selectedPlanShape,
+        topupCurrency: flow.topupCurrency,
+        topupCurrencies: flow.topupCurrencies,
+        onCurrencyChange: flow.setTopupCurrency,
         onBack: () => flow.back(),
         onContinue: (amountMinor) => {
           flow.selectAmount(amountMinor);
@@ -6976,6 +7178,7 @@ function McpCheckoutBody({
         {
           plan: selectedPlanShape,
           amountMinor: flow.selectedAmountMinor,
+          topupCurrency: flow.topupCurrency,
           returnUrl,
           onBack: () => flow.back(),
           onSuccess: (extras) => flow.notifyPaymentSuccess(void 0, extras),
@@ -7358,12 +7561,17 @@ function McpTopupView({
   }
   if (probe === "blocked")
     return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HostedTopupFallback, { cx, onBack });
-  const currency = merchant?.defaultCurrency?.toUpperCase() ?? FALLBACK_TOPUP_CURRENCY;
+  const defaultCurrency = merchant?.defaultCurrency?.toUpperCase() ?? FALLBACK_TOPUP_CURRENCY;
+  const fromMerchant = (merchant?.supportedTopupCurrencies ?? []).map((code) => code.toUpperCase()).filter(Boolean);
+  const topupCurrencies = Array.from(
+    new Set(fromMerchant.length > 0 ? fromMerchant : [defaultCurrency])
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     EmbeddedTopup,
     {
       returnUrl,
-      currency,
+      defaultCurrency,
+      topupCurrencies,
       onTopupSuccess,
       onBack,
       cx
@@ -7372,16 +7580,25 @@ function McpTopupView({
 }
 function EmbeddedTopup({
   returnUrl,
-  currency,
+  defaultCurrency,
+  topupCurrencies,
   onTopupSuccess,
   onBack,
   cx
 }) {
   const [committedAmountMinor, setCommittedAmountMinor] = (0, import_react47.useState)(null);
   const [justPaidMinor, setJustPaidMinor] = (0, import_react47.useState)(null);
-  const { adjustBalance, credits, creditsPerMinorUnit, displayExchangeRate } = useBalance();
+  const [selectedCurrency, setSelectedCurrency] = (0, import_react47.useState)(defaultCurrency);
+  const currency = selectedCurrency;
+  const showCurrencySwitch = topupCurrencies.length > 1;
+  const { adjustBalance, credits, creditsPerMinorUnit, displayCurrency, displayExchangeRate } = useBalance();
   const locale = useHostLocale();
   const { notifyModelContext, notifySuccess } = useMcpBridge();
+  const handleCurrencyChange = (code) => {
+    setSelectedCurrency(code.toUpperCase());
+    setCommittedAmountMinor(null);
+    setJustPaidMinor(null);
+  };
   if (justPaidMinor != null) {
     const displayAmount = formatPrice(justPaidMinor, currency, { locale, free: "" });
     return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cx.card, children: [
@@ -7415,7 +7632,8 @@ function EmbeddedTopup({
   }
   if (committedAmountMinor != null && committedAmountMinor > 0) {
     const displayAmount = formatPrice(committedAmountMinor, currency, { locale, free: "" });
-    const creditsAdded = creditsPerMinorUnit != null && creditsPerMinorUnit > 0 ? Math.floor(
+    const rateAppliesToCurrency = displayCurrency != null && currency.toUpperCase() === displayCurrency.toUpperCase();
+    const creditsAdded = rateAppliesToCurrency && creditsPerMinorUnit != null && creditsPerMinorUnit > 0 ? Math.floor(
       committedAmountMinor / (displayExchangeRate ?? 1) * creditsPerMinorUnit
     ) : null;
     const formattedBalance = credits != null ? new Intl.NumberFormat(locale).format(credits) : null;
@@ -7481,9 +7699,36 @@ function EmbeddedTopup({
       /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h2", { className: cx.heading, children: "Add credits" }),
       /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(BalanceBadge, {})
     ] }),
+    showCurrencySwitch ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "solvapay-mcp-step-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: cx.muted, children: "Pay in" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        "select",
+        {
+          className: "solvapay-mcp-currency-switch",
+          value: currency,
+          onChange: (event) => handleCurrencyChange(event.target.value),
+          "aria-label": "Topup currency",
+          children: topupCurrencies.map((code) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("option", { value: code, children: code }, code))
+        }
+      )
+    ] }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(AmountPicker.Root, { currency, emit: "minor", className: cx.amountPicker, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(QuickAmountOptions, { className: cx.amountOptions, optionClassName: cx.amountOption }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomAmountRow2, { rowClassName: cx.amountCustom }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        QuickAmountOptions,
+        {
+          className: cx.amountOptions,
+          optionClassName: cx.amountOption,
+          currencyDisplay: showCurrencySwitch ? "code" : "symbol",
+          locale
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        CustomAmountRow2,
+        {
+          rowClassName: cx.amountCustom,
+          currencyDisplay: showCurrencySwitch ? "code" : "symbol"
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         AmountPicker.Confirm,
         {
@@ -7505,15 +7750,28 @@ function EmbeddedTopup({
 }
 function QuickAmountOptions({
   className,
-  optionClassName
+  optionClassName,
+  currencyDisplay,
+  locale
 }) {
-  const { quickAmounts } = useAmountPicker();
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className, children: quickAmounts.map((amount) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AmountPicker.Option, { amount, className: optionClassName }, amount)) });
+  const { quickAmounts, currency } = useAmountPicker();
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className, children: quickAmounts.map((amount) => {
+    const label = formatPrice(amount * getMinorUnitsPerMajor(currency), currency, {
+      locale,
+      free: "",
+      currencyDisplay
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AmountPicker.Option, { amount, className: optionClassName, children: label }, amount);
+  }) });
 }
-function CustomAmountRow2({ rowClassName }) {
-  const { currencySymbol } = useAmountPicker();
+function CustomAmountRow2({
+  rowClassName,
+  currencyDisplay
+}) {
+  const { currencySymbol, currency } = useAmountPicker();
+  const prefix = currencyDisplay === "code" ? currency.toUpperCase() : currencySymbol;
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: rowClassName, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "solvapay-mcp-amount-currency-symbol", children: currencySymbol }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "solvapay-mcp-amount-currency-symbol", children: prefix }),
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AmountPicker.Custom, { className: "solvapay-mcp-amount-custom-input", placeholder: "0.00" })
   ] });
 }