@solvapay/react 1.0.8-preview.9 → 1.0.9

package/dist/index.cjs

@@ -40,6 +40,9 @@ __export(index_exports, {
   CopyContext: () => CopyContext,
   CopyProvider: () => CopyProvider,
   CreditGate: () => CreditGate2,
+  CurrentPlanCard: () => CurrentPlanCard,
+  DEFAULT_ROUTES: () => DEFAULT_ROUTES,
+  LaunchCustomerPortalButton: () => LaunchCustomerPortalButton,
   MandateText: () => MandateText,
   PaymentForm: () => PaymentForm2,
   PaymentFormContext: () => PaymentFormContext,
@@ -52,7 +55,10 @@ __export(index_exports, {
   Spinner: () => Spinner,
   StripePaymentFormWrapper: () => StripePaymentFormWrapper,
   TopupForm: () => TopupForm2,
+  UnsupportedTransportMethodError: () => UnsupportedTransportMethodError,
+  UpdatePaymentMethodButton: () => UpdatePaymentMethodButton,
   confirmPayment: () => confirmPayment,
+  createHttpTransport: () => createHttpTransport,
   defaultAuthAdapter: () => defaultAuthAdapter,
   deriveVariant: () => deriveVariant,
   enCopy: () => enCopy,
@@ -60,12 +66,16 @@ __export(index_exports, {
   formatPrice: () => formatPrice,
   getActivePurchases: () => getActivePurchases,
   getCancelledPurchasesWithEndDate: () => getCancelledPurchasesWithEndDate,
+  getMinorUnitsPerMajor: () => getMinorUnitsPerMajor,
   getMostRecentPurchase: () => getMostRecentPurchase,
   getPrimaryPurchase: () => getPrimaryPurchase,
   interpolate: () => interpolate,
   isPaidPurchase: () => isPaidPurchase,
+  isPlanPurchase: () => isPlanPurchase,
+  isTopupPurchase: () => isTopupPurchase,
   mergeCopy: () => mergeCopy,
   resolveCta: () => resolveCta,
+  toMajorUnits: () => toMajorUnits,
   useActivation: () => useActivation,
   useBalance: () => useBalance,
   useCheckout: () => useCheckout,
@@ -74,6 +84,8 @@ __export(index_exports, {
   useLocale: () => useLocale,
   useMerchant: () => useMerchant,
   usePaymentForm: () => usePaymentForm,
+  usePaymentMethod: () => usePaymentMethod,
+  usePaywallResolver: () => usePaywallResolver,
   usePlan: () => usePlan,
   usePlans: () => usePlans,
   useProduct: () => useProduct,
@@ -82,7 +94,9 @@ __export(index_exports, {
   usePurchaseStatus: () => usePurchaseStatus,
   useSolvaPay: () => useSolvaPay,
   useTopup: () => useTopup,
-  useTopupAmountSelector: () => useTopupAmountSelector
+  useTopupAmountSelector: () => useTopupAmountSelector,
+  useTransport: () => useTransport,
+  useUsage: () => useUsage
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -118,6 +132,12 @@ function getPrimaryPurchase(purchases) {
 function isPaidPurchase(purchase) {
   return (purchase.amount ?? 0) > 0;
 }
+function isPlanPurchase(purchase) {
+  return !!purchase.planSnapshot && purchase.metadata?.purpose !== "credit_topup";
+}
+function isTopupPurchase(purchase) {
+  return !isPlanPurchase(purchase);
+}
 
 // src/adapters/auth.ts
 var defaultAuthAdapter = {
@@ -149,16 +169,6 @@ function getAuthAdapter(config) {
   if (config?.auth?.adapter) {
     return config.auth.adapter;
   }
-  if (config?.auth?.getToken || config?.auth?.getUserId) {
-    return {
-      async getToken() {
-        return config?.auth?.getToken?.() || null;
-      },
-      async getUserId() {
-        return config?.auth?.getUserId?.() || null;
-      }
-    };
-  }
   return defaultAuthAdapter;
 }
 function getCachedCustomerRef(userId) {
@@ -218,6 +228,167 @@ async function buildRequestHeaders(config) {
   return { headers, userId };
 }
 
+// src/transport/http.ts
+async function request(config, url, opts) {
+  const { headers } = await buildRequestHeaders(config);
+  const fetchFn = config?.fetch || fetch;
+  const init = { method: opts.method, headers };
+  if (opts.body !== void 0) {
+    init.body = JSON.stringify(opts.body);
+  }
+  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}`);
+    config?.onError?.(error, opts.onErrorContext);
+    throw error;
+  }
+  return await res.json();
+}
+var DEFAULT_ROUTES = {
+  checkPurchase: "/api/check-purchase",
+  createPayment: "/api/create-payment-intent",
+  processPayment: "/api/process-payment",
+  createTopupPayment: "/api/create-topup-payment-intent",
+  customerBalance: "/api/customer-balance",
+  cancelRenewal: "/api/cancel-renewal",
+  reactivateRenewal: "/api/reactivate-renewal",
+  activatePlan: "/api/activate-plan",
+  createCheckoutSession: "/api/create-checkout-session",
+  createCustomerSession: "/api/create-customer-session",
+  getMerchant: "/api/merchant",
+  getProduct: "/api/get-product",
+  listPlans: "/api/list-plans",
+  getPaymentMethod: "/api/payment-method",
+  getUsage: "/api/usage"
+};
+function routeFor(config, key) {
+  const configured = config?.api?.[key];
+  return configured || DEFAULT_ROUTES[key];
+}
+function createHttpTransport(config) {
+  return {
+    checkPurchase: () => request(config, routeFor(config, "checkPurchase"), {
+      method: "GET",
+      onErrorContext: "checkPurchase",
+      errorPrefix: "Failed to check purchase"
+    }),
+    createPayment: (params) => {
+      const body = {};
+      if (params.planRef) body.planRef = params.planRef;
+      if (params.productRef) body.productRef = params.productRef;
+      if (params.customer && (params.customer.name || params.customer.email)) {
+        body.customer = params.customer;
+      }
+      return request(config, routeFor(config, "createPayment"), {
+        method: "POST",
+        body,
+        onErrorContext: "createPayment",
+        errorPrefix: "Failed to create payment"
+      });
+    },
+    processPayment: (params) => request(config, routeFor(config, "processPayment"), {
+      method: "POST",
+      body: params,
+      onErrorContext: "processPayment",
+      errorPrefix: "Failed to process payment"
+    }),
+    createTopupPayment: (params) => request(config, routeFor(config, "createTopupPayment"), {
+      method: "POST",
+      body: { amount: params.amount, currency: params.currency },
+      onErrorContext: "createTopupPayment",
+      errorPrefix: "Failed to create topup payment"
+    }),
+    getBalance: () => request(config, routeFor(config, "customerBalance"), {
+      method: "GET",
+      onErrorContext: "getBalance",
+      errorPrefix: "Failed to fetch balance"
+    }),
+    cancelRenewal: (params) => request(config, routeFor(config, "cancelRenewal"), {
+      method: "POST",
+      body: params,
+      onErrorContext: "cancelRenewal",
+      errorPrefix: "Failed to cancel renewal"
+    }),
+    reactivateRenewal: (params) => request(config, routeFor(config, "reactivateRenewal"), {
+      method: "POST",
+      body: params,
+      onErrorContext: "reactivateRenewal",
+      errorPrefix: "Failed to reactivate renewal"
+    }),
+    activatePlan: (params) => request(config, routeFor(config, "activatePlan"), {
+      method: "POST",
+      body: params,
+      onErrorContext: "activatePlan",
+      errorPrefix: "Failed to activate plan"
+    }),
+    createCheckoutSession: (params) => {
+      const body = {};
+      if (params?.planRef) body.planRef = params.planRef;
+      if (params?.productRef) body.productRef = params.productRef;
+      if (params?.returnUrl) body.returnUrl = params.returnUrl;
+      return request(
+        config,
+        routeFor(config, "createCheckoutSession"),
+        {
+          method: "POST",
+          body,
+          onErrorContext: "createCheckoutSession",
+          errorPrefix: "Failed to create checkout session"
+        }
+      );
+    },
+    createCustomerSession: () => request(
+      config,
+      routeFor(config, "createCustomerSession"),
+      {
+        method: "POST",
+        body: {},
+        onErrorContext: "createCustomerSession",
+        errorPrefix: "Failed to create customer session"
+      }
+    ),
+    getMerchant: () => request(config, routeFor(config, "getMerchant"), {
+      method: "GET",
+      onErrorContext: "getMerchant",
+      errorPrefix: "Failed to fetch merchant"
+    }),
+    getProduct: (productRef) => {
+      const base = routeFor(config, "getProduct");
+      const url = `${base}?productRef=${encodeURIComponent(productRef)}`;
+      return request(config, url, {
+        method: "GET",
+        onErrorContext: "getProduct",
+        errorPrefix: "Failed to fetch product"
+      });
+    },
+    listPlans: (productRef) => {
+      const base = routeFor(config, "listPlans");
+      const url = `${base}?productRef=${encodeURIComponent(productRef)}`;
+      return request(config, url, {
+        method: "GET",
+        onErrorContext: "listPlans",
+        errorPrefix: "Failed to list plans"
+      });
+    },
+    getPaymentMethod: () => request(config, routeFor(config, "getPaymentMethod"), {
+      method: "GET",
+      onErrorContext: "getPaymentMethod",
+      errorPrefix: "Failed to load payment method"
+    }),
+    getUsage: () => request(config, routeFor(config, "getUsage"), {
+      method: "GET",
+      onErrorContext: "getUsage",
+      errorPrefix: "Failed to load usage"
+    })
+  };
+}
+
 // src/i18n/context.tsx
 var import_react = require("react");
 
@@ -367,6 +538,26 @@ var enCopy = {
     lowBalanceSubheading: "Top up to continue using {product}",
     topUpCta: "Top up now"
   },
+  currentPlan: {
+    heading: "Your plan",
+    nextBilling: "Next billing: {date}",
+    expiresOn: "Expires {date}",
+    validIndefinitely: "Valid indefinitely",
+    paymentMethod: "{brand} \u2022\u2022\u2022\u2022 {last4}",
+    paymentMethodExpires: "expires {month}/{year}",
+    noPaymentMethod: "No payment method on file",
+    updatePaymentButton: "Update card",
+    cycleUnit: {
+      weekly: "week",
+      monthly: "month",
+      quarterly: "3 months",
+      yearly: "year"
+    }
+  },
+  customerPortal: {
+    launchButton: "Manage billing",
+    loadingLabel: "Loading portal\u2026"
+  },
   errors: {
     paymentInitFailed: "Payment initialization failed",
     topupInitFailed: "Top-up initialization failed",
@@ -380,7 +571,40 @@ var enCopy = {
     paymentProcessingFailed: "Payment processing failed. Please try again or contact support.",
     paymentRequires3ds: "Payment requires additional authentication. Please complete the verification.",
     paymentProcessingTimeout: "Payment processing timed out \u2014 webhooks may not be configured",
-    paymentStatusPrefix: "Payment status: {status}"
+    paymentConfirmationDelayed: "Payment succeeded but confirmation is taking longer than usual. Refresh in a moment to see your purchase.",
+    paymentStatusPrefix: "Payment status: {status}",
+    paywallInvalidContent: "Paywall content is missing or malformed.",
+    usageLoadFailed: "Failed to load usage"
+  },
+  paywall: {
+    header: "Unlock access",
+    paymentRequiredHeading: "Upgrade to continue",
+    activationRequiredHeading: "Add credits to continue",
+    resolvedHeading: "You can continue",
+    productContext: "For {product}",
+    balanceLine: "You have {available} credits, need {required}.",
+    paymentRequiredMessage: "You've used all your included calls{forProduct}. Choose a plan below to keep going.",
+    paymentRequiredMessageRemaining: "Only {remaining} call{pluralSuffix} left{forProduct}. Choose a plan below to keep going.",
+    paymentRequiredProductSuffix: " for {product}",
+    retryButton: "Continue",
+    hostedCheckoutButton: "Open checkout",
+    hostedCheckoutLoading: "Loading checkout\u2026"
+  },
+  usage: {
+    header: "Usage",
+    percentUsedLabel: "{percent}% used",
+    usedLabel: "{used} / {total} {unit}",
+    remainingLabel: "{remaining} {unit} remaining",
+    unlimitedLabel: "Unlimited",
+    resetsInLabel: "Resets in {days} days",
+    resetsOnLabel: "Resets {date}",
+    loadingLabel: "Loading usage\u2026",
+    emptyLabel: "No usage-based plan is active.",
+    approachingLimit: "You're approaching your usage limit.",
+    atLimit: "You've reached your usage limit.",
+    topUpCta: "Add credits",
+    upgradeCta: "Upgrade plan",
+    refreshCta: "Refresh"
   }
 };
 
@@ -425,146 +649,66 @@ function useCopyContext() {
 // src/SolvaPayProvider.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var SolvaPayContext = (0, import_react2.createContext)(null);
-var SolvaPayProvider = ({
-  config,
-  createPayment: customCreatePayment,
-  checkPurchase: customCheckPurchase,
-  processPayment: customProcessPayment,
-  createTopupPayment: customCreateTopupPayment,
-  children
-}) => {
-  const [purchaseData, setPurchaseData] = (0, import_react2.useState)({
-    purchases: []
+function resolveTransport(config) {
+  return config?.transport ?? createHttpTransport(config);
+}
+var SolvaPayProvider = ({ config, children }) => {
+  const initial = config?.initial;
+  const [purchaseData, setPurchaseData] = (0, import_react2.useState)(() => {
+    if (!initial) return { purchases: [] };
+    return {
+      // The server-side `PurchaseCheckResult.purchases` shape has looser
+      // optional fields than `PurchaseInfo`, but the runtime data is
+      // identical — the same rows flow through `transport.checkPurchase()`
+      // today. Cast once here to unify the two entry points, and run
+      // the same `filterPurchases` the HTTP path applies in
+      // `fetchPurchase` so the bootstrap-hydrated data never contains
+      // cancelled / expired / suspended rows the active-only derivations
+      // (`activePurchase`, `hasPaidPurchase`, …) wouldn't expect.
+      purchases: filterPurchases(
+        initial.purchase?.purchases ?? []
+      ),
+      customerRef: initial.customerRef ?? initial.purchase?.customerRef,
+      email: initial.purchase?.email,
+      name: initial.purchase?.name
+    };
   });
   const [loading, setLoading] = (0, import_react2.useState)(false);
   const [isRefetching, setIsRefetching] = (0, import_react2.useState)(false);
   const [purchaseError, setPurchaseError] = (0, import_react2.useState)(null);
-  const [internalCustomerRef, setInternalCustomerRef] = (0, import_react2.useState)(void 0);
+  const [internalCustomerRef, setInternalCustomerRef] = (0, import_react2.useState)(
+    initial?.customerRef ?? void 0
+  );
   const [userId, setUserId] = (0, import_react2.useState)(null);
-  const [isAuthenticated, setIsAuthenticated] = (0, import_react2.useState)(false);
-  const [creditsValue, setCreditsValue] = (0, import_react2.useState)(null);
-  const [displayCurrencyValue, setDisplayCurrencyValue] = (0, import_react2.useState)(null);
-  const [creditsPerMinorUnitValue, setCreditsPerMinorUnitValue] = (0, import_react2.useState)(null);
-  const [displayExchangeRateValue, setDisplayExchangeRateValue] = (0, import_react2.useState)(null);
+  const [isAuthenticated, setIsAuthenticated] = (0, import_react2.useState)(!!initial?.customerRef);
+  const [creditsValue, setCreditsValue] = (0, import_react2.useState)(
+    initial?.balance?.credits ?? null
+  );
+  const [displayCurrencyValue, setDisplayCurrencyValue] = (0, import_react2.useState)(
+    initial?.balance?.displayCurrency ?? null
+  );
+  const [creditsPerMinorUnitValue, setCreditsPerMinorUnitValue] = (0, import_react2.useState)(
+    initial?.balance?.creditsPerMinorUnit ?? null
+  );
+  const [displayExchangeRateValue, setDisplayExchangeRateValue] = (0, import_react2.useState)(
+    initial?.balance?.displayExchangeRate ?? null
+  );
   const [balanceLoading, setBalanceLoading] = (0, import_react2.useState)(false);
   const balanceInFlightRef = (0, import_react2.useRef)(false);
-  const balanceLoadedRef = (0, import_react2.useRef)(false);
+  const balanceLoadedRef = (0, import_react2.useRef)(!!initial?.balance);
   const optimisticUntilRef = (0, import_react2.useRef)(0);
   const optimisticTimerRef = (0, import_react2.useRef)(null);
   const fetchBalanceRef = (0, import_react2.useRef)(null);
   const inFlightRef = (0, import_react2.useRef)(null);
-  const checkPurchaseRef = (0, import_react2.useRef)(null);
-  const createPaymentRef = (0, import_react2.useRef)(null);
-  const processPaymentRef = (0, import_react2.useRef)(null);
-  const createTopupPaymentRef = (0, import_react2.useRef)(null);
-  const configRef = (0, import_react2.useRef)(config);
-  const buildDefaultCheckPurchaseRef = (0, import_react2.useRef)(
-    null
+  const loadedCacheKeysRef = (0, import_react2.useRef)(
+    new Set(initial?.customerRef ? [initial.customerRef] : [])
   );
+  const configRef = (0, import_react2.useRef)(config);
+  const transportRef = (0, import_react2.useRef)(resolveTransport(config));
   (0, import_react2.useEffect)(() => {
     configRef.current = config;
+    transportRef.current = resolveTransport(config);
   }, [config]);
-  (0, import_react2.useEffect)(() => {
-    checkPurchaseRef.current = customCheckPurchase || null;
-  }, [customCheckPurchase]);
-  (0, import_react2.useEffect)(() => {
-    createPaymentRef.current = customCreatePayment || null;
-  }, [customCreatePayment]);
-  (0, import_react2.useEffect)(() => {
-    processPaymentRef.current = customProcessPayment || null;
-  }, [customProcessPayment]);
-  (0, import_react2.useEffect)(() => {
-    createTopupPaymentRef.current = customCreateTopupPayment || null;
-  }, [customCreateTopupPayment]);
-  const buildDefaultCheckPurchase = (0, import_react2.useCallback)(async () => {
-    const currentConfig = configRef.current;
-    const { headers } = await buildRequestHeaders(currentConfig);
-    const route = currentConfig?.api?.checkPurchase || "/api/check-purchase";
-    const fetchFn = currentConfig?.fetch || fetch;
-    const res = await fetchFn(route, { method: "GET", headers });
-    if (!res.ok) {
-      const error = new Error(`Failed to check purchase: ${res.statusText}`);
-      currentConfig?.onError?.(error, "checkPurchase");
-      throw error;
-    }
-    return res.json();
-  }, []);
-  (0, import_react2.useEffect)(() => {
-    buildDefaultCheckPurchaseRef.current = buildDefaultCheckPurchase;
-  }, [buildDefaultCheckPurchase]);
-  const buildDefaultCreatePayment = (0, import_react2.useCallback)(
-    async (params) => {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.createPayment || "/api/create-payment-intent";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const body = {};
-      if (params.planRef) {
-        body.planRef = params.planRef;
-      }
-      if (params.productRef) {
-        body.productRef = params.productRef;
-      }
-      if (params.customer && (params.customer.name || params.customer.email)) {
-        body.customer = params.customer;
-      }
-      const res = await fetchFn(route, {
-        method: "POST",
-        headers,
-        body: JSON.stringify(body)
-      });
-      if (!res.ok) {
-        const error = new Error(`Failed to create payment: ${res.statusText}`);
-        currentConfig?.onError?.(error, "createPayment");
-        throw error;
-      }
-      return res.json();
-    },
-    []
-  );
-  const buildDefaultProcessPayment = (0, import_react2.useCallback)(
-    async (params) => {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.processPayment || "/api/process-payment";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const res = await fetchFn(route, {
-        method: "POST",
-        headers,
-        body: JSON.stringify(params)
-      });
-      if (!res.ok) {
-        const error = new Error(`Failed to process payment: ${res.statusText}`);
-        currentConfig?.onError?.(error, "processPayment");
-        throw error;
-      }
-      return res.json();
-    },
-    []
-  );
-  const buildDefaultCreateTopupPayment = (0, import_react2.useCallback)(
-    async (params) => {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.createTopupPayment || "/api/create-topup-payment-intent";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const res = await fetchFn(route, {
-        method: "POST",
-        headers,
-        body: JSON.stringify({
-          amount: params.amount,
-          currency: params.currency
-        })
-      });
-      if (!res.ok) {
-        const error = new Error(`Failed to create topup payment: ${res.statusText}`);
-        currentConfig?.onError?.(error, "createTopupPayment");
-        throw error;
-      }
-      return res.json();
-    },
-    []
-  );
   const fetchBalanceImpl = (0, import_react2.useCallback)(async () => {
     if (optimisticUntilRef.current > Date.now()) return;
     if (!isAuthenticated && !internalCustomerRef) {
@@ -582,16 +726,12 @@ var SolvaPayProvider = ({
       setBalanceLoading(true);
     }
     try {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.customerBalance || "/api/customer-balance";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const res = await fetchFn(route, { method: "GET", headers });
-      if (!res.ok) {
-        console.error("[SolvaPayProvider] Failed to fetch balance:", res.statusText);
+      if (!transportRef.current.getBalance) {
+        setBalanceLoading(false);
+        balanceInFlightRef.current = false;
         return;
       }
-      const data = await res.json();
+      const data = await transportRef.current.getBalance();
       setCreditsValue(data.credits ?? null);
       setDisplayCurrencyValue(data.displayCurrency ?? null);
       setCreditsPerMinorUnitValue(data.creditsPerMinorUnit ?? null);
@@ -622,54 +762,35 @@ var SolvaPayProvider = ({
       fetchBalanceRef.current?.();
     }, OPTIMISTIC_GRACE_MS);
   }, []);
-  const _checkPurchase = (0, import_react2.useCallback)(async () => {
-    if (checkPurchaseRef.current) {
-      return checkPurchaseRef.current();
-    }
-    if (buildDefaultCheckPurchaseRef.current) {
-      return buildDefaultCheckPurchaseRef.current();
-    }
-    return buildDefaultCheckPurchase();
-  }, [buildDefaultCheckPurchase]);
   const createPayment = (0, import_react2.useCallback)(
-    async (params) => {
-      if (createPaymentRef.current) {
-        return createPaymentRef.current(params);
-      }
-      return buildDefaultCreatePayment(params);
-    },
-    [buildDefaultCreatePayment]
+    (params) => transportRef.current.createPayment(params),
+    []
   );
   const processPayment = (0, import_react2.useCallback)(
-    async (params) => {
-      if (processPaymentRef.current) {
-        return processPaymentRef.current(params);
-      }
-      return buildDefaultProcessPayment(params);
-    },
-    [buildDefaultProcessPayment]
+    (params) => transportRef.current.processPayment(params),
+    []
   );
   const createTopupPayment = (0, import_react2.useCallback)(
-    async (params) => {
-      if (createTopupPaymentRef.current) {
-        return createTopupPaymentRef.current(params);
-      }
-      return buildDefaultCreateTopupPayment(params);
-    },
-    [buildDefaultCreateTopupPayment]
+    (params) => transportRef.current.createTopupPayment(params),
+    []
   );
   (0, import_react2.useEffect)(() => {
+    if (configRef.current?.initial) {
+      setIsAuthenticated(configRef.current.initial.customerRef !== null);
+      return;
+    }
     const detectAuth = async () => {
       const currentConfig = configRef.current;
-      const adapter = getAuthAdapter(currentConfig);
-      const token = await adapter.getToken();
-      const detectedUserId = await adapter.getUserId();
+      const adapter2 = getAuthAdapter(currentConfig);
+      const token = await adapter2.getToken();
+      const detectedUserId = await adapter2.getUserId();
       const prevUserId = userId;
       setIsAuthenticated(!!token);
       setUserId(detectedUserId);
       if (prevUserId !== null && detectedUserId !== prevUserId) {
         clearCachedCustomerRef();
         setInternalCustomerRef(void 0);
+        loadedCacheKeysRef.current.clear();
         return;
       }
       const cachedRef = getCachedCustomerRef(detectedUserId);
@@ -678,11 +799,19 @@ var SolvaPayProvider = ({
       } else if (!token) {
         clearCachedCustomerRef();
         setInternalCustomerRef(void 0);
+        loadedCacheKeysRef.current.clear();
       } else if (token && !cachedRef) {
         setInternalCustomerRef(void 0);
       }
     };
     detectAuth();
+    const adapter = getAuthAdapter(configRef.current);
+    if (typeof adapter.subscribe === "function") {
+      const unsubscribe = adapter.subscribe(() => {
+        detectAuth();
+      });
+      return unsubscribe;
+    }
     const interval = setInterval(detectAuth, 3e4);
     return () => clearInterval(interval);
   }, [userId]);
@@ -701,20 +830,24 @@ var SolvaPayProvider = ({
         return;
       }
       inFlightRef.current = cacheKey;
-      const hasExistingData = purchaseData.purchases.length > 0;
-      if (hasExistingData) {
+      const hasLoadedOnce = loadedCacheKeysRef.current.has(cacheKey);
+      if (hasLoadedOnce) {
         setIsRefetching(true);
       } else {
         setLoading(true);
       }
       try {
-        const checkFn = checkPurchaseRef.current || buildDefaultCheckPurchaseRef.current;
-        if (!checkFn) {
-          throw new Error("checkPurchase function not available");
+        if (!transportRef.current.checkPurchase) {
+          setLoading(false);
+          setIsRefetching(false);
+          loadedCacheKeysRef.current.add(cacheKey);
+          inFlightRef.current = null;
+          return;
         }
-        const data = await checkFn();
+        const data = await transportRef.current.checkPurchase();
         if (data.customerRef) {
           setInternalCustomerRef(data.customerRef);
+          loadedCacheKeysRef.current.add(data.customerRef);
           const currentAdapter = getAuthAdapter(configRef.current);
           const currentUserId = await currentAdapter.getUserId();
           setCachedCustomerRef(data.customerRef, currentUserId);
@@ -734,40 +867,82 @@ var SolvaPayProvider = ({
         }
       } finally {
         if (inFlightRef.current === cacheKey) {
+          loadedCacheKeysRef.current.add(cacheKey);
           setLoading(false);
           setIsRefetching(false);
           inFlightRef.current = null;
         }
       }
     },
-    [isAuthenticated, internalCustomerRef, userId, purchaseData.purchases.length]
+    [isAuthenticated, internalCustomerRef, userId]
   );
   const fetchPurchaseRef = (0, import_react2.useRef)(fetchPurchase);
   (0, import_react2.useEffect)(() => {
     fetchPurchaseRef.current = fetchPurchase;
   }, [fetchPurchase]);
+  const applyInitialRef = (0, import_react2.useRef)(null);
   const refetchPurchase = (0, import_react2.useCallback)(async () => {
     inFlightRef.current = null;
+    const refresh = configRef.current?.refreshInitial;
+    const hasCheckPurchase = !!transportRef.current.checkPurchase;
+    if (refresh && !hasCheckPurchase) {
+      setIsRefetching(true);
+      try {
+        const next = await refresh();
+        if (next) applyInitialRef.current?.(next);
+      } catch (err) {
+        console.error("[SolvaPayProvider] refetchPurchase (MCP) failed:", err);
+      } finally {
+        setIsRefetching(false);
+      }
+      return;
+    }
     await fetchPurchaseRef.current(true);
   }, []);
+  const applyInitial = (0, import_react2.useCallback)((next) => {
+    setPurchaseData({
+      // Mirror the HTTP path: strip non-active rows before any
+      // derivation (`activePurchase` etc.) reads the array.
+      purchases: filterPurchases(
+        next.purchase?.purchases ?? []
+      ),
+      customerRef: next.customerRef ?? next.purchase?.customerRef,
+      email: next.purchase?.email,
+      name: next.purchase?.name
+    });
+    if (next.customerRef) {
+      setInternalCustomerRef(next.customerRef);
+      loadedCacheKeysRef.current.add(next.customerRef);
+    } else {
+      setInternalCustomerRef(void 0);
+      loadedCacheKeysRef.current.clear();
+    }
+    setIsAuthenticated(next.customerRef !== null);
+    setCreditsValue(next.balance?.credits ?? null);
+    setDisplayCurrencyValue(next.balance?.displayCurrency ?? null);
+    setCreditsPerMinorUnitValue(next.balance?.creditsPerMinorUnit ?? null);
+    setDisplayExchangeRateValue(next.balance?.displayExchangeRate ?? null);
+    balanceLoadedRef.current = !!next.balance;
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    applyInitialRef.current = applyInitial;
+  }, [applyInitial]);
+  const refreshBootstrap = (0, import_react2.useCallback)(async () => {
+    const refresh = configRef.current?.refreshInitial;
+    if (refresh) {
+      try {
+        const next = await refresh();
+        if (next) applyInitial(next);
+      } catch (err) {
+        console.error("[SolvaPayProvider] refreshBootstrap failed:", err);
+      }
+      return;
+    }
+    await Promise.all([refetchPurchase(), fetchBalanceRef.current?.() ?? Promise.resolve()]);
+  }, [refetchPurchase, applyInitial]);
   const cancelRenewal = (0, import_react2.useCallback)(
     async (params) => {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.cancelRenewal || "/api/cancel-renewal";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const res = await fetchFn(route, {
-        method: "POST",
-        headers,
-        body: JSON.stringify(params)
-      });
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}));
-        const error = new Error(data.error || `Failed to cancel renewal: ${res.statusText}`);
-        currentConfig?.onError?.(error, "cancelRenewal");
-        throw error;
-      }
-      const result = await res.json();
+      const result = await transportRef.current.cancelRenewal(params);
       await refetchPurchase();
       return result;
     },
@@ -775,22 +950,7 @@ var SolvaPayProvider = ({
   );
   const reactivateRenewal = (0, import_react2.useCallback)(
     async (params) => {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.reactivateRenewal || "/api/reactivate-renewal";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const res = await fetchFn(route, {
-        method: "POST",
-        headers,
-        body: JSON.stringify(params)
-      });
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}));
-        const error = new Error(data.error || `Failed to reactivate renewal: ${res.statusText}`);
-        currentConfig?.onError?.(error, "reactivateRenewal");
-        throw error;
-      }
-      const result = await res.json();
+      const result = await transportRef.current.reactivateRenewal(params);
       await refetchPurchase();
       return result;
     },
@@ -798,22 +958,7 @@ var SolvaPayProvider = ({
   );
   const activatePlan = (0, import_react2.useCallback)(
     async (params) => {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.activatePlan || "/api/activate-plan";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const res = await fetchFn(route, {
-        method: "POST",
-        headers,
-        body: JSON.stringify(params)
-      });
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}));
-        const error = new Error(data.error || `Failed to activate plan: ${res.statusText}`);
-        currentConfig?.onError?.(error, "activatePlan");
-        throw error;
-      }
-      const result = await res.json();
+      const result = await transportRef.current.activatePlan(params);
       if (result.status === "activated" || result.status === "already_active") {
         await refetchPurchase();
       }
@@ -821,8 +966,13 @@ var SolvaPayProvider = ({
     },
     [refetchPurchase]
   );
+  const hydratedFromInitialRef = (0, import_react2.useRef)(!!initial);
   (0, import_react2.useEffect)(() => {
     inFlightRef.current = null;
+    if (hydratedFromInitialRef.current) {
+      hydratedFromInitialRef.current = false;
+      return;
+    }
     if (isAuthenticated || internalCustomerRef) {
       fetchPurchase();
     } else {
@@ -841,8 +991,10 @@ var SolvaPayProvider = ({
     [fetchPurchase, userId]
   );
   const purchase = (0, import_react2.useMemo)(() => {
-    const activePurchase = getPrimaryPurchase(purchaseData.purchases);
-    const activePaidPurchases = purchaseData.purchases.filter(
+    const planPurchases = purchaseData.purchases.filter(isPlanPurchase);
+    const balanceTransactions = purchaseData.purchases.filter((p) => !isPlanPurchase(p));
+    const activePurchase = getPrimaryPurchase(planPurchases);
+    const activePaidPurchases = planPurchases.filter(
       (p) => p.status === "active" && isPaidPurchase(p)
     );
     const activePaidPurchase = activePaidPurchases.sort(
@@ -857,18 +1009,14 @@ var SolvaPayProvider = ({
       name: purchaseData.name,
       purchases: purchaseData.purchases,
       hasProduct: (productName) => {
-        return purchaseData.purchases.some(
-          (p) => p.productName.toLowerCase() === productName.toLowerCase() && p.status === "active"
-        );
-      },
-      hasPlan: (productName) => {
-        return purchaseData.purchases.some(
+        return planPurchases.some(
           (p) => p.productName.toLowerCase() === productName.toLowerCase() && p.status === "active"
         );
       },
       activePurchase,
       hasPaidPurchase: activePaidPurchases.length > 0,
-      activePaidPurchase
+      activePaidPurchase,
+      balanceTransactions
     };
   }, [loading, isRefetching, purchaseError, purchaseData, internalCustomerRef]);
   const balance = (0, import_react2.useMemo)(
@@ -881,7 +1029,15 @@ var SolvaPayProvider = ({
       refetch: fetchBalanceImpl,
       adjustBalance: adjustBalanceImpl
     }),
-    [balanceLoading, creditsValue, displayCurrencyValue, creditsPerMinorUnitValue, displayExchangeRateValue, fetchBalanceImpl, adjustBalanceImpl]
+    [
+      balanceLoading,
+      creditsValue,
+      displayCurrencyValue,
+      creditsPerMinorUnitValue,
+      displayExchangeRateValue,
+      fetchBalanceImpl,
+      adjustBalanceImpl
+    ]
   );
   const contextValue = (0, import_react2.useMemo)(
     () => ({
@@ -896,6 +1052,7 @@ var SolvaPayProvider = ({
       customerRef: purchaseData.customerRef || internalCustomerRef,
       updateCustomerRef,
       balance,
+      refreshBootstrap,
       _config: configRef.current
     }),
     [
@@ -910,7 +1067,8 @@ var SolvaPayProvider = ({
       purchaseData.customerRef,
       internalCustomerRef,
       updateCustomerRef,
-      balance
+      balance,
+      refreshBootstrap
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SolvaPayContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CopyProvider, { locale: config?.locale, copy: config?.copy, children }) });
@@ -1090,8 +1248,11 @@ var stripePromiseCache = /* @__PURE__ */ new Map();
 function getStripeCacheKey(publishableKey, accountId) {
   return accountId ? `${publishableKey}:${accountId}` : publishableKey;
 }
-async function resolvePlanRef(productRef, fetchFn, headers, listPlansRoute) {
+async function resolvePlanRef(productRef, config) {
+  const listPlansRoute = config?.api?.listPlans || "/api/list-plans";
   const url = `${listPlansRoute}?productRef=${encodeURIComponent(productRef)}`;
+  const fetchFn = config?.fetch || fetch;
+  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}`);
@@ -1142,8 +1303,7 @@ function useCheckout(options) {
     try {
       let effectivePlanRef = planRef;
       if (!effectivePlanRef && productRef) {
-        const listPlansRoute = _config?.api?.listPlans || "/api/list-plans";
-        effectivePlanRef = await resolvePlanRef(productRef, fetch, {}, listPlansRoute);
+        effectivePlanRef = await resolvePlanRef(productRef, _config);
         setResolvedPlanRef(effectivePlanRef);
       }
       if (!effectivePlanRef) {
@@ -1534,27 +1694,41 @@ function usePlan(options) {
 
 // src/hooks/useProduct.ts
 var import_react8 = require("react");
+
+// src/transport/cache-key.ts
+var transportIds = /* @__PURE__ */ new WeakMap();
+var nextTransportId = 0;
+function transportIdFor(transport) {
+  let id = transportIds.get(transport);
+  if (id === void 0) {
+    id = ++nextTransportId;
+    transportIds.set(transport, id);
+  }
+  return id;
+}
+function createTransportCacheKey(config, fallbackRoute, suffix) {
+  const transport = config?.transport;
+  if (transport) {
+    const id = transportIdFor(transport);
+    return suffix ? `transport:${id}:${suffix}` : `transport:${id}`;
+  }
+  return fallbackRoute;
+}
+
+// src/hooks/useProduct.ts
 var productCache = /* @__PURE__ */ new Map();
 var CACHE_DURATION3 = 5 * 60 * 1e3;
-function routeFor(config) {
-  return config?.api?.getProduct || "/api/get-product";
+function cacheKeyFor(config, productRef) {
+  return createTransportCacheKey(config, productRef, productRef);
 }
 async function fetchProduct(productRef, config) {
-  const base = routeFor(config);
-  const url = `${base}?productRef=${encodeURIComponent(productRef)}`;
-  const fetchFn = config?.fetch || fetch;
-  const { headers } = await buildRequestHeaders(config);
-  const res = await fetchFn(url, { method: "GET", headers });
-  if (!res.ok) {
-    const error = new Error(`Failed to fetch product: ${res.statusText || res.status}`);
-    config?.onError?.(error, "getProduct");
-    throw error;
-  }
-  return await res.json();
+  const transport = config?.transport ?? createHttpTransport(config);
+  if (!transport.getProduct) return null;
+  return transport.getProduct(productRef);
 }
 function useProduct(productRef) {
   const { _config } = useSolvaPay();
-  const cacheKey = productRef || "";
+  const cacheKey = productRef ? cacheKeyFor(_config, productRef) : "";
   const [product, setProduct] = (0, import_react8.useState)(
     () => productRef ? productCache.get(cacheKey)?.product ?? null : null
   );
@@ -1572,7 +1746,8 @@ function useProduct(productRef) {
         setError(null);
         return;
       }
-      const cached = productCache.get(productRef);
+      const key = cacheKeyFor(_config, productRef);
+      const cached = productCache.get(key);
       const now = Date.now();
       if (!force && cached?.product && now - cached.timestamp < CACHE_DURATION3) {
         setProduct(cached.product);
@@ -1597,12 +1772,26 @@ function useProduct(productRef) {
         setLoading(true);
         setError(null);
         const promise = fetchProduct(productRef, _config);
-        productCache.set(productRef, { product: null, promise, timestamp: now });
+        productCache.set(key, {
+          product: cached?.product ?? null,
+          promise,
+          timestamp: now
+        });
         const p = await promise;
-        productCache.set(productRef, { product: p, promise: null, timestamp: now });
+        if (p === null) {
+          productCache.set(key, {
+            product: cached?.product ?? null,
+            promise: null,
+            timestamp: cached?.timestamp ?? now
+          });
+          setProduct(cached?.product ?? null);
+          setLoading(false);
+          return;
+        }
+        productCache.set(key, { product: p, promise: null, timestamp: now });
         setProduct(p);
       } catch (err) {
-        productCache.delete(productRef);
+        productCache.delete(key);
         setError(err instanceof Error ? err : new Error("Failed to load product"));
       } finally {
         setLoading(false);
@@ -1724,6 +1913,9 @@ var ZERO_DECIMAL_CURRENCIES = /* @__PURE__ */ new Set([
 function getFractionDigits(currency) {
   return ZERO_DECIMAL_CURRENCIES.has(currency.toLowerCase()) ? 0 : 2;
 }
+function getMinorUnitsPerMajor(currency) {
+  return getFractionDigits(currency) === 0 ? 1 : 100;
+}
 function toMajorUnits(amountMinor, currency) {
   const fractionDigits = getFractionDigits(currency);
   return fractionDigits === 0 ? amountMinor : amountMinor / 100;
@@ -1733,7 +1925,10 @@ function formatPrice(amountMinor, currency, opts = {}) {
   if (amountMinor === 0 && free !== "") {
     return free;
   }
-  const fractionDigits = getFractionDigits(currency);
+  const naturalFractionDigits = getFractionDigits(currency);
+  const minorPerMajor = getMinorUnitsPerMajor(currency);
+  const isWhole = amountMinor % minorPerMajor === 0;
+  const fractionDigits = isWhole ? 0 : naturalFractionDigits;
   const major = toMajorUnits(amountMinor, currency);
   const formatter = new Intl.NumberFormat(locale, {
     style: "currency",
@@ -1871,24 +2066,17 @@ var import_react14 = require("react");
 var import_react13 = require("react");
 var merchantCache = /* @__PURE__ */ new Map();
 var CACHE_DURATION4 = 5 * 60 * 1e3;
-function cacheKeyFor(config) {
-  return config?.api?.getMerchant || "/api/merchant";
+function cacheKeyFor2(config) {
+  return createTransportCacheKey(config, config?.api?.getMerchant || "/api/merchant");
 }
 async function fetchMerchant(config) {
-  const route = cacheKeyFor(config);
-  const fetchFn = config?.fetch || fetch;
-  const { headers } = await buildRequestHeaders(config);
-  const res = await fetchFn(route, { method: "GET", headers });
-  if (!res.ok) {
-    const error = new Error(`Failed to fetch merchant: ${res.statusText || res.status}`);
-    config?.onError?.(error, "getMerchant");
-    throw error;
-  }
-  return await res.json();
+  const transport = config?.transport ?? createHttpTransport(config);
+  if (!transport.getMerchant) return null;
+  return transport.getMerchant();
 }
 function useMerchant() {
   const { _config } = useSolvaPay();
-  const key = cacheKeyFor(_config);
+  const key = cacheKeyFor2(_config);
   const [merchant, setMerchant] = (0, import_react13.useState)(
     () => merchantCache.get(key)?.merchant ?? null
   );
@@ -1924,8 +2112,22 @@ function useMerchant() {
         setLoading(true);
         setError(null);
         const promise = fetchMerchant(_config);
-        merchantCache.set(key, { merchant: null, promise, timestamp: now });
+        merchantCache.set(key, {
+          merchant: cached?.merchant ?? null,
+          promise,
+          timestamp: now
+        });
         const m = await promise;
+        if (m === null) {
+          merchantCache.set(key, {
+            merchant: cached?.merchant ?? null,
+            promise: null,
+            timestamp: cached?.timestamp ?? now
+          });
+          setMerchant(cached?.merchant ?? null);
+          setLoading(false);
+          return;
+        }
         merchantCache.set(key, { merchant: m, promise: null, timestamp: now });
         setMerchant(m);
       } catch (err) {
@@ -2038,31 +2240,36 @@ var MandateText = (0, import_react14.forwardRef)(
 
 // src/components/Spinner.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Spinner = ({
-  className = "",
-  size = "md"
-}) => {
-  const sizeClasses = {
-    sm: "h-4 w-4",
-    md: "h-5 w-5",
-    lg: "h-6 w-6"
-  };
+var SIZE_PX = { sm: 16, md: 20, lg: 24 };
+var Spinner = ({ className, size = "md" }) => {
+  const px = SIZE_PX[size];
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "svg",
     {
-      className: `animate-spin ${sizeClasses[size]} ${className}`,
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
+      "data-solvapay-spinner": "",
+      className,
+      width: px,
+      height: px,
       viewBox: "0 0 24 24",
-      role: "status",
-      "aria-busy": "true",
+      fill: "none",
+      "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4",
+            strokeOpacity: "0.25"
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "path",
           {
-            className: "opacity-75",
             fill: "currentColor",
+            fillOpacity: "0.75",
             d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
           }
         )
@@ -2080,6 +2287,13 @@ async function confirmPayment(input) {
       if (!paymentElement) {
         return { status: "error", message: copy.errors.cardElementMissing };
       }
+      const { error: submitError } = await elements.submit();
+      if (submitError) {
+        return {
+          status: "error",
+          message: submitError.message || copy.errors.paymentUnexpected
+        };
+      }
       const { error: error2, paymentIntent: paymentIntent2 } = await stripe.confirmPayment({
         elements,
         clientSecret,
@@ -2394,7 +2608,11 @@ var PaidInner = ({
   const copy = useCopy();
   const customer = useCustomer();
   const { processPayment } = useSolvaPay();
-  const { refetch } = usePurchase();
+  const { refetch, hasPaidPurchase } = usePurchase();
+  const hasPaidPurchaseRef = (0, import_react15.useRef)(hasPaidPurchase);
+  (0, import_react15.useEffect)(() => {
+    hasPaidPurchaseRef.current = hasPaidPurchase;
+  }, [hasPaidPurchase]);
   const [elementKind, setElementKind] = (0, import_react15.useState)(
     children ? null : "payment-element"
   );
@@ -2445,14 +2663,34 @@ var PaidInner = ({
       refetchPurchase: refetch,
       copy
     });
-    setIsProcessing(false);
     if (reconcileResult.status === "success") {
       const pi = paymentIntent;
       onSuccess?.(pi);
       const paid = { kind: "paid", paymentIntent: pi };
       onResult?.(paid);
+      const CONFIRMATION_TIMEOUT_MS = 1e4;
+      const startedAt = Date.now();
+      let attempt = 0;
+      while (!hasPaidPurchaseRef.current && Date.now() - startedAt < CONFIRMATION_TIMEOUT_MS) {
+        attempt += 1;
+        await new Promise((r) => setTimeout(r, Math.min(500 * attempt, 1500)));
+        if (hasPaidPurchaseRef.current) break;
+        try {
+          await refetch();
+        } catch {
+        }
+      }
+      if (!hasPaidPurchaseRef.current) {
+        const confirmationMsg = copy.errors.paymentConfirmationDelayed;
+        setError(confirmationMsg);
+        setIsProcessing(false);
+        onError?.(new Error(confirmationMsg));
+        return;
+      }
+      setIsProcessing(false);
       return;
     }
+    setIsProcessing(false);
     const msg = reconcileResult.status === "timeout" ? reconcileResult.error.message : copy.errors.paymentProcessingFailed;
     setError(msg);
     onError?.(reconcileResult.error);
@@ -2953,7 +3191,9 @@ function useTopupAmountSelector(options) {
     if (resolvedAmount < minAmount) {
       setError(
         interpolate(copy.topup.minAmount, {
-          amount: `${currencySymbol}${minAmount}`
+          amount: formatPrice(minAmount * getMinorUnitsPerMajor(currency), currency, {
+            free: ""
+          })
         })
       );
       return false;
@@ -2961,14 +3201,16 @@ function useTopupAmountSelector(options) {
     if (resolvedAmount > maxAmount) {
       setError(
         interpolate(copy.topup.maxAmount, {
-          amount: `${currencySymbol}${maxAmount.toLocaleString()}`
+          amount: formatPrice(maxAmount * getMinorUnitsPerMajor(currency), currency, {
+            free: ""
+          })
         })
       );
       return false;
     }
     setError(null);
     return true;
-  }, [resolvedAmount, minAmount, maxAmount, currencySymbol, copy]);
+  }, [resolvedAmount, minAmount, maxAmount, currency, copy]);
   const reset = (0, import_react16.useCallback)(() => {
     setSelectedAmount(null);
     setCustomAmountRaw("");
@@ -3008,15 +3250,31 @@ function usePickerCtx(part) {
   }
   return ctx;
 }
-var Root3 = (0, import_react18.forwardRef)(function AmountPickerRoot({ currency, minAmount, maxAmount, onChange, asChild, children, ...rest }, forwardedRef) {
+var Root3 = (0, import_react18.forwardRef)(function AmountPickerRoot({
+  currency,
+  minAmount,
+  maxAmount,
+  emit = "major",
+  selector: externalSelector,
+  onChange,
+  asChild,
+  children,
+  ...rest
+}, forwardedRef) {
   const solva = (0, import_react18.useContext)(SolvaPayContext);
   if (!solva) throw new MissingProviderError("AmountPicker");
-  const selector = useTopupAmountSelector({ currency, minAmount, maxAmount });
+  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;
   (0, import_react18.useEffect)(() => {
-    onChange?.(selector.resolvedAmount);
-  }, [selector.resolvedAmount, onChange]);
-  const resolvedAmountMinor = selector.resolvedAmount != null && selector.resolvedAmount > 0 ? Math.round(selector.resolvedAmount * 100) : null;
+    if (emit === "minor") {
+      onChange?.(resolvedAmountMinor);
+    } else {
+      onChange?.(selector.resolvedAmount);
+    }
+  }, [emit, selector.resolvedAmount, resolvedAmountMinor, onChange]);
   const rate = displayExchangeRate ?? 1;
   const estimatedCredits = creditsPerMinorUnit != null && creditsPerMinorUnit > 0 && resolvedAmountMinor != null ? Math.floor(resolvedAmountMinor / rate * creditsPerMinorUnit) : null;
   const isApproximate = rate !== 1;
@@ -3024,12 +3282,23 @@ var Root3 = (0, import_react18.forwardRef)(function AmountPickerRoot({ currency,
     () => ({
       ...selector,
       currency,
+      emit,
       creditsPerMinorUnit,
       displayExchangeRate,
       estimatedCredits,
-      isApproximate
+      isApproximate,
+      resolvedAmountMinor
     }),
-    [selector, currency, creditsPerMinorUnit, displayExchangeRate, estimatedCredits, isApproximate]
+    [
+      selector,
+      currency,
+      emit,
+      creditsPerMinorUnit,
+      displayExchangeRate,
+      estimatedCredits,
+      isApproximate,
+      resolvedAmountMinor
+    ]
   );
   const Comp = asChild ? Slot : "div";
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AmountPickerContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Comp, { ref: forwardedRef, "data-solvapay-amount-picker": "", ...rest, children }) });
@@ -3048,19 +3317,18 @@ var Option = (0, import_react18.forwardRef)(function AmountPickerOption({ asChil
     }),
     ...rest
   };
+  const defaultLabel = formatPrice(
+    amount * getMinorUnitsPerMajor(ctx.currency),
+    ctx.currency,
+    { free: "" }
+  );
   if (asChild) {
     return (
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Slot, { ref: forwardedRef, ...commonProps, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-        ctx.currencySymbol,
-        amount.toLocaleString()
-      ] }) })
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Slot, { ref: forwardedRef, ...commonProps, children: children ?? defaultLabel })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { ref: forwardedRef, type: "button", ...commonProps, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    ctx.currencySymbol,
-    amount.toLocaleString()
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { ref: forwardedRef, type: "button", ...commonProps, children: children ?? defaultLabel });
 });
 var Custom = (0, import_react18.forwardRef)(function AmountPickerCustom({ asChild, onChange, onFocus, ...rest }, forwardedRef) {
   const ctx = usePickerCtx("Custom");
@@ -3092,9 +3360,12 @@ var Confirm = (0, import_react18.forwardRef)(function AmountPickerConfirm({ asCh
   const ctx = usePickerCtx("Confirm");
   const isDisabled = disabled || !ctx.resolvedAmount;
   const handleConfirm = (0, import_react18.useCallback)(() => {
-    if (ctx.validate() && ctx.resolvedAmount != null) {
-      onConfirm?.(ctx.resolvedAmount);
+    if (!ctx.validate()) return;
+    if (ctx.emit === "minor") {
+      if (ctx.resolvedAmountMinor != null) onConfirm?.(ctx.resolvedAmountMinor);
+      return;
     }
+    if (ctx.resolvedAmount != null) onConfirm?.(ctx.resolvedAmount);
   }, [ctx, onConfirm]);
   const commonProps = {
     "data-solvapay-amount-picker-confirm": "",
@@ -3314,6 +3585,14 @@ 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({
       elements,
       clientSecret,
@@ -3817,24 +4096,13 @@ var import_react27 = require("react");
 
 // src/primitives/PlanSelector.tsx
 var import_react25 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var PlanSelectorContext = (0, import_react25.createContext)(null);
-function usePlanSelectorContext(part) {
-  const ctx = (0, import_react25.useContext)(PlanSelectorContext);
-  if (!ctx) {
-    throw new Error(`PlanSelector.${part} must be rendered inside <PlanSelector.Root>.`);
+
+// src/transport/list-plans.ts
+async function defaultListPlans(productRef, config) {
+  const transport = config?.transport;
+  if (transport) {
+    return transport.listPlans ? transport.listPlans(productRef) : plansCache.get(productRef)?.plans ?? [];
   }
-  return ctx;
-}
-var CardContext = (0, import_react25.createContext)(null);
-function useCardContext(part) {
-  const ctx = (0, import_react25.useContext)(CardContext);
-  if (!ctx) {
-    throw new Error(`PlanSelector.${part} must be rendered inside <PlanSelector.Card>.`);
-  }
-  return ctx;
-}
-async function defaultListPlans(productRef, config) {
   const base = config?.api?.listPlans || "/api/list-plans";
   const url = `${base}?productRef=${encodeURIComponent(productRef)}`;
   const fetchFn = config?.fetch || fetch;
@@ -3848,6 +4116,25 @@ async function defaultListPlans(productRef, config) {
   const data = await res.json();
   return data.plans ?? [];
 }
+
+// src/primitives/PlanSelector.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var PlanSelectorContext = (0, import_react25.createContext)(null);
+function usePlanSelectorContext(part) {
+  const ctx = (0, import_react25.useContext)(PlanSelectorContext);
+  if (!ctx) {
+    throw new Error(`PlanSelector.${part} must be rendered inside <PlanSelector.Root>.`);
+  }
+  return ctx;
+}
+var CardContext = (0, import_react25.createContext)(null);
+function useCardContext(part) {
+  const ctx = (0, import_react25.useContext)(CardContext);
+  if (!ctx) {
+    throw new Error(`PlanSelector.${part} must be rendered inside <PlanSelector.Card>.`);
+  }
+  return ctx;
+}
 var Root6 = (0, import_react25.forwardRef)(function PlanSelectorRoot(props, forwardedRef) {
   const {
     productRef,
@@ -3871,7 +4158,7 @@ var Root6 = (0, import_react25.forwardRef)(function PlanSelectorRoot(props, forw
     () => fetcher ?? ((ref) => defaultListPlans(ref, _config)),
     [fetcher, _config]
   );
-  const { plans, selectedPlan, selectPlan, loading, error } = usePlans({
+  const { plans, selectedPlan, selectPlan, setSelectedPlanIndex, loading, error } = usePlans({
     productRef,
     fetcher: effectiveFetcher,
     filter,
@@ -3906,6 +4193,9 @@ var Root6 = (0, import_react25.forwardRef)(function PlanSelectorRoot(props, forw
     },
     [plans, selectPlan, onSelect]
   );
+  const clearSelection = (0, import_react25.useCallback)(() => {
+    setSelectedPlanIndex(-1);
+  }, [setSelectedPlanIndex]);
   const selectedPlanRef = selectedPlan?.reference ?? null;
   const ctx = (0, import_react25.useMemo)(
     () => ({
@@ -3919,7 +4209,8 @@ var Root6 = (0, import_react25.forwardRef)(function PlanSelectorRoot(props, forw
       isCurrent,
       isFree,
       isPopular,
-      select
+      select,
+      clearSelection
     }),
     [
       plans,
@@ -3932,7 +4223,8 @@ var Root6 = (0, import_react25.forwardRef)(function PlanSelectorRoot(props, forw
       isCurrent,
       isFree,
       isPopular,
-      select
+      select,
+      clearSelection
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -4013,9 +4305,11 @@ var Card = (0, import_react25.forwardRef)(function PlanSelectorCard({ asChild, o
 });
 var CardName = (0, import_react25.forwardRef)(function PlanSelectorCardName({ asChild, children, ...rest }, forwardedRef) {
   const card = useCardContext("CardName");
-  if (!card.plan.name) return null;
+  const fallback = card.plan.requiresPayment === false ? "Free" : card.plan.type === "usage-based" ? "Pay as you go" : card.plan.type === "recurring" ? "Plan" : null;
+  const label = card.plan.name ?? fallback;
+  if (!label && children == null) return null;
   const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-card-name": "", ...rest, children: children ?? card.plan.name });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-card-name": "", ...rest, children: children ?? label });
 });
 var CardPrice = (0, import_react25.forwardRef)(function PlanSelectorCardPrice({ asChild, children, ...rest }, forwardedRef) {
   const card = useCardContext("CardPrice");
@@ -4023,14 +4317,25 @@ var CardPrice = (0, import_react25.forwardRef)(function PlanSelectorCardPrice({
   const copy = useCopy();
   const formatted = (0, import_react25.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 formatPrice(card.plan.price ?? 0, card.plan.currency ?? "usd", {
       locale,
       free: copy.interval.free
     });
   }, [
     card.isFree,
+    card.plan.type,
     card.plan.price,
     card.plan.currency,
+    card.plan.creditsPerUnit,
     locale,
     copy.planSelector.freeBadge,
     copy.interval.free
@@ -4041,11 +4346,22 @@ var CardPrice = (0, import_react25.forwardRef)(function PlanSelectorCardPrice({
 var CardInterval = (0, import_react25.forwardRef)(function PlanSelectorCardInterval({ asChild, children, ...rest }, forwardedRef) {
   const card = useCardContext("CardInterval");
   const copy = useCopy();
-  if (card.isFree || !card.plan.interval) return null;
-  const text = interpolate(copy.planSelector.perIntervalShort, { interval: card.plan.interval });
+  if (card.isFree || card.plan.type === "usage-based") return null;
+  const rawInterval = card.plan.interval ?? normalizeBillingCycle(card.plan.billingCycle);
+  if (!rawInterval) return null;
+  const text = interpolate(copy.planSelector.perIntervalShort, { interval: rawInterval });
   const Comp = asChild ? Slot : "span";
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-card-interval": "", ...rest, children: children ?? text });
 });
+function normalizeBillingCycle(cycle) {
+  if (!cycle) return null;
+  const lc = cycle.toLowerCase();
+  if (lc === "monthly" || lc === "month") return "month";
+  if (lc === "yearly" || lc === "annually" || lc === "annual" || lc === "year") return "year";
+  if (lc === "weekly" || lc === "week") return "week";
+  if (lc === "daily" || lc === "day") return "day";
+  return cycle;
+}
 var CardBadge = (0, import_react25.forwardRef)(function PlanSelectorCardBadge({ asChild, children, ...rest }, forwardedRef) {
   const card = useCardContext("CardBadge");
   const copy = useCopy();
@@ -4185,16 +4501,19 @@ var Root7 = (0, import_react26.forwardRef)(function ActivationFlowRoot({
   const retryActivation = (0, import_react26.useCallback)(async () => {
     if (!resolvedPlanRef) return;
     setStep("retrying");
-    const amountMinor = Math.round((amountSelector.resolvedAmount || 0) * 100);
+    const amountMinor2 = Math.round(
+      (amountSelector.resolvedAmount || 0) * getMinorUnitsPerMajor(currency)
+    );
     const rate = displayExchangeRate ?? 1;
     if (creditsPerMinorUnit) {
-      adjustBalance(Math.floor(amountMinor / rate * creditsPerMinorUnit));
+      adjustBalance(Math.floor(amountMinor2 / rate * creditsPerMinorUnit));
     }
     await new Promise((r) => setTimeout(r, retryDelayMs));
     await activate({ productRef, planRef: resolvedPlanRef });
   }, [
     resolvedPlanRef,
     amountSelector.resolvedAmount,
+    currency,
     displayExchangeRate,
     creditsPerMinorUnit,
     adjustBalance,
@@ -4221,7 +4540,9 @@ var Root7 = (0, import_react26.forwardRef)(function ActivationFlowRoot({
     calledSuccessRef.current = false;
     setStep("summary");
   }, [reset]);
-  const amountCents = Math.round((amountSelector.resolvedAmount || 0) * 100);
+  const amountMinor = Math.round(
+    (amountSelector.resolvedAmount || 0) * getMinorUnitsPerMajor(currency)
+  );
   const ctx = (0, import_react26.useMemo)(
     () => ({
       step,
@@ -4229,7 +4550,11 @@ var Root7 = (0, import_react26.forwardRef)(function ActivationFlowRoot({
       productRef,
       planRef: resolvedPlanRef ?? "",
       amountSelector,
-      amountCents,
+      amountMinor,
+      // Deprecated alias — same value as amountMinor so legacy consumers
+      // keep working after the zero-decimal fix (previously this was
+      // `resolvedAmount * 100`, which over-billed JPY/KRW by 100x).
+      amountCents: amountMinor,
       currency,
       activate: handleActivate,
       reset: resetFlow,
@@ -4245,7 +4570,7 @@ var Root7 = (0, import_react26.forwardRef)(function ActivationFlowRoot({
       productRef,
       resolvedPlanRef,
       amountSelector,
-      amountCents,
+      amountMinor,
       currency,
       handleActivate,
       resetFlow,
@@ -4307,7 +4632,7 @@ var ActivateButton = (0, import_react26.forwardRef)(
 var AmountPickerMount = ({ children }) => {
   const ctx = useFlowCtx("AmountPicker");
   if (ctx.step !== "selectAmount") return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { "data-solvapay-activation-flow-amount-picker": "", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AmountPicker.Root, { currency: ctx.currency, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { "data-solvapay-activation-flow-amount-picker": "", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AmountPicker.Root, { currency: ctx.currency, selector: ctx.amountSelector, children }) });
 };
 var ContinueButton = (0, import_react26.forwardRef)(
   function ActivationFlowContinueButton({ asChild, onClick, children, ...rest }, forwardedRef) {
@@ -4450,7 +4775,7 @@ var TopupPaymentStep = () => {
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       TopupForm2,
       {
-        amount: ctx.amountCents,
+        amount: ctx.amountMinor,
         currency: ctx.currency,
         onSuccess: ctx.onTopupSuccess,
         onError: (err) => ctx.onError?.(err instanceof Error ? err : new Error(String(err)))
@@ -4631,26 +4956,12 @@ var CheckoutLayout = ({
     }
   );
 };
-async function defaultListPlans2(productRef, config) {
-  const base = config?.api?.listPlans || "/api/list-plans";
-  const url = `${base}?productRef=${encodeURIComponent(productRef)}`;
-  const fetchFn = config?.fetch || fetch;
-  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}`);
-    config?.onError?.(error, "listPlans");
-    throw error;
-  }
-  const data = await res.json();
-  return data.plans ?? [];
-}
 var SelectStep = ({ productRef, initialPlanRef, filter, sortBy, popularPlanRef, onContinue }) => {
   const copy = useCopy();
   const solva = (0, import_react27.useContext)(SolvaPayContext);
   const config = solva?._config;
   const fetcher = (0, import_react27.useCallback)(
-    (ref) => defaultListPlans2(ref, config),
+    (ref) => defaultListPlans(ref, config),
     [config]
   );
   const { plans, selectedPlan } = usePlans({
@@ -4888,7 +5199,7 @@ function usePurchaseStatus() {
   }, []);
   const purchaseData = (0, import_react30.useMemo)(() => {
     const cancelledPaidPurchases = purchases.filter((p) => {
-      return p.status === "active" && p.cancelledAt && isPaidPurchase2(p);
+      return p.status === "active" && p.cancelledAt && isPaidPurchase2(p) && isPlanPurchase(p);
     });
     const cancelledPurchase = cancelledPaidPurchases.sort(
       (a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
@@ -5259,6 +5570,737 @@ var CreditGate2 = ({
     }
   );
 };
+
+// src/hooks/usePaymentMethod.ts
+var import_react33 = require("react");
+var paymentMethodCache = /* @__PURE__ */ new Map();
+var CACHE_DURATION5 = 5 * 60 * 1e3;
+function cacheKeyFor3(config) {
+  return createTransportCacheKey(
+    config,
+    config?.api?.getPaymentMethod || "/api/payment-method"
+  );
+}
+async function fetchPaymentMethod(config) {
+  const transport = config?.transport ?? createHttpTransport(config);
+  if (!transport.getPaymentMethod) return null;
+  return transport.getPaymentMethod();
+}
+function usePaymentMethod() {
+  const { _config } = useSolvaPay();
+  const key = cacheKeyFor3(_config);
+  const [paymentMethod, setPaymentMethod] = (0, import_react33.useState)(
+    () => paymentMethodCache.get(key)?.paymentMethod ?? null
+  );
+  const [loading, setLoading] = (0, import_react33.useState)(() => {
+    const cached = paymentMethodCache.get(key);
+    return !cached || !cached.paymentMethod && !cached.promise;
+  });
+  const [error, setError] = (0, import_react33.useState)(null);
+  const load = (0, import_react33.useCallback)(
+    async (force = false) => {
+      const cached = paymentMethodCache.get(key);
+      const now = Date.now();
+      if (!force && cached?.paymentMethod && now - cached.timestamp < CACHE_DURATION5) {
+        setPaymentMethod(cached.paymentMethod);
+        setLoading(false);
+        setError(null);
+        return;
+      }
+      if (!force && cached?.promise) {
+        try {
+          setLoading(true);
+          const pm = await cached.promise;
+          setPaymentMethod(pm);
+          setError(null);
+        } catch (err) {
+          setError(err instanceof Error ? err : new Error("Failed to load payment method"));
+        } finally {
+          setLoading(false);
+        }
+        return;
+      }
+      try {
+        setLoading(true);
+        setError(null);
+        const promise = fetchPaymentMethod(_config);
+        paymentMethodCache.set(key, {
+          paymentMethod: cached?.paymentMethod ?? null,
+          promise,
+          timestamp: now
+        });
+        const pm = await promise;
+        if (pm === null) {
+          paymentMethodCache.set(key, {
+            paymentMethod: cached?.paymentMethod ?? null,
+            promise: null,
+            timestamp: cached?.timestamp ?? now
+          });
+          setPaymentMethod(cached?.paymentMethod ?? null);
+          setLoading(false);
+          return;
+        }
+        paymentMethodCache.set(key, { paymentMethod: pm, promise: null, timestamp: now });
+        setPaymentMethod(pm);
+      } catch (err) {
+        paymentMethodCache.delete(key);
+        setError(err instanceof Error ? err : new Error("Failed to load payment method"));
+        setPaymentMethod(null);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [_config, key]
+  );
+  (0, import_react33.useEffect)(() => {
+    load();
+  }, [load]);
+  return {
+    paymentMethod,
+    loading,
+    error,
+    refetch: () => load(true)
+  };
+}
+
+// src/components/UpdatePaymentMethodButton.tsx
+var import_react36 = require("react");
+
+// src/components/LaunchCustomerPortalButton.tsx
+var import_react35 = require("react");
+
+// src/hooks/useTransport.ts
+var import_react34 = require("react");
+function useTransport() {
+  const { _config } = useSolvaPay();
+  return (0, import_react34.useMemo)(() => _config?.transport ?? createHttpTransport(_config), [_config]);
+}
+
+// src/components/ExternalLinkGlyph.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var ExternalLinkGlyph = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    "svg",
+    {
+      className: `solvapay-mcp-external-glyph${className ? ` ${className}` : ""}`,
+      width: "0.9em",
+      height: "0.9em",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M15 3h6v6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "m10 14 11-11" })
+      ]
+    }
+  );
+};
+
+// src/components/LaunchCustomerPortalButton.tsx
+var import_jsx_runtime31 = (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  require("react/jsx-runtime")
+);
+var LaunchCustomerPortalButton = (0, import_react35.forwardRef)(function LaunchCustomerPortalButton2({
+  children,
+  onLaunch,
+  onError,
+  onClick,
+  loadingClassName,
+  errorClassName,
+  asChild,
+  ...rest
+}, forwardedRef) {
+  const transport = useTransport();
+  const copy = useCopy();
+  const [state, setState] = (0, import_react35.useState)({ status: "loading" });
+  const onErrorRef = (0, import_react35.useRef)(onError);
+  (0, import_react35.useEffect)(() => {
+    onErrorRef.current = onError;
+  }, [onError]);
+  (0, import_react35.useEffect)(() => {
+    let cancelled = false;
+    transport.createCustomerSession().then(({ customerUrl }) => {
+      if (cancelled) return;
+      setState({ status: "ready", href: customerUrl });
+    }).catch((err) => {
+      if (cancelled) return;
+      const error = err instanceof Error ? err : new Error(String(err));
+      setState({ status: "error", message: error.message });
+      onErrorRef.current?.(error);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [transport]);
+  if (state.status === "ready") {
+    const label = children ?? copy.customerPortal.launchButton;
+    const labelText = typeof label === "string" ? label : copy.customerPortal.launchButton;
+    const readyProps = {
+      href: state.href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "data-solvapay-launch-customer-portal": "",
+      "data-state": "ready",
+      "aria-label": `${labelText} (opens in a new tab)`,
+      onClick: composeEventHandlers(onClick, () => {
+        onLaunch?.(state.href);
+      }),
+      ...rest
+    };
+    if (asChild) {
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Slot, { ref: forwardedRef, ...readyProps, children: label });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("a", { ref: forwardedRef, ...readyProps, children: [
+      label,
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ExternalLinkGlyph, {})
+    ] });
+  }
+  if (state.status === "error") {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      "button",
+      {
+        type: "button",
+        className: errorClassName,
+        "data-solvapay-launch-customer-portal": "",
+        "data-state": "error",
+        "aria-disabled": true,
+        disabled: true,
+        children: children ?? copy.customerPortal.launchButton
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    "button",
+    {
+      type: "button",
+      className: loadingClassName,
+      "data-solvapay-launch-customer-portal": "",
+      "data-state": "loading",
+      "aria-busy": true,
+      "aria-disabled": true,
+      disabled: true,
+      children: copy.customerPortal.loadingLabel
+    }
+  );
+});
+
+// src/components/UpdatePaymentMethodButton.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var UpdatePaymentMethodButton = (0, import_react36.forwardRef)(function UpdatePaymentMethodButton2({ mode = "portal", children, ...rest }, forwardedRef) {
+  const copy = useCopy();
+  if (mode !== "portal") {
+    throw new Error(
+      `<UpdatePaymentMethodButton mode="${mode}"> is not implemented yet \u2014 use mode="portal" or omit the prop.`
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    LaunchCustomerPortalButton,
+    {
+      ref: forwardedRef,
+      "data-solvapay-update-payment-method": "",
+      ...rest,
+      children: children ?? copy.currentPlan.updatePaymentButton
+    }
+  );
+});
+
+// src/primitives/UsageMeter.tsx
+var import_react38 = require("react");
+
+// src/hooks/useUsage.ts
+var import_react37 = require("react");
+function deriveUsage(purchase) {
+  if (!purchase) return null;
+  const snap = purchase.planSnapshot;
+  const usage = purchase.usage;
+  const meterRef = snap?.meterRef ?? null;
+  const total = typeof snap?.limit === "number" ? snap.limit : null;
+  if (meterRef === null && !usage) return null;
+  const used = typeof usage?.used === "number" ? usage.used : 0;
+  const remaining = total !== null ? Math.max(0, total - used) : null;
+  const percentUsed = total !== null && total > 0 ? Math.min(100, Math.round(used / total * 1e4) / 100) : null;
+  return {
+    meterRef,
+    total,
+    used,
+    remaining,
+    percentUsed,
+    ...usage?.periodStart ? { periodStart: usage.periodStart } : {},
+    ...usage?.periodEnd ? { periodEnd: usage.periodEnd } : {},
+    ...purchase.reference ? { purchaseRef: purchase.reference } : {}
+  };
+}
+function useUsage() {
+  const { activePurchase, refetch: refetchPurchase, loading: purchaseLoading } = usePurchase();
+  const transport = useTransport();
+  const [override, setOverride] = (0, import_react37.useState)(null);
+  const [error, setError] = (0, import_react37.useState)(null);
+  const [transportLoading, setTransportLoading] = (0, import_react37.useState)(false);
+  const derived = (0, import_react37.useMemo)(() => deriveUsage(activePurchase ?? null), [activePurchase]);
+  const activePurchaseRef = activePurchase?.reference ?? null;
+  (0, import_react37.useEffect)(() => {
+    setOverride(null);
+  }, [activePurchaseRef]);
+  const usage = override ?? derived;
+  const refetch = (0, import_react37.useCallback)(async () => {
+    setError(null);
+    if (typeof transport.getUsage === "function") {
+      setTransportLoading(true);
+      try {
+        const next = await transport.getUsage();
+        setOverride(next);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error("Failed to load usage"));
+      } finally {
+        setTransportLoading(false);
+      }
+      return;
+    }
+    try {
+      await refetchPurchase();
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to refetch purchase"));
+    }
+  }, [transport, refetchPurchase]);
+  const percentUsed = usage?.percentUsed ?? null;
+  const isApproachingLimit = percentUsed !== null && percentUsed >= 80 && percentUsed < 100;
+  const isAtLimit = percentUsed !== null && percentUsed >= 100;
+  const isUnlimited = usage !== null && usage.total === null;
+  return {
+    usage,
+    loading: purchaseLoading || transportLoading,
+    error,
+    refetch,
+    percentUsed,
+    isApproachingLimit,
+    isAtLimit,
+    isUnlimited,
+    meterRef: usage?.meterRef ?? null
+  };
+}
+
+// src/primitives/UsageMeter.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var UsageMeterContext = (0, import_react38.createContext)(null);
+function useUsageMeterCtx(part) {
+  const ctx = (0, import_react38.useContext)(UsageMeterContext);
+  if (!ctx) {
+    throw new Error(`UsageMeter.${part} must be rendered inside <UsageMeter.Root>.`);
+  }
+  return ctx;
+}
+var Root10 = (0, import_react38.forwardRef)(function UsageMeterRoot({
+  warningAt = 75,
+  criticalAt = 90,
+  classNames,
+  asChild,
+  usageOverride,
+  children,
+  className,
+  ...rest
+}, forwardedRef) {
+  const hookResult = useUsage();
+  const usage = usageOverride !== void 0 ? usageOverride : hookResult.usage;
+  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 = (0, import_react38.useMemo)(
+    () => ({
+      usage,
+      loading,
+      error: hookResult.error,
+      percentUsed,
+      isApproachingLimit: hookResult.isApproachingLimit,
+      isAtLimit: hookResult.isAtLimit,
+      isUnlimited: hookResult.isUnlimited,
+      state,
+      warningAt,
+      criticalAt
+    }),
+    [
+      usage,
+      loading,
+      hookResult.error,
+      percentUsed,
+      hookResult.isApproachingLimit,
+      hookResult.isAtLimit,
+      hookResult.isUnlimited,
+      state,
+      warningAt,
+      criticalAt
+    ]
+  );
+  const rootClass = [classNames?.root ?? "solvapay-usage-meter", className].filter(Boolean).join(" ");
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(UsageMeterContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    Comp,
+    {
+      ref: forwardedRef,
+      "data-solvapay-usage-meter": "",
+      "data-state": state,
+      className: rootClass,
+      ...rest,
+      children
+    }
+  ) });
+});
+var Bar = (0, import_react38.forwardRef)(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__ */ (0, import_jsx_runtime33.jsx)(
+    "div",
+    {
+      ref: forwardedRef,
+      "data-solvapay-usage-meter-bar": "",
+      "data-state": ctx.state,
+      role: "progressbar",
+      "aria-valuenow": Math.round(width),
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      className: className ?? "solvapay-usage-meter-bar",
+      style: {
+        // Expose as a CSS custom property so default styles can drive
+        // `width: var(--solvapay-usage-meter-fill)` without inline styling.
+        ["--solvapay-usage-meter-fill"]: `${width}%`,
+        ...style
+      },
+      ...rest
+    }
+  );
+});
+var Label = (0, import_react38.forwardRef)(function UsageMeterLabel({ className, children, ...rest }, forwardedRef) {
+  const ctx = useUsageMeterCtx("Label");
+  const copy = useCopy();
+  if (!ctx.usage) return null;
+  if (ctx.isUnlimited) {
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      "span",
+      {
+        ref: forwardedRef,
+        "data-solvapay-usage-meter-label": "",
+        className: className ?? "solvapay-usage-meter-label",
+        ...rest,
+        children: children ?? copy.usage.unlimitedLabel
+      }
+    );
+  }
+  const unit = ctx.usage.meterRef ?? "units";
+  const label = ctx.usage.total !== null ? interpolate(copy.usage.usedLabel, {
+    used: String(ctx.usage.used),
+    total: String(ctx.usage.total),
+    unit
+  }) : interpolate(copy.usage.remainingLabel, {
+    remaining: String(ctx.usage.remaining ?? 0),
+    unit
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "span",
+    {
+      ref: forwardedRef,
+      "data-solvapay-usage-meter-label": "",
+      className: className ?? "solvapay-usage-meter-label",
+      ...rest,
+      children: children ?? label
+    }
+  );
+});
+var Percentage = (0, import_react38.forwardRef)(function UsageMeterPercentage({ className, children, ...rest }, forwardedRef) {
+  const ctx = useUsageMeterCtx("Percentage");
+  const copy = useCopy();
+  if (ctx.percentUsed === null) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "span",
+    {
+      ref: forwardedRef,
+      "data-solvapay-usage-meter-percentage": "",
+      className: className ?? "solvapay-usage-meter-percentage",
+      ...rest,
+      children: children ?? interpolate(copy.usage.percentUsedLabel, { percent: String(Math.round(ctx.percentUsed)) })
+    }
+  );
+});
+function formatResetsIn(copy, periodEnd, nowMs = typeof performance !== "undefined" ? performance.timeOrigin + performance.now() : 0) {
+  const end = new Date(periodEnd).getTime();
+  if (Number.isNaN(end)) return null;
+  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 = (0, import_react38.forwardRef)(function UsageMeterResetsIn({ className, children, ...rest }, forwardedRef) {
+  const ctx = useUsageMeterCtx("ResetsIn");
+  const copy = useCopy();
+  const periodEnd = ctx.usage?.periodEnd;
+  if (!periodEnd) return null;
+  const label = formatResetsIn(copy, periodEnd);
+  if (!label) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "span",
+    {
+      ref: forwardedRef,
+      "data-solvapay-usage-meter-resets-in": "",
+      className: className ?? "solvapay-usage-meter-resets-in",
+      ...rest,
+      children: children ?? label
+    }
+  );
+});
+var Loading7 = (0, import_react38.forwardRef)(function UsageMeterLoading({ className, children, ...rest }, forwardedRef) {
+  const ctx = useUsageMeterCtx("Loading");
+  const copy = useCopy();
+  if (ctx.state !== "loading") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "div",
+    {
+      ref: forwardedRef,
+      "data-solvapay-usage-meter-loading": "",
+      className: className ?? "solvapay-usage-meter-loading",
+      ...rest,
+      children: children ?? copy.usage.loadingLabel
+    }
+  );
+});
+var Empty = (0, import_react38.forwardRef)(function UsageMeterEmpty({ className, children, ...rest }, forwardedRef) {
+  const ctx = useUsageMeterCtx("Empty");
+  const copy = useCopy();
+  if (ctx.loading || ctx.usage !== null) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "div",
+    {
+      ref: forwardedRef,
+      "data-solvapay-usage-meter-empty": "",
+      className: className ?? "solvapay-usage-meter-empty",
+      ...rest,
+      children: children ?? copy.usage.emptyLabel
+    }
+  );
+});
+var UsageMeter = Object.assign(Root10, {
+  Root: Root10,
+  Bar,
+  Label,
+  Percentage,
+  ResetsIn,
+  Loading: Loading7,
+  Empty
+});
+
+// src/components/CurrentPlanCard.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function PlanTypeLine({
+  purchase,
+  formatDate,
+  className
+}) {
+  const copy = useCopy();
+  const planType = purchase.planSnapshot?.planType ?? "one-time";
+  if (planType === "recurring" || purchase.isRecurring) {
+    const date2 = formatDate(purchase.nextBillingDate);
+    if (!date2) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "span",
+      {
+        className,
+        "data-solvapay-current-plan-next-billing": "",
+        children: interpolate(copy.currentPlan.nextBilling, { date: date2 })
+      }
+    );
+  }
+  if (planType === "usage-based") {
+    return null;
+  }
+  const date = formatDate(purchase.endDate);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className, "data-solvapay-current-plan-expires": "", children: date ? interpolate(copy.currentPlan.expiresOn, { date }) : copy.currentPlan.validIndefinitely });
+}
+function PaymentMethodLine({
+  paymentMethod,
+  className
+}) {
+  const copy = useCopy();
+  if (paymentMethod.kind === "none") {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className, "data-solvapay-current-plan-payment-method": "none", children: copy.currentPlan.noPaymentMethod });
+  }
+  const brandDisplay = paymentMethod.brand.charAt(0).toUpperCase() + paymentMethod.brand.slice(1);
+  const label = interpolate(copy.currentPlan.paymentMethod, {
+    brand: brandDisplay,
+    last4: paymentMethod.last4
+  });
+  const expires = interpolate(copy.currentPlan.paymentMethodExpires, {
+    month: String(paymentMethod.expMonth).padStart(2, "0"),
+    year: paymentMethod.expYear
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className, "data-solvapay-current-plan-payment-method": "card", children: [
+    label,
+    ", ",
+    expires
+  ] });
+}
+var CurrentPlanCard = ({
+  hidePaymentMethod,
+  hideCancelButton,
+  hideUpdatePaymentButton,
+  hideUsageMeter,
+  classNames: overrides,
+  className
+}) => {
+  const copy = useCopy();
+  const { activePurchase } = usePurchase();
+  const { formatDate } = usePurchaseStatus();
+  const { paymentMethod } = usePaymentMethod();
+  if (!activePurchase) return null;
+  const planType = activePurchase.planSnapshot?.planType ?? "one-time";
+  const isUsageBased = planType === "usage-based";
+  const amount = activePurchase.originalAmount ?? activePurchase.amount ?? 0;
+  const currency = activePurchase.currency ?? "usd";
+  const cycleKey = activePurchase.billingCycle;
+  const intervalLabel = cycleKey ? copy.currentPlan.cycleUnit[cycleKey] ?? cycleKey : void 0;
+  const priceLabel = formatPrice(amount, currency, {
+    interval: intervalLabel
+  });
+  const planName = activePurchase.planSnapshot?.name ?? activePurchase.productName;
+  const productContext = activePurchase.productName && activePurchase.productName !== planName ? activePurchase.productName : null;
+  const rootClass = [
+    "solvapay-current-plan-card",
+    overrides?.root,
+    className
+  ].filter(Boolean).join(" ");
+  const shouldShowPaymentMethod = !hidePaymentMethod && paymentMethod !== null;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    "div",
+    {
+      className: rootClass,
+      "data-solvapay-current-plan-card": "",
+      "data-plan-type": planType,
+      "data-solvapay-current-plan-ref": activePurchase.planRef ?? void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "h2",
+          {
+            className: overrides?.heading ?? "solvapay-current-plan-heading",
+            "data-solvapay-current-plan-heading": "",
+            children: copy.currentPlan.heading
+          }
+        ),
+        productContext && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "div",
+          {
+            className: overrides?.productContext ?? "solvapay-current-plan-product-context",
+            "data-solvapay-current-plan-product-context": "",
+            children: productContext
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "div",
+          {
+            className: overrides?.planName ?? "solvapay-current-plan-name",
+            "data-solvapay-current-plan-name": "",
+            children: planName
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "div",
+          {
+            className: overrides?.price ?? "solvapay-current-plan-price",
+            "data-solvapay-current-plan-price": "",
+            children: priceLabel
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          PlanTypeLine,
+          {
+            purchase: activePurchase,
+            formatDate,
+            className: overrides?.dateLine ?? "solvapay-current-plan-date-line"
+          }
+        ),
+        isUsageBased && !hideUsageMeter && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "div",
+          {
+            className: overrides?.usageMeter ?? "solvapay-current-plan-usage-meter",
+            "data-solvapay-current-plan-usage-meter": "",
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(UsageMeter.Root, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(UsageMeter.Label, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(UsageMeter.Bar, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(UsageMeter.Percentage, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(UsageMeter.ResetsIn, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(UsageMeter.Loading, {})
+            ] })
+          }
+        ),
+        isUsageBased && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "div",
+          {
+            className: overrides?.balanceLine ?? "solvapay-current-plan-balance-line",
+            "data-solvapay-current-plan-balance-line": "",
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(BalanceBadge, {})
+          }
+        ),
+        shouldShowPaymentMethod && paymentMethod && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          PaymentMethodLine,
+          {
+            paymentMethod,
+            className: overrides?.paymentMethod ?? "solvapay-current-plan-payment-method"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+          "div",
+          {
+            className: overrides?.actions ?? "solvapay-current-plan-actions",
+            "data-solvapay-current-plan-actions": "",
+            children: [
+              !hideUpdatePaymentButton && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(UpdatePaymentMethodButton, {}),
+              !hideCancelButton && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CancelPlanButton, {})
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/hooks/usePaywallResolver.ts
+var import_react39 = require("react");
+function usePaywallResolver(content) {
+  const { activePurchase, hasPaidPurchase, refetch: refetchPurchase } = usePurchase();
+  const { credits, refetch: refetchBalance } = useBalance();
+  const resolved = (0, import_react39.useMemo)(() => {
+    if (!content) return false;
+    const productMatches = !content.product || activePurchase?.productRef === content.product || activePurchase?.productName === content.product;
+    if (content.kind === "payment_required") {
+      return Boolean(hasPaidPurchase && productMatches);
+    }
+    const balance = content.balance;
+    if (balance && typeof balance.remainingUnits === "number" && balance.remainingUnits > 0) {
+      return true;
+    }
+    if (balance && credits != null && balance.creditsPerUnit && credits >= balance.creditsPerUnit) {
+      return true;
+    }
+    return Boolean(productMatches && activePurchase?.status === "active");
+  }, [content, hasPaidPurchase, activePurchase, credits]);
+  const refetch = (0, import_react39.useCallback)(async () => {
+    await Promise.all([
+      refetchPurchase().catch(() => void 0),
+      refetchBalance().catch(() => void 0)
+    ]);
+  }, [refetchPurchase, refetchBalance]);
+  return { resolved, refetch };
+}
+
+// src/transport/types.ts
+var UnsupportedTransportMethodError = class extends Error {
+  method;
+  constructor(method) {
+    super(`SolvaPay transport does not implement "${method}"`);
+    this.name = "UnsupportedTransportMethodError";
+    this.method = method;
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActivationFlow,
@@ -5271,6 +6313,9 @@ var CreditGate2 = ({
   CopyContext,
   CopyProvider,
   CreditGate,
+  CurrentPlanCard,
+  DEFAULT_ROUTES,
+  LaunchCustomerPortalButton,
   MandateText,
   PaymentForm,
   PaymentFormContext,
@@ -5283,7 +6328,10 @@ var CreditGate2 = ({
   Spinner,
   StripePaymentFormWrapper,
   TopupForm,
+  UnsupportedTransportMethodError,
+  UpdatePaymentMethodButton,
   confirmPayment,
+  createHttpTransport,
   defaultAuthAdapter,
   deriveVariant,
   enCopy,
@@ -5291,12 +6339,16 @@ var CreditGate2 = ({
   formatPrice,
   getActivePurchases,
   getCancelledPurchasesWithEndDate,
+  getMinorUnitsPerMajor,
   getMostRecentPurchase,
   getPrimaryPurchase,
   interpolate,
   isPaidPurchase,
+  isPlanPurchase,
+  isTopupPurchase,
   mergeCopy,
   resolveCta,
+  toMajorUnits,
   useActivation,
   useBalance,
   useCheckout,
@@ -5305,6 +6357,8 @@ var CreditGate2 = ({
   useLocale,
   useMerchant,
   usePaymentForm,
+  usePaymentMethod,
+  usePaywallResolver,
   usePlan,
   usePlans,
   useProduct,
@@ -5313,5 +6367,7 @@ var CreditGate2 = ({
   usePurchaseStatus,
   useSolvaPay,
   useTopup,
-  useTopupAmountSelector
+  useTopupAmountSelector,
+  useTransport,
+  useUsage
 });