@solvapay/react 1.0.5 → 1.0.7

package/dist/index.cjs

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
+  BalanceBadge: () => BalanceBadge,
   PaymentForm: () => PaymentForm,
   PlanBadge: () => PlanBadge,
   PlanSelector: () => PlanSelector,
@@ -39,6 +40,7 @@ __export(index_exports, {
   SolvaPayProvider: () => SolvaPayProvider,
   Spinner: () => Spinner,
   StripePaymentFormWrapper: () => StripePaymentFormWrapper,
+  TopupForm: () => TopupForm,
   defaultAuthAdapter: () => defaultAuthAdapter,
   filterPurchases: () => filterPurchases,
   getActivePurchases: () => getActivePurchases,
@@ -46,12 +48,17 @@ __export(index_exports, {
   getMostRecentPurchase: () => getMostRecentPurchase,
   getPrimaryPurchase: () => getPrimaryPurchase,
   isPaidPurchase: () => isPaidPurchase,
+  useActivation: () => useActivation,
+  useBalance: () => useBalance,
   useCheckout: () => useCheckout,
   useCustomer: () => useCustomer,
   usePlans: () => usePlans,
   usePurchase: () => usePurchase,
+  usePurchaseActions: () => usePurchaseActions,
   usePurchaseStatus: () => usePurchaseStatus,
-  useSolvaPay: () => useSolvaPay
+  useSolvaPay: () => useSolvaPay,
+  useTopup: () => useTopup,
+  useTopupAmountSelector: () => useTopupAmountSelector
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -110,13 +117,26 @@ var defaultAuthAdapter = {
   }
 };
 
-// src/SolvaPayProvider.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var SolvaPayContext = (0, import_react.createContext)(null);
+// src/utils/headers.ts
 var CUSTOMER_REF_KEY = "solvapay_customerRef";
 var CUSTOMER_REF_EXPIRY = "solvapay_customerRef_expiry";
 var CUSTOMER_REF_USER_ID_KEY = "solvapay_customerRef_userId";
-var CACHE_DURATION = 24 * 60 * 60 * 1e3;
+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) {
   if (typeof window === "undefined") return null;
   const cached = localStorage.getItem(CUSTOMER_REF_KEY);
@@ -137,6 +157,7 @@ function getCachedCustomerRef(userId) {
   }
   return cached;
 }
+var CACHE_DURATION = 24 * 60 * 60 * 1e3;
 function setCachedCustomerRef(customerRef, userId) {
   if (typeof window === "undefined") return;
   if (userId === void 0 || userId === null) {
@@ -152,41 +173,62 @@ function clearCachedCustomerRef() {
   localStorage.removeItem(CUSTOMER_REF_EXPIRY);
   localStorage.removeItem(CUSTOMER_REF_USER_ID_KEY);
 }
-function getAuthAdapter(config) {
-  if (config?.auth?.adapter) {
-    return config.auth.adapter;
+async function buildRequestHeaders(config) {
+  const adapter = getAuthAdapter(config);
+  const token = await adapter.getToken();
+  const userId = await adapter.getUserId();
+  const cachedRef = getCachedCustomerRef(userId);
+  const headers = {
+    "Content-Type": "application/json"
+  };
+  if (token) {
+    headers["Authorization"] = `Bearer ${token}`;
   }
-  if (config?.auth?.getToken || config?.auth?.getUserId) {
-    return {
-      async getToken() {
-        return config?.auth?.getToken?.() || null;
-      },
-      async getUserId() {
-        return config?.auth?.getUserId?.() || null;
-      }
-    };
+  if (cachedRef) {
+    headers["x-solvapay-customer-ref"] = cachedRef;
   }
-  return defaultAuthAdapter;
+  if (config?.headers) {
+    const custom = typeof config.headers === "function" ? await config.headers() : config.headers;
+    Object.assign(headers, custom);
+  }
+  return { headers, userId };
 }
+
+// src/SolvaPayProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var SolvaPayContext = (0, import_react.createContext)(null);
 var SolvaPayProvider = ({
   config,
   createPayment: customCreatePayment,
   checkPurchase: customCheckPurchase,
   processPayment: customProcessPayment,
+  createTopupPayment: customCreateTopupPayment,
   children
 }) => {
   const [purchaseData, setPurchaseData] = (0, import_react.useState)({
     purchases: []
   });
   const [loading, setLoading] = (0, import_react.useState)(false);
+  const [isRefetching, setIsRefetching] = (0, import_react.useState)(false);
+  const [purchaseError, setPurchaseError] = (0, import_react.useState)(null);
   const [internalCustomerRef, setInternalCustomerRef] = (0, import_react.useState)(void 0);
   const [userId, setUserId] = (0, import_react.useState)(null);
   const [isAuthenticated, setIsAuthenticated] = (0, import_react.useState)(false);
+  const [creditsValue, setCreditsValue] = (0, import_react.useState)(null);
+  const [displayCurrencyValue, setDisplayCurrencyValue] = (0, import_react.useState)(null);
+  const [creditsPerMinorUnitValue, setCreditsPerMinorUnitValue] = (0, import_react.useState)(null);
+  const [displayExchangeRateValue, setDisplayExchangeRateValue] = (0, import_react.useState)(null);
+  const [balanceLoading, setBalanceLoading] = (0, import_react.useState)(false);
+  const balanceInFlightRef = (0, import_react.useRef)(false);
+  const balanceLoadedRef = (0, import_react.useRef)(false);
+  const optimisticUntilRef = (0, import_react.useRef)(0);
+  const optimisticTimerRef = (0, import_react.useRef)(null);
+  const fetchBalanceRef = (0, import_react.useRef)(null);
   const inFlightRef = (0, import_react.useRef)(null);
-  const lastFetchedRef = (0, import_react.useRef)(null);
   const checkPurchaseRef = (0, import_react.useRef)(null);
   const createPaymentRef = (0, import_react.useRef)(null);
   const processPaymentRef = (0, import_react.useRef)(null);
+  const createTopupPaymentRef = (0, import_react.useRef)(null);
   const configRef = (0, import_react.useRef)(config);
   const buildDefaultCheckPurchaseRef = (0, import_react.useRef)(
     null
@@ -203,31 +245,15 @@ var SolvaPayProvider = ({
   (0, import_react.useEffect)(() => {
     processPaymentRef.current = customProcessPayment || null;
   }, [customProcessPayment]);
+  (0, import_react.useEffect)(() => {
+    createTopupPaymentRef.current = customCreateTopupPayment || null;
+  }, [customCreateTopupPayment]);
   const buildDefaultCheckPurchase = (0, import_react.useCallback)(async () => {
     const currentConfig = configRef.current;
-    const adapter = getAuthAdapter(currentConfig);
-    const token = await adapter.getToken();
-    const detectedUserId = await adapter.getUserId();
+    const { headers } = await buildRequestHeaders(currentConfig);
     const route = currentConfig?.api?.checkPurchase || "/api/check-purchase";
     const fetchFn = currentConfig?.fetch || fetch;
-    const cachedRef = getCachedCustomerRef(detectedUserId);
-    const headers = {
-      "Content-Type": "application/json"
-    };
-    if (token) {
-      headers["Authorization"] = `Bearer ${token}`;
-    }
-    if (cachedRef) {
-      headers["x-solvapay-customer-ref"] = cachedRef;
-    }
-    if (currentConfig?.headers) {
-      const customHeaders = typeof currentConfig.headers === "function" ? await currentConfig.headers() : currentConfig.headers;
-      Object.assign(headers, customHeaders);
-    }
-    const res = await fetchFn(route, {
-      method: "GET",
-      headers
-    });
+    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");
@@ -241,26 +267,13 @@ var SolvaPayProvider = ({
   const buildDefaultCreatePayment = (0, import_react.useCallback)(
     async (params) => {
       const currentConfig = configRef.current;
-      const adapter = getAuthAdapter(currentConfig);
-      const token = await adapter.getToken();
-      const detectedUserId = await adapter.getUserId();
+      const { headers } = await buildRequestHeaders(currentConfig);
       const route = currentConfig?.api?.createPayment || "/api/create-payment-intent";
       const fetchFn = currentConfig?.fetch || fetch;
-      const cachedRef = getCachedCustomerRef(detectedUserId);
-      const headers = {
-        "Content-Type": "application/json"
-      };
-      if (token) {
-        headers["Authorization"] = `Bearer ${token}`;
-      }
-      if (cachedRef) {
-        headers["x-solvapay-customer-ref"] = cachedRef;
+      const body = {};
+      if (params.planRef) {
+        body.planRef = params.planRef;
       }
-      if (currentConfig?.headers) {
-        const customHeaders = typeof currentConfig.headers === "function" ? await currentConfig.headers() : currentConfig.headers;
-        Object.assign(headers, customHeaders);
-      }
-      const body = { planRef: params.planRef };
       if (params.productRef) {
         body.productRef = params.productRef;
       }
@@ -281,25 +294,9 @@ var SolvaPayProvider = ({
   const buildDefaultProcessPayment = (0, import_react.useCallback)(
     async (params) => {
       const currentConfig = configRef.current;
-      const adapter = getAuthAdapter(currentConfig);
-      const token = await adapter.getToken();
-      const detectedUserId = await adapter.getUserId();
+      const { headers } = await buildRequestHeaders(currentConfig);
       const route = currentConfig?.api?.processPayment || "/api/process-payment";
       const fetchFn = currentConfig?.fetch || fetch;
-      const cachedRef = getCachedCustomerRef(detectedUserId);
-      const headers = {
-        "Content-Type": "application/json"
-      };
-      if (token) {
-        headers["Authorization"] = `Bearer ${token}`;
-      }
-      if (cachedRef) {
-        headers["x-solvapay-customer-ref"] = cachedRef;
-      }
-      if (currentConfig?.headers) {
-        const customHeaders = typeof currentConfig.headers === "function" ? await currentConfig.headers() : currentConfig.headers;
-        Object.assign(headers, customHeaders);
-      }
       const res = await fetchFn(route, {
         method: "POST",
         headers,
@@ -314,6 +311,86 @@ var SolvaPayProvider = ({
     },
     []
   );
+  const buildDefaultCreateTopupPayment = (0, import_react.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_react.useCallback)(async () => {
+    if (optimisticUntilRef.current > Date.now()) return;
+    if (!isAuthenticated && !internalCustomerRef) {
+      setCreditsValue(null);
+      setDisplayCurrencyValue(null);
+      setCreditsPerMinorUnitValue(null);
+      setDisplayExchangeRateValue(null);
+      setBalanceLoading(false);
+      balanceLoadedRef.current = false;
+      return;
+    }
+    if (balanceInFlightRef.current) return;
+    balanceInFlightRef.current = true;
+    if (!balanceLoadedRef.current) {
+      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);
+        return;
+      }
+      const data = await res.json();
+      setCreditsValue(data.credits ?? null);
+      setDisplayCurrencyValue(data.displayCurrency ?? null);
+      setCreditsPerMinorUnitValue(data.creditsPerMinorUnit ?? null);
+      setDisplayExchangeRateValue(data.displayExchangeRate ?? null);
+      balanceLoadedRef.current = true;
+    } catch (error) {
+      console.error("[SolvaPayProvider] Failed to fetch balance:", error);
+    } finally {
+      setBalanceLoading(false);
+      balanceInFlightRef.current = false;
+    }
+  }, [isAuthenticated, internalCustomerRef]);
+  (0, import_react.useEffect)(() => {
+    fetchBalanceRef.current = fetchBalanceImpl;
+  }, [fetchBalanceImpl]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (optimisticTimerRef.current) clearTimeout(optimisticTimerRef.current);
+    };
+  }, []);
+  const OPTIMISTIC_GRACE_MS = 8e3;
+  const adjustBalanceImpl = (0, import_react.useCallback)((credits) => {
+    setCreditsValue((prev) => (prev ?? 0) + credits);
+    optimisticUntilRef.current = Date.now() + OPTIMISTIC_GRACE_MS;
+    if (optimisticTimerRef.current) clearTimeout(optimisticTimerRef.current);
+    optimisticTimerRef.current = setTimeout(() => {
+      optimisticUntilRef.current = 0;
+      fetchBalanceRef.current?.();
+    }, OPTIMISTIC_GRACE_MS);
+  }, []);
   const _checkPurchase = (0, import_react.useCallback)(async () => {
     if (checkPurchaseRef.current) {
       return checkPurchaseRef.current();
@@ -341,6 +418,15 @@ var SolvaPayProvider = ({
     },
     [buildDefaultProcessPayment]
   );
+  const createTopupPayment = (0, import_react.useCallback)(
+    async (params) => {
+      if (createTopupPaymentRef.current) {
+        return createTopupPaymentRef.current(params);
+      }
+      return buildDefaultCreateTopupPayment(params);
+    },
+    [buildDefaultCreateTopupPayment]
+  );
   (0, import_react.useEffect)(() => {
     const detectAuth = async () => {
       const currentConfig = configRef.current;
@@ -366,27 +452,30 @@ var SolvaPayProvider = ({
       }
     };
     detectAuth();
-    const interval = setInterval(detectAuth, 5e3);
+    const interval = setInterval(detectAuth, 3e4);
     return () => clearInterval(interval);
   }, [userId]);
   const fetchPurchase = (0, import_react.useCallback)(
     async (force = false) => {
       if (!isAuthenticated && !internalCustomerRef) {
         setPurchaseData({ purchases: [] });
+        setPurchaseError(null);
         setLoading(false);
+        setIsRefetching(false);
         inFlightRef.current = null;
-        lastFetchedRef.current = null;
         return;
       }
       const cacheKey = internalCustomerRef || userId || "anonymous";
-      if (!force && lastFetchedRef.current === cacheKey && inFlightRef.current !== cacheKey) {
-        return;
-      }
-      if (inFlightRef.current === cacheKey) {
+      if (inFlightRef.current === cacheKey && !force) {
         return;
       }
       inFlightRef.current = cacheKey;
-      setLoading(true);
+      const hasExistingData = purchaseData.purchases.length > 0;
+      if (hasExistingData) {
+        setIsRefetching(true);
+      } else {
+        setLoading(true);
+      }
       try {
         const checkFn = checkPurchaseRef.current || buildDefaultCheckPurchaseRef.current;
         if (!checkFn) {
@@ -405,43 +494,111 @@ var SolvaPayProvider = ({
             purchases: filterPurchases(data.purchases || [])
           };
           setPurchaseData(filteredData);
-          lastFetchedRef.current = cacheKey;
+          setPurchaseError(null);
         }
-      } catch (error) {
-        console.error("[SolvaPayProvider] Failed to fetch purchase:", error);
+      } catch (err) {
+        console.error("[SolvaPayProvider] Failed to fetch purchase:", err);
         if (inFlightRef.current === cacheKey) {
-          setPurchaseData({
-            purchases: []
-          });
-          lastFetchedRef.current = cacheKey;
+          setPurchaseError(err instanceof Error ? err : new Error(String(err)));
         }
       } finally {
         if (inFlightRef.current === cacheKey) {
           setLoading(false);
+          setIsRefetching(false);
           inFlightRef.current = null;
         }
       }
     },
-    [isAuthenticated, internalCustomerRef, userId]
+    [isAuthenticated, internalCustomerRef, userId, purchaseData.purchases.length]
   );
   const fetchPurchaseRef = (0, import_react.useRef)(fetchPurchase);
   (0, import_react.useEffect)(() => {
     fetchPurchaseRef.current = fetchPurchase;
   }, [fetchPurchase]);
   const refetchPurchase = (0, import_react.useCallback)(async () => {
-    lastFetchedRef.current = null;
     inFlightRef.current = null;
-    setPurchaseData({ purchases: [] });
     await fetchPurchaseRef.current(true);
   }, []);
+  const cancelRenewal = (0, import_react.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();
+      await refetchPurchase();
+      return result;
+    },
+    [refetchPurchase]
+  );
+  const reactivateRenewal = (0, import_react.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();
+      await refetchPurchase();
+      return result;
+    },
+    [refetchPurchase]
+  );
+  const activatePlan = (0, import_react.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();
+      if (result.status === "activated" || result.status === "already_active") {
+        await refetchPurchase();
+      }
+      return result;
+    },
+    [refetchPurchase]
+  );
   (0, import_react.useEffect)(() => {
-    lastFetchedRef.current = null;
     inFlightRef.current = null;
     if (isAuthenticated || internalCustomerRef) {
       fetchPurchase();
     } else {
       setPurchaseData({ purchases: [] });
+      setPurchaseError(null);
       setLoading(false);
+      setIsRefetching(false);
     }
   }, [isAuthenticated, internalCustomerRef, userId]);
   const updateCustomerRef = (0, import_react.useCallback)(
@@ -462,6 +619,8 @@ var SolvaPayProvider = ({
     )[0] || null;
     return {
       loading,
+      isRefetching,
+      error: purchaseError,
       customerRef: purchaseData.customerRef || internalCustomerRef,
       email: purchaseData.email,
       name: purchaseData.name,
@@ -480,24 +639,47 @@ var SolvaPayProvider = ({
       hasPaidPurchase: activePaidPurchases.length > 0,
       activePaidPurchase
     };
-  }, [loading, purchaseData, internalCustomerRef]);
+  }, [loading, isRefetching, purchaseError, purchaseData, internalCustomerRef]);
+  const balance = (0, import_react.useMemo)(
+    () => ({
+      loading: balanceLoading,
+      credits: creditsValue,
+      displayCurrency: displayCurrencyValue,
+      creditsPerMinorUnit: creditsPerMinorUnitValue,
+      displayExchangeRate: displayExchangeRateValue,
+      refetch: fetchBalanceImpl,
+      adjustBalance: adjustBalanceImpl
+    }),
+    [balanceLoading, creditsValue, displayCurrencyValue, creditsPerMinorUnitValue, displayExchangeRateValue, fetchBalanceImpl, adjustBalanceImpl]
+  );
   const contextValue = (0, import_react.useMemo)(
     () => ({
       purchase,
       refetchPurchase,
       createPayment,
       processPayment,
+      createTopupPayment,
+      cancelRenewal,
+      reactivateRenewal,
+      activatePlan,
       customerRef: purchaseData.customerRef || internalCustomerRef,
-      updateCustomerRef
+      updateCustomerRef,
+      balance,
+      _config: configRef.current
     }),
     [
       purchase,
       refetchPurchase,
       createPayment,
       processPayment,
+      createTopupPayment,
+      cancelRenewal,
+      reactivateRenewal,
+      activatePlan,
       purchaseData.customerRef,
       internalCustomerRef,
-      updateCustomerRef
+      updateCustomerRef,
+      balance
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SolvaPayContext.Provider, { value: contextValue, children });
@@ -528,29 +710,66 @@ var stripePromiseCache = /* @__PURE__ */ new Map();
 function getStripeCacheKey(publishableKey, accountId) {
   return accountId ? `${publishableKey}:${accountId}` : publishableKey;
 }
+async function resolvePlanRef(productRef, fetchFn, headers, listPlansRoute) {
+  const url = `${listPlansRoute}?productRef=${encodeURIComponent(productRef)}`;
+  const res = await fetchFn(url, { method: "GET", headers });
+  if (!res.ok) {
+    throw new Error(`Failed to fetch plans for product "${productRef}": ${res.statusText}`);
+  }
+  const data = await res.json();
+  const allPlans = data.plans ?? [];
+  const activePlans = allPlans.filter((p) => p.isActive !== false && p.status !== "inactive");
+  if (activePlans.length === 0) {
+    throw new Error(
+      `No active plans found for product "${productRef}". Configure at least one plan in the SolvaPay Console.`
+    );
+  }
+  if (activePlans.length === 1) {
+    return activePlans[0].reference;
+  }
+  const defaultPlan = activePlans.find((p) => p.default === true);
+  if (defaultPlan) {
+    return defaultPlan.reference;
+  }
+  throw new Error(
+    `Product "${productRef}" has ${activePlans.length} active plans but none is marked as default. Either pass planRef explicitly, use <PricingSelector> for user selection, or mark one plan as default in the SolvaPay Console.`
+  );
+}
 function useCheckout(options) {
   const { planRef, productRef } = options;
-  const { createPayment, customerRef, updateCustomerRef } = useSolvaPay();
+  const { createPayment, customerRef, updateCustomerRef, _config } = useSolvaPay();
   const [loading, setLoading] = (0, import_react3.useState)(false);
-  const [error, setError] = (0, import_react3.useState)(
-    !planRef || typeof planRef !== "string" ? new Error("useCheckout: planRef parameter is required and must be a string") : null
-  );
+  const [error, setError] = (0, import_react3.useState)(null);
   const [stripePromise, setStripePromise] = (0, import_react3.useState)(null);
   const [clientSecret, setClientSecret] = (0, import_react3.useState)(null);
+  const [resolvedPlanRef, setResolvedPlanRef] = (0, import_react3.useState)(planRef || null);
   const isStartingRef = (0, import_react3.useRef)(false);
   const startCheckout = (0, import_react3.useCallback)(async () => {
     if (isStartingRef.current || loading) {
       return;
     }
-    if (!planRef || typeof planRef !== "string") {
-      setError(new Error("useCheckout: planRef parameter is required and must be a string"));
+    if (!planRef && !productRef) {
+      setError(
+        new Error(
+          "useCheckout: either planRef or productRef is required. Pass planRef directly, or pass productRef to auto-resolve the plan."
+        )
+      );
       return;
     }
     isStartingRef.current = true;
     setLoading(true);
     setError(null);
     try {
-      const result = await createPayment({ planRef, productRef });
+      let effectivePlanRef = planRef;
+      if (!effectivePlanRef && productRef) {
+        const listPlansRoute = _config?.api?.listPlans || "/api/list-plans";
+        effectivePlanRef = await resolvePlanRef(productRef, fetch, {}, listPlansRoute);
+        setResolvedPlanRef(effectivePlanRef);
+      }
+      if (!effectivePlanRef) {
+        throw new Error("Could not determine plan reference for checkout");
+      }
+      const result = await createPayment({ planRef: effectivePlanRef, productRef });
       if (!result || typeof result !== "object") {
         throw new Error("Invalid payment intent response from server");
       }
@@ -579,19 +798,21 @@ function useCheckout(options) {
       setLoading(false);
       isStartingRef.current = false;
     }
-  }, [planRef, productRef, createPayment, updateCustomerRef, loading]);
+  }, [planRef, productRef, createPayment, updateCustomerRef, loading, _config]);
   const reset = (0, import_react3.useCallback)(() => {
     isStartingRef.current = false;
     setLoading(false);
     setError(null);
     setStripePromise(null);
     setClientSecret(null);
-  }, []);
+    setResolvedPlanRef(planRef || null);
+  }, [planRef]);
   return {
     loading,
     error,
     stripePromise,
     clientSecret,
+    resolvedPlanRef,
     startCheckout,
     reset
   };
@@ -759,14 +980,16 @@ var StripePaymentFormWrapper = ({
   const cardElementOptions = {
     style: {
       base: {
-        fontSize: "16px",
-        color: "#424770",
+        fontSize: "17px",
+        lineHeight: "24px",
+        color: "#1e293b",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
         "::placeholder": {
-          color: "#aab7c4"
+          color: "#94a3b8"
         }
       },
       invalid: {
-        color: "#9e2146"
+        color: "#dc2626"
       }
     },
     hidePostalCode: true
@@ -786,22 +1009,7 @@ var StripePaymentFormWrapper = ({
           }
         }
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "div",
-      {
-        style: {
-          padding: "12px",
-          border: "1px solid #cbd5e1",
-          borderRadius: "0.375rem",
-          backgroundColor: "white",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          minHeight: "40px"
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: "sm" })
-      }
-    ),
+    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", minHeight: "52px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: "sm" }) }),
     message && !isSuccess && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "alert", "aria-live": "assertive", "aria-atomic": "true", children: message }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "button",
@@ -833,88 +1041,62 @@ var PaymentForm = ({
   className,
   buttonClassName
 }) => {
-  const validPlanRef = planRef && typeof planRef === "string" ? planRef : "";
   const {
     loading: checkoutLoading,
     error: checkoutError,
     clientSecret,
     startCheckout,
-    stripePromise
-  } = useCheckout({ planRef: validPlanRef, productRef });
+    stripePromise,
+    resolvedPlanRef
+  } = useCheckout({ planRef, productRef });
   const { refetch } = usePurchase();
   const { processPayment } = useSolvaPay();
   const hasInitializedRef = (0, import_react5.useRef)(false);
+  const hasPlanOrProduct = !!(planRef || productRef);
   (0, import_react5.useEffect)(() => {
-    if (!hasInitializedRef.current && validPlanRef && !checkoutLoading && !checkoutError && !clientSecret) {
+    if (!hasInitializedRef.current && hasPlanOrProduct && !checkoutLoading && !checkoutError && !clientSecret) {
       hasInitializedRef.current = true;
       startCheckout().catch(() => {
         hasInitializedRef.current = false;
       });
     }
-    if (validPlanRef && clientSecret) {
+    if (hasPlanOrProduct && clientSecret) {
       hasInitializedRef.current = true;
     }
-  }, [validPlanRef, checkoutLoading, checkoutError, clientSecret, startCheckout]);
+  }, [hasPlanOrProduct, checkoutLoading, checkoutError, clientSecret, startCheckout]);
+  const effectivePlanRef = planRef || resolvedPlanRef;
   const handleSuccess = (0, import_react5.useCallback)(
     async (paymentIntent) => {
-      let processingTimeout = false;
-      let processingResult = null;
       const paymentIntentAny = paymentIntent;
       if (processPayment && productRef) {
         try {
           const result = await processPayment({
             paymentIntentId: paymentIntentAny.id,
             productRef,
-            planRef
+            planRef: effectivePlanRef || void 0
           });
-          processingResult = result;
           const isTimeout = result?.status === "timeout";
-          processingTimeout = isTimeout;
           if (isTimeout) {
             for (let attempt = 1; attempt <= 5; attempt++) {
-              const delay = attempt * 1e3;
-              await new Promise((resolve) => setTimeout(resolve, delay));
+              await new Promise((resolve) => setTimeout(resolve, attempt * 1e3));
               await refetch();
             }
-            if (onSuccess) {
-              await onSuccess({
-                ...paymentIntentAny,
-                _processingTimeout: processingTimeout,
-                _processingResult: processingResult
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              });
-            }
-            throw new Error("Payment processing timed out");
-          } else {
-            await refetch();
+            const err = new Error("Payment processing timed out \u2014 webhooks may not be configured");
+            onError?.(err);
+            return;
           }
+          await refetch();
         } catch (error) {
           console.error("[PaymentForm] Failed to process payment:", error);
-          if (onSuccess) {
-            try {
-              await onSuccess({
-                ...paymentIntentAny,
-                _processingError: error
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              });
-            } catch {
-            }
-          }
-          throw error;
+          onError?.(error instanceof Error ? error : new Error(String(error)));
+          return;
         }
       } else {
         await refetch();
       }
-      if (onSuccess && !processingTimeout) {
-        await onSuccess({
-          ...paymentIntentAny,
-          _processingTimeout: processingTimeout,
-          _processingResult: processingResult
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        });
-      }
+      onSuccess?.(paymentIntentAny);
     },
-    [processPayment, productRef, planRef, refetch, onSuccess]
+    [processPayment, productRef, effectivePlanRef, refetch, onSuccess, onError]
   );
   const handleError = (0, import_react5.useCallback)(
     (err) => {
@@ -925,7 +1107,6 @@ var PaymentForm = ({
     [onError]
   );
   const finalReturnUrl = returnUrl || (typeof window !== "undefined" ? window.location.href : "/");
-  const isValidPlanRef = planRef && typeof planRef === "string";
   const hasError = !!checkoutError;
   const hasStripeData = !!(stripePromise && clientSecret);
   const elementsOptions = (0, import_react5.useMemo)(() => {
@@ -939,72 +1120,246 @@ var PaymentForm = ({
     }
   }, [hasStripeData]);
   const shouldRenderElements = hasStripeData || hasMountedElements && stripePromise && clientSecret;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, children: !isValidPlanRef ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: "PaymentForm: planRef is required and must be a string" }) : hasError ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, children: !hasPlanOrProduct ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: "PaymentForm: either planRef or productRef is required" }) : hasError ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: "Payment initialization failed" }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: checkoutError?.message || "Unknown error" })
-  ] }) : shouldRenderElements && elementsOptions ? (
-    // Once we have Stripe data, always render Elements to maintain hook consistency
-    // This prevents hook count mismatches when transitioning between states
+  ] }) : shouldRenderElements && elementsOptions ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_stripe_js2.Elements,
+    {
+      stripe: stripePromise,
+      options: elementsOptions,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        StripePaymentFormWrapper,
+        {
+          onSuccess: handleSuccess,
+          onError: handleError,
+          returnUrl: finalReturnUrl,
+          submitButtonText,
+          buttonClassName,
+          clientSecret
+        }
+      )
+    },
+    clientSecret
+  ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_react_stripe_js2.Elements,
+      "div",
       {
-        stripe: stripePromise,
-        options: elementsOptions,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          StripePaymentFormWrapper,
-          {
-            onSuccess: handleSuccess,
-            onError: handleError,
-            returnUrl: finalReturnUrl,
-            submitButtonText,
-            buttonClassName,
-            clientSecret
-          }
-        )
-      },
-      clientSecret
+        style: {
+          minHeight: "40px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, { size: "md" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        type: "submit",
+        disabled: true,
+        className: buttonClassName,
+        "aria-busy": "false",
+        "aria-disabled": "true",
+        children: submitButtonText
+      }
     )
-  ) : (
-    // Loading state before Stripe data is available
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "div",
-        {
-          style: {
-            minHeight: "40px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, { size: "md" })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "button",
+  ] }) });
+};
+
+// src/TopupForm.tsx
+var import_react7 = require("react");
+var import_react_stripe_js3 = require("@stripe/react-stripe-js");
+
+// src/hooks/useTopup.ts
+var import_react6 = require("react");
+var import_stripe_js2 = require("@stripe/stripe-js");
+var stripePromiseCache2 = /* @__PURE__ */ new Map();
+function getStripeCacheKey2(publishableKey, accountId) {
+  return accountId ? `${publishableKey}:${accountId}` : publishableKey;
+}
+function useTopup(options) {
+  const { amount, currency } = options;
+  const { createTopupPayment, customerRef, updateCustomerRef } = useSolvaPay();
+  const [loading, setLoading] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const [stripePromise, setStripePromise] = (0, import_react6.useState)(null);
+  const [clientSecret, setClientSecret] = (0, import_react6.useState)(null);
+  const isStartingRef = (0, import_react6.useRef)(false);
+  const startTopup = (0, import_react6.useCallback)(async () => {
+    if (isStartingRef.current || loading) {
+      return;
+    }
+    if (!amount || amount <= 0) {
+      setError(new Error("useTopup: amount must be a positive number"));
+      return;
+    }
+    isStartingRef.current = true;
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await createTopupPayment({ amount, currency });
+      if (!result || typeof result !== "object") {
+        throw new Error("Invalid topup payment intent response from server");
+      }
+      if (!result.clientSecret || typeof result.clientSecret !== "string") {
+        throw new Error("Invalid client secret in topup payment intent response");
+      }
+      if (!result.publishableKey || typeof result.publishableKey !== "string") {
+        throw new Error("Invalid publishable key in topup payment intent response");
+      }
+      if (result.customerRef && result.customerRef !== customerRef && updateCustomerRef) {
+        updateCustomerRef(result.customerRef);
+      }
+      const stripeOptions = result.accountId ? { stripeAccount: result.accountId } : {};
+      const cacheKey = getStripeCacheKey2(result.publishableKey, result.accountId);
+      let stripe = stripePromiseCache2.get(cacheKey);
+      if (!stripe) {
+        stripe = (0, import_stripe_js2.loadStripe)(result.publishableKey, stripeOptions);
+        stripePromiseCache2.set(cacheKey, stripe);
+      }
+      setStripePromise(stripe);
+      setClientSecret(result.clientSecret);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Failed to start topup");
+      setError(error2);
+    } finally {
+      setLoading(false);
+      isStartingRef.current = false;
+    }
+  }, [amount, currency, createTopupPayment, customerRef, updateCustomerRef, loading]);
+  const reset = (0, import_react6.useCallback)(() => {
+    isStartingRef.current = false;
+    setLoading(false);
+    setError(null);
+    setStripePromise(null);
+    setClientSecret(null);
+  }, []);
+  return {
+    loading,
+    error,
+    stripePromise,
+    clientSecret,
+    startTopup,
+    reset
+  };
+}
+
+// src/TopupForm.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var TopupForm = ({
+  amount,
+  currency,
+  onSuccess,
+  onError,
+  returnUrl,
+  submitButtonText = "Top Up",
+  className,
+  buttonClassName
+}) => {
+  const {
+    loading: topupLoading,
+    error: topupError,
+    clientSecret,
+    startTopup,
+    stripePromise
+  } = useTopup({ amount, currency });
+  const hasInitializedRef = (0, import_react7.useRef)(false);
+  const hasAmount = amount > 0;
+  (0, import_react7.useEffect)(() => {
+    if (!hasInitializedRef.current && hasAmount && !topupLoading && !topupError && !clientSecret) {
+      hasInitializedRef.current = true;
+      startTopup().catch(() => {
+        hasInitializedRef.current = false;
+      });
+    }
+    if (hasAmount && clientSecret) {
+      hasInitializedRef.current = true;
+    }
+  }, [hasAmount, topupLoading, topupError, clientSecret, startTopup]);
+  const handleSuccess = (0, import_react7.useCallback)(
+    async (paymentIntent) => {
+      if (onSuccess) {
+        await onSuccess(paymentIntent);
+      }
+    },
+    [onSuccess]
+  );
+  const handleError = (0, import_react7.useCallback)(
+    (err) => {
+      if (onError) {
+        onError(err);
+      }
+    },
+    [onError]
+  );
+  const finalReturnUrl = returnUrl || (typeof window !== "undefined" ? window.location.href : "/");
+  const hasError = !!topupError;
+  const hasStripeData = !!(stripePromise && clientSecret);
+  const elementsOptions = (0, import_react7.useMemo)(() => {
+    if (!clientSecret) return void 0;
+    return { clientSecret };
+  }, [clientSecret]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, children: !hasAmount ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: "TopupForm: amount must be a positive number" }) : hasError ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: "Top-up initialization failed" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: topupError?.message || "Unknown error" })
+  ] }) : hasStripeData && elementsOptions ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_react_stripe_js3.Elements,
+    {
+      stripe: stripePromise,
+      options: elementsOptions,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        StripePaymentFormWrapper,
         {
-          type: "submit",
-          disabled: true,
-          className: buttonClassName,
-          "aria-busy": "false",
-          "aria-disabled": "true",
-          children: submitButtonText
+          onSuccess: handleSuccess,
+          onError: handleError,
+          returnUrl: finalReturnUrl,
+          submitButtonText,
+          buttonClassName,
+          clientSecret
         }
       )
-    ] })
-  ) });
+    },
+    clientSecret
+  ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        style: {
+          minHeight: "40px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spinner, { size: "md" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "submit",
+        disabled: true,
+        className: buttonClassName,
+        "aria-busy": "false",
+        "aria-disabled": "true",
+        children: submitButtonText
+      }
+    )
+  ] }) });
 };
 
 // src/components/ProductBadge.tsx
-var import_react6 = __toESM(require("react"), 1);
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react8 = __toESM(require("react"), 1);
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var ProductBadge = ({
   children,
   as: Component = "div",
   className
 }) => {
   const { purchases, loading, hasPaidPurchase, activePurchase } = usePurchase();
-  const [hasLoadedOnce, setHasLoadedOnce] = import_react6.default.useState(false);
-  import_react6.default.useEffect(() => {
+  const [hasLoadedOnce, setHasLoadedOnce] = import_react8.default.useState(false);
+  import_react8.default.useEffect(() => {
     if (!loading) {
       setHasLoadedOnce(true);
     }
@@ -1012,13 +1367,13 @@ var ProductBadge = ({
   const planToDisplay = activePurchase?.productName || null;
   const shouldShow = planToDisplay !== null && (!loading || hasLoadedOnce);
   if (children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: children({ purchases, loading, displayPlan: planToDisplay, shouldShow }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: children({ purchases, loading, displayPlan: planToDisplay, shouldShow }) });
   }
   if (!shouldShow) {
     return null;
   }
   const computedClassName = typeof className === "function" ? className({ purchases }) : className;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Component,
     {
       className: computedClassName,
@@ -1036,12 +1391,12 @@ var ProductBadge = ({
 var PlanBadge = ProductBadge;
 
 // src/components/PurchaseGate.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var PurchaseGate = ({ requirePlan, requireProduct, children }) => {
   const { purchases, loading, hasProduct } = usePurchase();
   const productToCheck = requireProduct || requirePlan;
   const hasAccess = productToCheck ? hasProduct(productToCheck) : purchases.some((p) => p.status === "active");
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: children({
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: children({
     hasAccess,
     purchases,
     loading
@@ -1049,35 +1404,103 @@ var PurchaseGate = ({ requirePlan, requireProduct, children }) => {
 };
 
 // src/components/PricingSelector.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
 
 // src/hooks/usePlans.ts
-var import_react7 = require("react");
+var import_react9 = require("react");
 var plansCache = /* @__PURE__ */ new Map();
 var CACHE_DURATION2 = 5 * 60 * 1e3;
+function processPlans(raw, filter, sortBy) {
+  let result = sortBy ? [...raw].sort(sortBy) : raw;
+  if (filter) result = result.filter(filter);
+  return result;
+}
+function computeInitialIndex(plans, initialPlanRef, autoSelectFirstPaid) {
+  if (plans.length === 0) return 0;
+  if (initialPlanRef) {
+    const idx = plans.findIndex((p) => p.reference === initialPlanRef);
+    if (idx >= 0) return idx;
+  }
+  if (autoSelectFirstPaid) {
+    const idx = plans.findIndex((p) => p.requiresPayment !== false);
+    return idx >= 0 ? idx : 0;
+  }
+  return 0;
+}
 function usePlans(options) {
-  const { fetcher, productRef, filter, sortBy, autoSelectFirstPaid = false } = options;
-  const [plans, setPlans] = (0, import_react7.useState)([]);
-  const [loading, setLoading] = (0, import_react7.useState)(true);
-  const [error, setError] = (0, import_react7.useState)(null);
-  const [selectedPlanIndex, setSelectedPlanIndex] = (0, import_react7.useState)(0);
-  const fetcherRef = (0, import_react7.useRef)(fetcher);
-  const filterRef = (0, import_react7.useRef)(filter);
-  const sortByRef = (0, import_react7.useRef)(sortBy);
-  const autoSelectFirstPaidRef = (0, import_react7.useRef)(autoSelectFirstPaid);
-  (0, import_react7.useEffect)(() => {
+  const {
+    fetcher,
+    productRef,
+    filter,
+    sortBy,
+    autoSelectFirstPaid = false,
+    initialPlanRef,
+    selectionReady = true
+  } = options;
+  const fetcherRef = (0, import_react9.useRef)(fetcher);
+  const filterRef = (0, import_react9.useRef)(filter);
+  const sortByRef = (0, import_react9.useRef)(sortBy);
+  const autoSelectFirstPaidRef = (0, import_react9.useRef)(autoSelectFirstPaid);
+  const initialPlanRefRef = (0, import_react9.useRef)(initialPlanRef);
+  const selectionReadyRef = (0, import_react9.useRef)(selectionReady);
+  const hasAppliedInitialRef = (0, import_react9.useRef)(false);
+  const userHasSelectedRef = (0, import_react9.useRef)(false);
+  const [selectedPlanIndex, setSelectedPlanIndexState] = (0, import_react9.useState)(() => {
+    if (!selectionReady || !productRef) return 0;
+    const cached = plansCache.get(productRef);
+    if (!cached || Date.now() - cached.timestamp >= CACHE_DURATION2 || cached.plans.length === 0) {
+      return 0;
+    }
+    const processed = processPlans(cached.plans, filter, sortBy);
+    if (processed.length === 0) return 0;
+    const idx = computeInitialIndex(processed, initialPlanRef, autoSelectFirstPaid);
+    hasAppliedInitialRef.current = true;
+    return idx;
+  });
+  const [plans, setPlans] = (0, import_react9.useState)(() => {
+    if (!productRef) return [];
+    const cached = plansCache.get(productRef);
+    if (!cached || Date.now() - cached.timestamp >= CACHE_DURATION2 || cached.plans.length === 0) {
+      return [];
+    }
+    return processPlans(cached.plans, filter, sortBy);
+  });
+  const [loading, setLoading] = (0, import_react9.useState)(() => plans.length === 0);
+  const [error, setError] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
     fetcherRef.current = fetcher;
   }, [fetcher]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     filterRef.current = filter;
   }, [filter]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     sortByRef.current = sortBy;
   }, [sortBy]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     autoSelectFirstPaidRef.current = autoSelectFirstPaid;
   }, [autoSelectFirstPaid]);
-  const fetchPlans = (0, import_react7.useCallback)(
+  (0, import_react9.useEffect)(() => {
+    initialPlanRefRef.current = initialPlanRef;
+  }, [initialPlanRef]);
+  (0, import_react9.useEffect)(() => {
+    selectionReadyRef.current = selectionReady;
+  }, [selectionReady]);
+  const setSelectedPlanIndex = (0, import_react9.useCallback)((index) => {
+    userHasSelectedRef.current = true;
+    setSelectedPlanIndexState(index);
+  }, []);
+  const applyInitialSelection = (0, import_react9.useCallback)((processedPlans) => {
+    if (hasAppliedInitialRef.current || userHasSelectedRef.current) return;
+    if (!selectionReadyRef.current || processedPlans.length === 0) return;
+    hasAppliedInitialRef.current = true;
+    const idx = computeInitialIndex(
+      processedPlans,
+      initialPlanRefRef.current,
+      autoSelectFirstPaidRef.current
+    );
+    setSelectedPlanIndexState(idx);
+  }, []);
+  const fetchPlans = (0, import_react9.useCallback)(
     async (force = false) => {
       if (!productRef) {
         setError(new Error("Product reference not configured"));
@@ -1087,34 +1510,29 @@ function usePlans(options) {
       const cached = plansCache.get(productRef);
       const now = Date.now();
       if (!force && cached && now - cached.timestamp < CACHE_DURATION2) {
-        const cachedPlans = cached.plans;
-        let processedPlans = filterRef.current ? cachedPlans.filter(filterRef.current) : cachedPlans;
-        if (sortByRef.current) {
-          processedPlans = [...processedPlans].sort(sortByRef.current);
-        }
+        const processedPlans = processPlans(
+          cached.plans,
+          filterRef.current,
+          sortByRef.current
+        );
         setPlans(processedPlans);
         setLoading(false);
         setError(null);
-        if (autoSelectFirstPaidRef.current && processedPlans.length > 0) {
-          const firstPaidIndex = processedPlans.findIndex((plan) => plan.price && plan.price > 0);
-          setSelectedPlanIndex(firstPaidIndex >= 0 ? firstPaidIndex : 0);
-        }
+        applyInitialSelection(processedPlans);
         return;
       }
       if (cached?.promise) {
         try {
           setLoading(true);
           const fetchedPlans = await cached.promise;
-          let processedPlans = filterRef.current ? fetchedPlans.filter(filterRef.current) : fetchedPlans;
-          if (sortByRef.current) {
-            processedPlans = [...processedPlans].sort(sortByRef.current);
-          }
+          const processedPlans = processPlans(
+            fetchedPlans,
+            filterRef.current,
+            sortByRef.current
+          );
           setPlans(processedPlans);
           setError(null);
-          if (autoSelectFirstPaidRef.current && processedPlans.length > 0) {
-            const firstPaidIndex = processedPlans.findIndex((plan) => plan.price && plan.price > 0);
-            setSelectedPlanIndex(firstPaidIndex >= 0 ? firstPaidIndex : 0);
-          }
+          applyInitialSelection(processedPlans);
         } catch (err) {
           setError(err instanceof Error ? err : new Error("Failed to load plans"));
         } finally {
@@ -1126,26 +1544,16 @@ function usePlans(options) {
         setLoading(true);
         setError(null);
         const fetchPromise = fetcherRef.current(productRef);
-        plansCache.set(productRef, {
-          plans: [],
-          timestamp: now,
-          promise: fetchPromise
-        });
+        plansCache.set(productRef, { plans: [], timestamp: now, promise: fetchPromise });
         const fetchedPlans = await fetchPromise;
-        plansCache.set(productRef, {
-          plans: fetchedPlans,
-          timestamp: now,
-          promise: null
-        });
-        let processedPlans = filterRef.current ? fetchedPlans.filter(filterRef.current) : fetchedPlans;
-        if (sortByRef.current) {
-          processedPlans = [...processedPlans].sort(sortByRef.current);
-        }
+        plansCache.set(productRef, { plans: fetchedPlans, timestamp: now, promise: null });
+        const processedPlans = processPlans(
+          fetchedPlans,
+          filterRef.current,
+          sortByRef.current
+        );
         setPlans(processedPlans);
-        if (autoSelectFirstPaidRef.current && processedPlans.length > 0) {
-          const firstPaidIndex = processedPlans.findIndex((plan) => plan.price && plan.price > 0);
-          setSelectedPlanIndex(firstPaidIndex >= 0 ? firstPaidIndex : 0);
-        }
+        applyInitialSelection(processedPlans);
       } catch (err) {
         plansCache.delete(productRef);
         setError(err instanceof Error ? err : new Error("Failed to load plans"));
@@ -1153,22 +1561,25 @@ function usePlans(options) {
         setLoading(false);
       }
     },
-    [productRef]
+    [productRef, applyInitialSelection]
   );
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     fetchPlans();
   }, [fetchPlans]);
-  const selectedPlan = (0, import_react7.useMemo)(() => {
-    return plans[selectedPlanIndex] || null;
-  }, [plans, selectedPlanIndex]);
-  const selectPlan = (0, import_react7.useCallback)(
+  (0, import_react9.useEffect)(() => {
+    if (hasAppliedInitialRef.current || userHasSelectedRef.current) return;
+    if (!selectionReady || plans.length === 0) return;
+    applyInitialSelection(plans);
+  }, [selectionReady, plans, applyInitialSelection]);
+  const selectedPlan = (0, import_react9.useMemo)(() => plans[selectedPlanIndex] || null, [plans, selectedPlanIndex]);
+  const selectPlan = (0, import_react9.useCallback)(
     (planRef) => {
       const index = plans.findIndex((p) => p.reference === planRef);
       if (index >= 0) {
         setSelectedPlanIndex(index);
       }
     },
-    [plans]
+    [plans, setSelectedPlanIndex]
   );
   return {
     plans,
@@ -1178,13 +1589,13 @@ function usePlans(options) {
     selectedPlan,
     setSelectedPlanIndex,
     selectPlan,
-    refetch: () => fetchPlans(true)
-    // Force refetch
+    refetch: () => fetchPlans(true),
+    isSelectionReady: hasAppliedInitialRef.current
   };
 }
 
 // src/components/PricingSelector.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var PricingSelector = ({
   productRef,
   fetcher,
@@ -1202,26 +1613,26 @@ var PricingSelector = ({
     autoSelectFirstPaid
   });
   const { plans } = plansHook;
-  const isPaidPlan = (0, import_react8.useCallback)(
+  const isPaidPlan = (0, import_react10.useCallback)(
     (planRef) => {
       const plan = plans.find((p) => p.reference === planRef);
-      return plan ? (plan.price ?? 0) > 0 && !plan.isFreeTier : true;
+      return plan ? plan.requiresPayment !== false : true;
     },
     [plans]
   );
-  const activePurchase = (0, import_react8.useMemo)(() => {
+  const activePurchase = (0, import_react10.useMemo)(() => {
     const activePurchases = purchases.filter((p) => p.status === "active");
     return activePurchases.sort(
       (a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
     )[0] || null;
   }, [purchases]);
-  const isCurrentPlan = (0, import_react8.useCallback)(
+  const isCurrentPlan = (0, import_react10.useCallback)(
     (planRef) => {
       return activePurchase?.planSnapshot?.reference === planRef;
     },
     [activePurchase]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: children({
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: children({
     ...plansHook,
     purchases,
     isPaidPlan,
@@ -1230,14 +1641,58 @@ var PricingSelector = ({
 };
 var PlanSelector = PricingSelector;
 
+// src/hooks/useBalance.ts
+var import_react11 = require("react");
+function useBalance() {
+  const { balance } = useSolvaPay();
+  (0, import_react11.useEffect)(() => {
+    balance.refetch();
+  }, [balance.refetch]);
+  return balance;
+}
+
+// src/components/BalanceBadge.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function BalanceBadge({ className, numberOnly, children }) {
+  const { credits, displayCurrency, creditsPerMinorUnit, displayExchangeRate, loading } = useBalance();
+  if (children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: children({ credits, loading, displayCurrency, creditsPerMinorUnit }) });
+  }
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className, "aria-busy": "true" });
+  }
+  if (credits == null) {
+    return null;
+  }
+  const formattedCredits = new Intl.NumberFormat().format(credits);
+  if (numberOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className, children: formattedCredits });
+  }
+  let currencyEquivalent = "";
+  if (displayCurrency && creditsPerMinorUnit) {
+    const usdCents = credits / creditsPerMinorUnit;
+    const displayMajorUnits = usdCents * (displayExchangeRate ?? 1) / 100;
+    currencyEquivalent = ` (~${new Intl.NumberFormat(void 0, {
+      style: "currency",
+      currency: displayCurrency,
+      minimumFractionDigits: 2
+    }).format(displayMajorUnits)})`;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className, children: [
+    formattedCredits,
+    " credits",
+    currencyEquivalent
+  ] });
+}
+
 // src/hooks/usePurchaseStatus.ts
-var import_react9 = require("react");
+var import_react12 = require("react");
 function usePurchaseStatus() {
   const { purchases } = usePurchase();
-  const isPaidPurchase2 = (0, import_react9.useCallback)((p) => {
+  const isPaidPurchase2 = (0, import_react12.useCallback)((p) => {
     return (p.amount ?? 0) > 0;
   }, []);
-  const purchaseData = (0, import_react9.useMemo)(() => {
+  const purchaseData = (0, import_react12.useMemo)(() => {
     const cancelledPaidPurchases = purchases.filter((p) => {
       return p.status === "active" && p.cancelledAt && isPaidPurchase2(p);
     });
@@ -1250,7 +1705,7 @@ function usePurchaseStatus() {
       shouldShowCancelledNotice
     };
   }, [purchases, isPaidPurchase2]);
-  const formatDate = (0, import_react9.useCallback)((dateString) => {
+  const formatDate = (0, import_react12.useCallback)((dateString) => {
     if (!dateString) return null;
     return new Date(dateString).toLocaleDateString("en-US", {
       year: "numeric",
@@ -1258,7 +1713,7 @@ function usePurchaseStatus() {
       day: "numeric"
     });
   }, []);
-  const getDaysUntilExpiration = (0, import_react9.useCallback)((endDate) => {
+  const getDaysUntilExpiration = (0, import_react12.useCallback)((endDate) => {
     if (!endDate) return null;
     const now = /* @__PURE__ */ new Date();
     const expiration = new Date(endDate);
@@ -1273,8 +1728,207 @@ function usePurchaseStatus() {
     getDaysUntilExpiration
   };
 }
+
+// src/hooks/usePurchaseActions.ts
+var import_react13 = require("react");
+function usePurchaseActions() {
+  const ctx = useSolvaPay();
+  const [isCancelling, setIsCancelling] = (0, import_react13.useState)(false);
+  const [isReactivating, setIsReactivating] = (0, import_react13.useState)(false);
+  const [isActivating, setIsActivating] = (0, import_react13.useState)(false);
+  const cancelRenewal = (0, import_react13.useCallback)(
+    async (params) => {
+      setIsCancelling(true);
+      try {
+        return await ctx.cancelRenewal(params);
+      } finally {
+        setIsCancelling(false);
+      }
+    },
+    [ctx.cancelRenewal]
+  );
+  const reactivateRenewal = (0, import_react13.useCallback)(
+    async (params) => {
+      setIsReactivating(true);
+      try {
+        return await ctx.reactivateRenewal(params);
+      } finally {
+        setIsReactivating(false);
+      }
+    },
+    [ctx.reactivateRenewal]
+  );
+  const activatePlan = (0, import_react13.useCallback)(
+    async (params) => {
+      setIsActivating(true);
+      try {
+        return await ctx.activatePlan(params);
+      } finally {
+        setIsActivating(false);
+      }
+    },
+    [ctx.activatePlan]
+  );
+  return {
+    cancelRenewal,
+    reactivateRenewal,
+    activatePlan,
+    isCancelling,
+    isReactivating,
+    isActivating
+  };
+}
+
+// src/hooks/useActivation.ts
+var import_react14 = require("react");
+function useActivation() {
+  const { activatePlan } = useSolvaPay();
+  const [state, setState] = (0, import_react14.useState)("idle");
+  const [error, setError] = (0, import_react14.useState)(null);
+  const [result, setResult] = (0, import_react14.useState)(null);
+  const activate = (0, import_react14.useCallback)(
+    async (params) => {
+      setState("activating");
+      setError(null);
+      setResult(null);
+      try {
+        const data = await activatePlan(params);
+        setResult(data);
+        switch (data.status) {
+          case "activated":
+          case "already_active":
+            setState("activated");
+            break;
+          case "topup_required":
+            setState("topup_required");
+            break;
+          case "payment_required":
+            setError("This plan requires payment. Please select a different plan.");
+            setState("payment_required");
+            break;
+          case "invalid":
+            setError(data.message || "Invalid plan configuration.");
+            setState("error");
+            break;
+          default:
+            setError("Unexpected response from server.");
+            setState("error");
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Activation failed");
+        setState("error");
+      }
+    },
+    [activatePlan]
+  );
+  const reset = (0, import_react14.useCallback)(() => {
+    setState("idle");
+    setError(null);
+    setResult(null);
+  }, []);
+  return { activate, state, error, result, reset };
+}
+
+// src/hooks/useTopupAmountSelector.ts
+var import_react15 = require("react");
+function getQuickAmounts(currency) {
+  switch (currency.toUpperCase()) {
+    case "SEK":
+    case "NOK":
+    case "DKK":
+      return [100, 500, 1e3, 5e3];
+    case "JPY":
+      return [1e3, 5e3, 1e4, 5e4];
+    case "KRW":
+      return [1e4, 5e4, 1e5, 5e5];
+    case "ISK":
+    case "HUF":
+      return [1e3, 5e3, 1e4, 5e4];
+    default:
+      return [10, 50, 100, 500];
+  }
+}
+function getCurrencySymbol(currency) {
+  try {
+    const parts = new Intl.NumberFormat("en", { style: "currency", currency }).formatToParts(0);
+    const sym = parts.find((p) => p.type === "currency");
+    return sym?.value || currency;
+  } catch {
+    return currency;
+  }
+}
+var DEFAULT_MIN = 1;
+var DEFAULT_MAX = 1e5;
+function useTopupAmountSelector(options) {
+  const { currency, minAmount = DEFAULT_MIN, maxAmount = DEFAULT_MAX } = options;
+  const [selectedAmount, setSelectedAmount] = (0, import_react15.useState)(null);
+  const [customAmount, setCustomAmountRaw] = (0, import_react15.useState)("");
+  const [error, setError] = (0, import_react15.useState)(null);
+  const quickAmounts = (0, import_react15.useMemo)(() => getQuickAmounts(currency), [currency]);
+  const currencySymbol = (0, import_react15.useMemo)(() => getCurrencySymbol(currency), [currency]);
+  const resolvedAmount = (0, import_react15.useMemo)(() => {
+    if (customAmount) {
+      const parsed = parseFloat(customAmount);
+      return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+    }
+    return selectedAmount;
+  }, [selectedAmount, customAmount]);
+  const selectQuickAmount = (0, import_react15.useCallback)(
+    (amount) => {
+      setSelectedAmount(amount);
+      setCustomAmountRaw("");
+      setError(null);
+    },
+    []
+  );
+  const setCustomAmount = (0, import_react15.useCallback)(
+    (value) => {
+      const sanitized = value.replace(/[^0-9.]/g, "");
+      const dotIndex = sanitized.indexOf(".");
+      const cleaned = dotIndex === -1 ? sanitized : sanitized.slice(0, dotIndex + 1) + sanitized.slice(dotIndex + 1).replace(/\./g, "");
+      setCustomAmountRaw(cleaned);
+      setSelectedAmount(null);
+      setError(null);
+    },
+    []
+  );
+  const validate = (0, import_react15.useCallback)(() => {
+    if (resolvedAmount == null) {
+      setError("Please select or enter an amount");
+      return false;
+    }
+    if (resolvedAmount < minAmount) {
+      setError(`Minimum amount is ${currencySymbol}${minAmount}`);
+      return false;
+    }
+    if (resolvedAmount > maxAmount) {
+      setError(`Maximum amount is ${currencySymbol}${maxAmount.toLocaleString()}`);
+      return false;
+    }
+    setError(null);
+    return true;
+  }, [resolvedAmount, minAmount, maxAmount, currencySymbol]);
+  const reset = (0, import_react15.useCallback)(() => {
+    setSelectedAmount(null);
+    setCustomAmountRaw("");
+    setError(null);
+  }, []);
+  return {
+    quickAmounts,
+    selectedAmount,
+    customAmount,
+    resolvedAmount,
+    selectQuickAmount,
+    setCustomAmount,
+    error,
+    validate,
+    reset,
+    currencySymbol
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BalanceBadge,
   PaymentForm,
   PlanBadge,
   PlanSelector,
@@ -1284,6 +1938,7 @@ function usePurchaseStatus() {
   SolvaPayProvider,
   Spinner,
   StripePaymentFormWrapper,
+  TopupForm,
   defaultAuthAdapter,
   filterPurchases,
   getActivePurchases,
@@ -1291,10 +1946,15 @@ function usePurchaseStatus() {
   getMostRecentPurchase,
   getPrimaryPurchase,
   isPaidPurchase,
+  useActivation,
+  useBalance,
   useCheckout,
   useCustomer,
   usePlans,
   usePurchase,
+  usePurchaseActions,
   usePurchaseStatus,
-  useSolvaPay
+  useSolvaPay,
+  useTopup,
+  useTopupAmountSelector
 });