@doujins/payments-ui 0.1.17 → 0.1.20

package/dist/index.cjs

@@ -23,7 +23,6 @@ var LabelPrimitive = require('@radix-ui/react-label');
 var SelectPrimitive = require('@radix-ui/react-select');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var TabsPrimitive = require('@radix-ui/react-tabs');
-var QRCode = require('qrcode');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var splToken = require('@solana/spl-token');
@@ -56,7 +55,6 @@ var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
-var QRCode__default = /*#__PURE__*/_interopDefault(QRCode);
 var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 
@@ -294,9 +292,6 @@ var createClient = (config) => {
     deletePaymentMethod(id) {
       return request("DELETE", `/me/payment-methods/${id}`, {});
     },
-    activatePaymentMethod(id) {
-      return request("PUT", `/me/payment-methods/${id}/activate`, {});
-    },
     checkout(payload, idempotencyKey) {
       const key = idempotencyKey ?? crypto.randomUUID();
       return request("POST", "/checkout", {
@@ -306,8 +301,8 @@ var createClient = (config) => {
         }
       });
     },
-    cancelSubscription(feedback) {
-      return request("POST", "/me/subscriptions/cancel", {
+    cancelSubscription(subscriptionId, feedback) {
+      return request("POST", `/me/subscriptions/${subscriptionId}/cancel`, {
         body: feedback ? { feedback } : void 0
       });
     },
@@ -325,19 +320,18 @@ var createClient = (config) => {
       );
       return normalizeList(result);
     },
-    updateSubscriptionPaymentMethod(payload) {
-      return request("PUT", "/me/subscriptions/payment-method", {
+    updateSubscriptionPaymentMethod(subscriptionId, paymentMethodId) {
+      return request("PUT", `/me/subscriptions/${subscriptionId}/payment-method`, {
         body: {
-          subscription_id: payload.subscription_id,
-          payment_method_id: payload.payment_method_id
+          payment_method_id: paymentMethodId
         }
       });
     },
-    resumeSubscription() {
-      return request("POST", "/me/subscriptions/resume");
+    resumeSubscription(subscriptionId) {
+      return request("POST", `/me/subscriptions/${subscriptionId}/resume`);
     },
-    changeSubscription(payload) {
-      return request("POST", "/me/subscriptions/change", {
+    changeSubscription(subscriptionId, payload) {
+      return request("POST", `/me/subscriptions/${subscriptionId}/change-tier`, {
         body: payload
       });
     },
@@ -351,64 +345,23 @@ var createClient = (config) => {
       });
       return normalizeList(result);
     },
-    async getSolanaTokens() {
+    async getSolanaTokens(params) {
       const response = await request(
         "GET",
-        "/solana/tokens"
+        "/solana/tokens",
+        {
+          query: {
+            checkout_session_id: params?.checkoutSessionId,
+            wallet_id: params?.walletId,
+            wallet: params?.wallet,
+            price_id: params?.priceId
+          }
+        }
       );
       if (Array.isArray(response)) {
         return response;
       }
       return response.tokens ?? [];
-    },
-    async createSolanaPayIntent(payload) {
-      const response = await request("POST", "/solana/pay", {
-        body: {
-          price_id: payload.priceId,
-          token: payload.token,
-          ...payload.userWallet ? { user_wallet: payload.userWallet } : {}
-        }
-      });
-      return response;
-    },
-    async getSolanaPayStatus(reference) {
-      const response = await request(
-        "GET",
-        `/solana/pay/${reference}`
-      );
-      if (response.status === "confirmed") {
-        return {
-          status: "confirmed",
-          payment_id: response.payment_id ?? "",
-          transaction: response.signature ?? null,
-          intent_id: response.intent_id
-        };
-      }
-      if (response.status === "expired") {
-        return {
-          status: "failed",
-          payment_id: response.payment_id ?? "",
-          transaction: response.signature ?? null,
-          intent_id: response.intent_id,
-          error_message: "Payment intent expired"
-        };
-      }
-      return {
-        status: "pending",
-        payment_id: response.payment_id ?? "",
-        transaction: response.signature ?? null,
-        intent_id: response.intent_id
-      };
-    },
-    async getPaymentStatus(id) {
-      try {
-        return await request("GET", `/payment/status/${id}`);
-      } catch (error) {
-        if (error instanceof ClientApiError && error.status === 404) {
-          return null;
-        }
-        throw error;
-      }
     }
   };
 };
@@ -1426,201 +1379,12 @@ var usePaymentNotifications = () => {
     notifyError
   };
 };
-var useSolanaQrPayment = (options) => {
-  const { priceId, selectedToken, onSuccess, onError } = options;
-  const { client } = usePaymentContext();
-  const tokenSymbol = selectedToken?.symbol ?? null;
-  const onSuccessRef = React4.useRef(onSuccess);
-  const onErrorRef = React4.useRef(onError);
-  const [intent, setIntent] = React4.useState(null);
-  const [qrDataUri, setQrDataUri] = React4.useState(null);
-  const [isLoading, setIsLoading] = React4.useState(false);
-  const [error, setError] = React4.useState(null);
-  const [timeRemaining, setTimeRemaining] = React4.useState(0);
-  const [refreshNonce, setRefreshNonce] = React4.useState(0);
-  const pollRef = React4.useRef(null);
-  const countdownRef = React4.useRef(null);
-  const clearTimers = React4.useCallback(() => {
-    if (pollRef.current) {
-      clearInterval(pollRef.current);
-      pollRef.current = null;
-    }
-    if (countdownRef.current) {
-      clearInterval(countdownRef.current);
-      countdownRef.current = null;
-    }
-  }, []);
-  React4.useEffect(() => {
-    return () => {
-      clearTimers();
-    };
-  }, [clearTimers]);
-  const resetState = React4.useCallback(
-    (message) => {
-      clearTimers();
-      setIntent(null);
-      setQrDataUri(null);
-      setTimeRemaining(0);
-      setError(message ?? null);
-    },
-    [clearTimers]
-  );
-  React4.useEffect(() => {
-    onSuccessRef.current = onSuccess;
-  }, [onSuccess]);
-  React4.useEffect(() => {
-    onErrorRef.current = onError;
-  }, [onError]);
-  const handleError = React4.useCallback(
-    (message, notifyParent = false) => {
-      console.error("[payments-ui] Solana Pay QR error:", message);
-      clearTimers();
-      resetState(message);
-      if (notifyParent) {
-        onErrorRef.current?.(message);
-      }
-    },
-    [clearTimers, resetState]
-  );
-  const handleSuccess = React4.useCallback(
-    (status) => {
-      clearTimers();
-      resetState(null);
-      console.log("[payments-ui] Solana Pay QR confirmed", {
-        paymentId: status.payment_id,
-        intentId: status.intent_id
-      });
-      const paymentId = status.payment_id ?? void 0;
-      const txId = status.transaction ?? void 0;
-      onSuccessRef.current?.(paymentId, txId);
-    },
-    [clearTimers, resetState]
-  );
-  const pollStatus = React4.useCallback(
-    async (reference) => {
-      try {
-        const status = await client.getSolanaPayStatus(reference);
-        if (status.status === "confirmed") {
-          handleSuccess(status);
-        }
-        if (status.status === "failed") {
-          handleError(
-            status.error_message || "Payment failed. Please try again.",
-            true
-          );
-        }
-      } catch (err) {
-        console.error("Failed to poll Solana Pay status:", err);
-      }
-    },
-    [handleError, handleSuccess, client]
-  );
-  const startCountdown = React4.useCallback(
-    (expiresAt, reference) => {
-      const updateTime = () => {
-        const remaining = Math.max(0, Math.floor(expiresAt - Date.now() / 1e3));
-        setTimeRemaining(remaining);
-        if (remaining === 0) {
-          handleError("Payment intent expired. Please generate a new QR code.");
-        }
-      };
-      updateTime();
-      countdownRef.current = setInterval(updateTime, 1e3);
-      pollRef.current = setInterval(() => void pollStatus(reference), 4e3);
-    },
-    [handleError, pollStatus]
+
+// src/hooks/useSolanaQrPayment.ts
+var useSolanaQrPayment = (_options) => {
+  throw new Error(
+    'useSolanaQrPayment is deprecated. The standalone Solana Pay QR endpoints have been removed. Use the checkout session flow instead: POST /checkout with processor="solana".'
   );
-  const renderQr = React4.useCallback(async (qrIntent) => {
-    try {
-      const dataUri = await QRCode__default.default.toDataURL(qrIntent.url, {
-        width: 320,
-        margin: 1,
-        color: {
-          dark: "#0f1116",
-          light: "#ffffff"
-        }
-      });
-      setQrDataUri(dataUri);
-    } catch (err) {
-      console.error("Failed to render QR code:", err);
-      handleError("Unable to render QR code");
-    }
-  }, [handleError]);
-  React4.useEffect(() => {
-    let cancelled = false;
-    const generateIntent = async () => {
-      clearTimers();
-      if (!tokenSymbol || !priceId) {
-        resetState(null);
-        setIsLoading((prev) => prev ? false : prev);
-        return;
-      }
-      try {
-        setIsLoading(true);
-        setError(null);
-        console.log("[payments-ui] Requesting Solana Pay QR intent", {
-          priceId,
-          token: tokenSymbol
-        });
-        const nextIntent = await client.createSolanaPayIntent({
-          priceId,
-          token: tokenSymbol
-        });
-        if (cancelled) return;
-        setIntent(nextIntent);
-        setTimeRemaining(
-          Math.max(0, Math.floor(nextIntent.expires_at - Date.now() / 1e3))
-        );
-        await renderQr(nextIntent);
-        console.log("[payments-ui] Solana Pay QR ready", {
-          reference: nextIntent.reference
-        });
-        const reference = nextIntent.reference;
-        if (typeof reference === "string" && reference.length > 0) {
-          startCountdown(nextIntent.expires_at, reference);
-          pollStatus(reference);
-        } else {
-          handleError("Payment reference missing from intent", true);
-        }
-      } catch (err) {
-        if (cancelled) return;
-        console.error("Failed to generate Solana Pay QR intent:", err);
-        const message = err instanceof Error ? err.message : "Unable to create Solana Pay QR code";
-        handleError(message);
-      } finally {
-        if (!cancelled) {
-          setIsLoading(false);
-        }
-      }
-    };
-    void generateIntent();
-    return () => {
-      cancelled = true;
-      clearTimers();
-    };
-  }, [
-    clearTimers,
-    handleError,
-    pollStatus,
-    priceId,
-    renderQr,
-    resetState,
-    client,
-    startCountdown,
-    tokenSymbol,
-    refreshNonce
-  ]);
-  const refresh = React4.useCallback(() => {
-    setRefreshNonce((value) => value + 1);
-  }, []);
-  return {
-    intent,
-    qrDataUri,
-    isLoading,
-    error,
-    timeRemaining,
-    refresh
-  };
 };
 var Card = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
@@ -1681,7 +1445,7 @@ var QRCodePayment = ({
   onPaymentError,
   onPaymentSuccess
 }) => {
-  const handleQrSuccess = React4__namespace.default.useCallback(
+  React4__namespace.default.useCallback(
     (paymentId, txId) => {
       if (!paymentId && !txId) {
         onPaymentError("Missing payment confirmation details");
@@ -1692,12 +1456,7 @@ var QRCodePayment = ({
     },
     [onPaymentError, onPaymentSuccess]
   );
-  const { intent, qrDataUri, isLoading, error, timeRemaining, refresh } = useSolanaQrPayment({
-    priceId,
-    selectedToken,
-    onError: onPaymentError,
-    onSuccess: handleQrSuccess
-  });
+  const { intent, qrDataUri, isLoading, error, timeRemaining, refresh } = useSolanaQrPayment();
   if (!selectedToken) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-dashed bg-muted/10 px-4 py-6 text-center text-sm text-muted-foreground", children: "Select a token to continue." });
   }
@@ -1788,49 +1547,88 @@ var PaymentStatus = ({
   }
   return null;
 };
-var useSupportedTokens = () => {
+var useSupportedTokens = (query) => {
   const { client } = usePaymentContext();
   const [tokens, setTokens] = React4.useState([]);
   const [isLoading, setIsLoading] = React4.useState(false);
   const [error, setError] = React4.useState(null);
   const [lastFetched, setLastFetched] = React4.useState(null);
   const CACHE_DURATION = 5 * 60 * 1e3;
-  const tokensRef = React4.useRef(tokens);
-  const lastFetchedRef = React4.useRef(lastFetched);
-  tokensRef.current = tokens;
-  lastFetchedRef.current = lastFetched;
-  const fetchSupportedTokens = React4.useCallback(async () => {
-    if (tokensRef.current.length > 0 && lastFetchedRef.current && Date.now() - lastFetchedRef.current < CACHE_DURATION) {
-      return tokensRef.current;
-    }
-    setIsLoading(true);
-    setError(null);
-    try {
-      console.log("payments-ui: fetching supported Solana tokens");
-      const tokens2 = await client.getSolanaTokens();
-      const sortedTokens = [...tokens2].sort(
-        (a, b) => a.symbol.localeCompare(b.symbol)
-      );
-      setTokens(sortedTokens);
-      console.log("payments-ui: loaded supported tokens", {
-        count: sortedTokens.length
-      });
-      setLastFetched(Date.now());
-      return sortedTokens;
-    } catch (error2) {
-      const errorMessage = error2 instanceof Error ? error2.message : "Failed to fetch supported tokens";
-      setError(errorMessage);
-      console.error("Failed to fetch supported tokens:", error2);
-      return [];
-    } finally {
-      setIsLoading(false);
-    }
-  }, [client]);
+  const cacheRef = React4.useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const queryKey = React4.useMemo(() => {
+    const checkoutSessionId = query?.checkoutSessionId?.trim() || "";
+    const walletId = query?.walletId?.trim() || "";
+    const wallet = query?.wallet?.trim() || "";
+    const priceId = query?.priceId?.trim() || "";
+    return [checkoutSessionId, walletId, wallet, priceId].join("|");
+  }, [query?.checkoutSessionId, query?.walletId, query?.wallet, query?.priceId]);
+  const fetchSupportedTokens = React4.useCallback(
+    async (overrideQuery) => {
+      const checkoutSessionId = overrideQuery?.checkoutSessionId ?? query?.checkoutSessionId;
+      const walletId = overrideQuery?.walletId ?? query?.walletId;
+      const wallet = overrideQuery?.wallet ?? query?.wallet;
+      const priceId = overrideQuery?.priceId ?? query?.priceId;
+      const key = [
+        checkoutSessionId?.trim() || "",
+        walletId?.trim() || "",
+        wallet?.trim() || "",
+        priceId?.trim() || ""
+      ].join("|");
+      const cached = cacheRef.current.get(key);
+      if (cached && Date.now() - cached.fetchedAt < CACHE_DURATION) {
+        setTokens(cached.tokens);
+        setLastFetched(cached.fetchedAt);
+        return cached.tokens;
+      }
+      setIsLoading(true);
+      setError(null);
+      try {
+        console.log("payments-ui: fetching supported Solana tokens", {
+          checkoutSessionId: checkoutSessionId || void 0,
+          walletId: walletId || void 0,
+          wallet: wallet || void 0,
+          priceId: priceId || void 0
+        });
+        const tokens2 = await client.getSolanaTokens({
+          checkoutSessionId,
+          walletId,
+          wallet,
+          priceId
+        });
+        const sortedTokens = [...tokens2].sort(
+          (a, b) => a.symbol.localeCompare(b.symbol)
+        );
+        const fetchedAt = Date.now();
+        cacheRef.current.set(key, { tokens: sortedTokens, fetchedAt });
+        setTokens(sortedTokens);
+        console.log("payments-ui: loaded supported tokens", {
+          count: sortedTokens.length
+        });
+        setLastFetched(fetchedAt);
+        return sortedTokens;
+      } catch (error2) {
+        const errorMessage = error2 instanceof Error ? error2.message : "Failed to fetch supported tokens";
+        setError(errorMessage);
+        console.error("Failed to fetch supported tokens:", error2);
+        return [];
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [
+      CACHE_DURATION,
+      client,
+      query?.checkoutSessionId,
+      query?.priceId,
+      query?.wallet,
+      query?.walletId
+    ]
+  );
   React4.useEffect(() => {
-    if (tokens.length === 0) {
-      fetchSupportedTokens();
-    }
-  }, [tokens.length, fetchSupportedTokens]);
+    void fetchSupportedTokens();
+  }, [fetchSupportedTokens, queryKey]);
   const getTokenBySymbol = React4.useCallback(
     (symbol) => {
       return tokens.find((token) => token.symbol === symbol);
@@ -1862,9 +1660,10 @@ var useSupportedTokens = () => {
     return tokens.filter((token) => ["USDC", "PYUSD"].includes(token.symbol));
   }, [tokens]);
   const refreshTokens = React4.useCallback(async () => {
+    cacheRef.current.delete(queryKey);
     setLastFetched(null);
-    return await fetchSupportedTokens();
-  }, [fetchSupportedTokens]);
+    return await fetchSupportedTokens({ ...query });
+  }, [fetchSupportedTokens, query, queryKey]);
   const isCacheStale = React4.useCallback(() => {
     if (!lastFetched) return true;
     return Date.now() - lastFetched > CACHE_DURATION;
@@ -1933,21 +1732,34 @@ var useSupportedTokens = () => {
 var SolanaPaymentView = ({
   priceId,
   usdAmount,
+  checkoutSessionId,
+  walletId,
+  wallet,
   onSuccess,
   onError,
   onClose
 }) => {
+  const { publicKey } = walletAdapterReact.useWallet();
   const { notifyStatus, notifyError, notifySuccess } = usePaymentNotifications();
   const [paymentState, setPaymentState] = React4.useState("selecting");
   const [errorMessage, setErrorMessage] = React4.useState(null);
   const [transactionId, setTransactionId] = React4.useState(null);
-  const [tokenAmount, setTokenAmount] = React4.useState(0);
   const [selectedTokenSymbol, setSelectedTokenSymbol] = React4.useState(null);
+  const walletAddress = React4.useMemo(() => {
+    if (wallet && wallet.trim()) return wallet.trim();
+    if (!publicKey) return void 0;
+    return publicKey.toBase58();
+  }, [publicKey, wallet]);
   const {
     tokens,
     isLoading: tokensLoading,
     error: tokensError
-  } = useSupportedTokens();
+  } = useSupportedTokens({
+    checkoutSessionId,
+    walletId,
+    wallet: walletAddress,
+    priceId
+  });
   const selectedToken = React4.useMemo(() => {
     if (!tokens.length) return null;
     const explicit = tokens.find((token) => token.symbol === selectedTokenSymbol);
@@ -1959,6 +1771,31 @@ var SolanaPaymentView = ({
       setSelectedTokenSymbol(defaultToken.symbol);
     }
   }, [tokens, selectedTokenSymbol]);
+  const selectedTokenAmount = React4.useMemo(() => {
+    if (!selectedToken || usdAmount === 0) return 0;
+    const quote = selectedToken.quote?.token_amount;
+    if (typeof quote === "string") {
+      const parsed = Number.parseFloat(quote);
+      if (Number.isFinite(parsed)) return parsed;
+    }
+    const price = selectedToken.price ?? 0;
+    if (!price || price <= 0) return 0;
+    return usdAmount / price;
+  }, [selectedToken, usdAmount]);
+  const formatTokenAmount = React4.useCallback((token) => {
+    const quote = token.quote?.token_amount;
+    if (typeof quote === "string" && quote.trim()) {
+      const parsed = Number.parseFloat(quote);
+      if (Number.isFinite(parsed)) {
+        return token.symbol === "SOL" ? parsed.toFixed(4) : parsed.toFixed(2);
+      }
+      return quote;
+    }
+    const price = token.price ?? 0;
+    if (!price || price <= 0) return "0";
+    const approx = usdAmount / price;
+    return token.symbol === "SOL" ? approx.toFixed(4) : approx.toFixed(2);
+  }, [usdAmount]);
   const handlePaymentSuccess = React4.useCallback(
     (result, txId) => {
       const resolvedTx = txId || (typeof result === "string" ? result : result.transaction_id);
@@ -2012,18 +1849,6 @@ var SolanaPaymentView = ({
     resetState();
     onClose?.();
   }, [paymentState, onClose, resetState]);
-  React4.useEffect(() => {
-    if (!selectedToken || usdAmount === 0) {
-      setTokenAmount(0);
-      return;
-    }
-    const price = selectedToken.price ?? 0;
-    if (!price || price <= 0) {
-      setTokenAmount(0);
-      return;
-    }
-    setTokenAmount(usdAmount / price);
-  }, [usdAmount, selectedToken]);
   const handleTokenChange = React4.useCallback((value) => {
     setSelectedTokenSymbol(value);
   }, []);
@@ -2034,7 +1859,7 @@ var SolanaPaymentView = ({
         {
           state: paymentState,
           usdAmount,
-          solAmount: tokenAmount,
+          solAmount: selectedTokenAmount,
           onRetry: handleRetry,
           onClose: handleClose,
           errorMessage,
@@ -2062,9 +1887,9 @@ var SolanaPaymentView = ({
           usdAmount.toFixed(2),
           " USD"
         ] }),
-        selectedToken && tokenAmount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        selectedToken && selectedTokenAmount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
           "\u2248 ",
-          tokenAmount.toFixed(selectedToken.symbol === "SOL" ? 4 : 2),
+          selectedTokenAmount.toFixed(selectedToken.symbol === "SOL" ? 4 : 2),
           " ",
           selectedToken.symbol
         ] })
@@ -2073,13 +1898,22 @@ var SolanaPaymentView = ({
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-foreground", children: "Select token" }),
         /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: selectedToken?.symbol ?? "", onValueChange: handleTokenChange, children: [
           /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "border bg-transparent", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select token" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "max-h-64", children: tokens.map((token) => /* @__PURE__ */ jsxRuntime.jsxs(SelectItem, { value: token.symbol, children: [
-            token.name,
-            " (",
-            token.symbol,
-            ")"
-          ] }, token.symbol)) })
-        ] })
+          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "max-h-64", children: tokens.map((token) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: token.symbol, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              token.name,
+              " (",
+              token.symbol,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              formatTokenAmount(token),
+              " ",
+              token.symbol,
+              token.balance?.amount ? ` \xB7 bal ${token.balance.amount} ${token.symbol}` : null
+            ] })
+          ] }) }, token.symbol)) })
+        ] }),
+        !walletAddress && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Connect a wallet to show token balances." })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         QRCodePayment,
@@ -2136,6 +1970,8 @@ var defaultPaymentExperienceTranslations = {
 var PaymentExperience = ({
   priceId,
   usdAmount,
+  checkoutSessionId,
+  walletId,
   onNewCardPayment,
   onSavedMethodPayment,
   onCcbillPayment,
@@ -2145,6 +1981,7 @@ var PaymentExperience = ({
   onSolanaSuccess,
   onSolanaError,
   initialMode = "cards",
+  userEmail,
   translations
 }) => {
   const t = {
@@ -2167,6 +2004,11 @@ var PaymentExperience = ({
   const [billingDetails, setBillingDetails] = React4.useState(null);
   const [ccbillStatus, setCcbillStatus] = React4.useState("idle");
   const [ccbillError, setCcbillError] = React4.useState(null);
+  const [ccbillModalOpen, setCcbillModalOpen] = React4.useState(false);
+  const [ccbillBilling, setCcbillBilling] = React4.useState(() => {
+    let defaultEmail = userEmail ?? "";
+    return { ...defaultBillingDetails, email: defaultEmail };
+  });
   const { notifyStatus, notifyError } = usePaymentNotifications();
   React4.useEffect(() => {
     setActiveTab(showStored ? "saved" : "new");
@@ -2187,6 +2029,7 @@ var PaymentExperience = ({
       setBillingDetails(null);
       setCcbillStatus("idle");
       setCcbillError(null);
+      setCcbillModalOpen(false);
     }
   }, [showNewCard]);
   const handleBillingChange = React4.useCallback((billing) => {
@@ -2194,6 +2037,42 @@ var PaymentExperience = ({
     setCcbillError(null);
     setCcbillStatus("idle");
   }, []);
+  const openCcbillModal = React4.useCallback(() => {
+    setCcbillError(null);
+    setCcbillStatus("idle");
+    setCcbillBilling((prev) => {
+      let email = prev.email;
+      if (billingDetails && billingDetails.email) {
+        email = billingDetails.email;
+      } else if (typeof window !== "undefined") {
+        try {
+          const config = window.paymentsUiConfig || {};
+          if (config.defaultUser && config.defaultUser.email) {
+            email = config.defaultUser.email;
+          }
+        } catch {
+        }
+      }
+      if (billingDetails) {
+        return {
+          ...billingDetails,
+          email,
+          provider: billingDetails.provider ?? prev.provider ?? defaultBillingDetails.provider
+        };
+      }
+      return { ...prev, email, provider: prev.provider ?? defaultBillingDetails.provider };
+    });
+    setCcbillModalOpen(true);
+  }, [billingDetails]);
+  const handleCcbillFieldChange = React4.useCallback(
+    (field, value) => {
+      setCcbillBilling((prev) => {
+        const provider = prev.provider ?? billingDetails?.provider ?? defaultBillingDetails.provider;
+        return { ...prev, [field]: value, provider };
+      });
+    },
+    [billingDetails]
+  );
   const isBillingComplete = React4.useCallback((billing) => {
     if (!billing) return false;
     return Boolean(
@@ -2255,9 +2134,8 @@ var PaymentExperience = ({
   );
   const handleCcbillPayment = React4.useCallback(async () => {
     if (!onCcbillPayment) return;
-    if (!billingDetails || !isBillingComplete(billingDetails)) {
+    if (!isBillingComplete(ccbillBilling)) {
       const message = t.errorRequiredFields;
-      setActiveTab("new");
       setCcbillStatus("error");
       setCcbillError(message);
       notifyStatus("error", { source: "ccbill" });
@@ -2268,8 +2146,9 @@ var PaymentExperience = ({
       setCcbillStatus("processing");
       setCcbillError(null);
       notifyStatus("processing", { source: "ccbill" });
-      await onCcbillPayment({ billing: billingDetails });
+      await onCcbillPayment({ billing: ccbillBilling });
       setCcbillStatus("success");
+      setCcbillModalOpen(false);
       notifyStatus("success", { source: "ccbill" });
     } catch (error) {
       const message = resolveErrorMessageByCode(
@@ -2283,7 +2162,7 @@ var PaymentExperience = ({
       notifyError(message);
     }
   }, [
-    billingDetails,
+    ccbillBilling,
     isBillingComplete,
     notifyError,
     notifyStatus,
@@ -2310,6 +2189,145 @@ var PaymentExperience = ({
     },
     [onSolanaError]
   );
+  const renderCcbillModal = () => /* @__PURE__ */ jsxRuntime.jsx(
+    Dialog,
+    {
+      open: ccbillModalOpen,
+      onOpenChange: (open) => {
+        setCcbillModalOpen(open);
+        if (!open) {
+          setCcbillStatus("idle");
+          setCcbillError(null);
+        }
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-lg", style: { zIndex: 9999, border: "none" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: t.payWithCcbill }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2 sm:grid-cols-2 sm:gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "ccbill-first-name", children: t.firstName }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Input,
+                {
+                  id: "ccbill-first-name",
+                  value: ccbillBilling.firstName,
+                  onChange: (e) => handleCcbillFieldChange("firstName", e.target.value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "ccbill-last-name", children: t.lastName }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Input,
+                {
+                  id: "ccbill-last-name",
+                  value: ccbillBilling.lastName,
+                  onChange: (e) => handleCcbillFieldChange("lastName", e.target.value)
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "ccbill-email", children: t.email }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                id: "ccbill-email",
+                type: "email",
+                value: ccbillBilling.email,
+                onChange: (e) => handleCcbillFieldChange("email", e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "ccbill-address", children: t.address }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                id: "ccbill-address",
+                value: ccbillBilling.address1,
+                onChange: (e) => handleCcbillFieldChange("address1", e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2 sm:grid-cols-2 sm:gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "ccbill-city", children: t.city }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Input,
+                {
+                  id: "ccbill-city",
+                  value: ccbillBilling.city,
+                  onChange: (e) => handleCcbillFieldChange("city", e.target.value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "ccbill-state", children: t.state }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Input,
+                {
+                  id: "ccbill-state",
+                  value: ccbillBilling.stateRegion ?? "",
+                  onChange: (e) => handleCcbillFieldChange("stateRegion", e.target.value)
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2 sm:grid-cols-2 sm:gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "ccbill-zip", children: t.postalCode }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Input,
+                {
+                  id: "ccbill-zip",
+                  value: ccbillBilling.postalCode,
+                  onChange: (e) => handleCcbillFieldChange("postalCode", e.target.value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "ccbill-country", children: t.country }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                Select,
+                {
+                  value: ccbillBilling.country,
+                  onValueChange: (value) => handleCcbillFieldChange("country", value),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { id: "ccbill-country", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: t.selectCountry || "Select a country" }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: countries.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.code, children: option.name }, option.code)) })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          ccbillError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: ccbillError }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "ghost",
+                type: "button",
+                onClick: () => setCcbillModalOpen(false),
+                disabled: ccbillStatus === "processing",
+                children: t.cancel
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                className: "min-w-[140px] bg-emerald-600 text-white hover:bg-emerald-500",
+                type: "button",
+                disabled: ccbillStatus === "processing",
+                onClick: handleCcbillPayment,
+                children: ccbillStatus === "processing" ? t.processingCcbill : t.payWithCcbill
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  );
   const renderSavedTab = () => {
     if (!showStored) {
       return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: t.savedUnavailable });
@@ -2373,12 +2391,13 @@ var PaymentExperience = ({
         {
           className: "w-full",
           variant: "outline",
+          type: "button",
           disabled: ccbillStatus === "processing",
-          onClick: handleCcbillPayment,
+          onClick: openCcbillModal,
           children: ccbillStatus === "processing" ? t.processingCcbill : t.payWithCcbill
         }
       ),
-      ccbillError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: ccbillError })
+      renderCcbillModal()
     ] });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 pt-4", children: [
@@ -2391,6 +2410,8 @@ var PaymentExperience = ({
       {
         priceId,
         usdAmount,
+        checkoutSessionId,
+        walletId,
         onSuccess: handleSolanaSuccess,
         onError: handleSolanaError,
         onClose: exitSolanaView
@@ -2494,9 +2515,37 @@ var useSubscriptionActions = () => {
     },
     [client]
   );
+  const subscribeWithCCBill = React4.useCallback(
+    async ({
+      priceId,
+      billing,
+      provider,
+      processor = "ccbill",
+      idempotencyKey
+    }) => {
+      const payload = {
+        price_id: ensurePrice(priceId),
+        provider,
+        payment: {
+          processor,
+          email: billing.email,
+          first_name: billing.firstName,
+          last_name: billing.lastName,
+          address1: billing.address1,
+          city: billing.city,
+          state: billing.stateRegion,
+          zip: billing.postalCode,
+          country: billing.country
+        }
+      };
+      return client.checkout(payload, idempotencyKey);
+    },
+    [client]
+  );
   return {
     subscribeWithCard,
-    subscribeWithSavedMethod
+    subscribeWithSavedMethod,
+    subscribeWithCCBill
   };
 };
 var defaultTranslations2 = {
@@ -2509,6 +2558,8 @@ var SubscriptionCheckoutModal = ({
   onOpenChange,
   priceId,
   usdAmount = 0,
+  checkoutSessionId,
+  walletId,
   planName,
   amountLabel,
   billingPeriodLabel,
@@ -2523,7 +2574,7 @@ var SubscriptionCheckoutModal = ({
 }) => {
   const [showSuccess, setShowSuccess] = React4.useState(false);
   const [idempotencyKey, setIdempotencyKey] = React4.useState(() => crypto.randomUUID());
-  const { subscribeWithCard, subscribeWithSavedMethod } = useSubscriptionActions();
+  const { subscribeWithCard, subscribeWithSavedMethod, subscribeWithCCBill } = useSubscriptionActions();
   const t = {
     ...defaultTranslations2,
     ...translations
@@ -2598,10 +2649,10 @@ var SubscriptionCheckoutModal = ({
     handleCheckoutResponse(response);
   };
   const handleCcbillPayment = async ({ billing }) => {
-    const response = await subscribeWithCard({
+    const response = await subscribeWithCCBill({
       billing,
+      provider,
       idempotencyKey,
-      processor: "ccbill",
       priceId: ensurePrice()
     });
     handleCheckoutResponse(response);
@@ -2630,11 +2681,14 @@ var SubscriptionCheckoutModal = ({
             {
               usdAmount,
               priceId: priceId ?? "",
+              checkoutSessionId,
+              walletId,
               initialMode,
               onSolanaError: solanaError,
               onSolanaSuccess: solanaSuccess,
               enableNewCard: Boolean(priceId),
               enableStoredMethods: Boolean(priceId),
+              userEmail: userEmail ?? void 0,
               enableSolanaPay: enableSolanaPay && Boolean(priceId),
               onNewCardPayment: priceId ? handleNewCardPayment : void 0,
               onSavedMethodPayment: priceId ? handleSavedMethodPayment : void 0,
@@ -3095,6 +3149,7 @@ var defaultTranslations3 = {
   cancellationFailed: "Cancellation failed"
 };
 var CancelMembershipDialog = ({
+  subscriptionId,
   minReasonLength = 15,
   onCancelled,
   onNotify,
@@ -3144,13 +3199,17 @@ var CancelMembershipDialog = ({
     }
     setIsSubmitting(true);
     try {
-      await client.cancelSubscription(cancelReason.trim());
+      await client.cancelSubscription(subscriptionId, cancelReason.trim());
       notify({
         title: t.membershipCancelled,
         description: t.cancellationSuccess,
         status: "success"
       });
-      onCancelled?.();
+      try {
+        await onCancelled?.();
+      } catch (callbackError) {
+        console.warn("[payments-ui] cancellation callback failed", callbackError);
+      }
       handleOpenChange(false);
     } catch (error) {
       const message = error instanceof Error ? error.message : "Unable to cancel membership";
@@ -3242,15 +3301,19 @@ var defaultTranslations4 = {
   status: "Status"
 };
 var BillingHistory = ({
+  subscriptionId,
   pageSize = 10,
   initialPage = 1,
   enableCancel = true,
+  locale,
+  onCancelled,
   onNotify,
   translations: customTranslations
 }) => {
   const { client } = usePaymentContext();
   const notify = onNotify ?? notifyDefault2;
   const t = { ...defaultTranslations4, ...customTranslations };
+  const resolvedLocale = locale && locale.trim().length > 0 ? locale : typeof navigator !== "undefined" && navigator.language ? navigator.language : "en-US";
   const [isExpanded, setIsExpanded] = React4.useState(false);
   const observerRef = React4.useRef(null);
   const loadMoreRef = React4.useRef(null);
@@ -3299,19 +3362,38 @@ var BillingHistory = ({
     const data = historyQuery.data;
     return data?.pages ?? [];
   }, [historyQuery.data]);
-  const formatDate = (value) => new Date(value).toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "short",
-    day: "numeric"
-  });
+  const dateFormatter = React4.useMemo(() => {
+    try {
+      return new Intl.DateTimeFormat(resolvedLocale, {
+        year: "numeric",
+        month: "short",
+        day: "numeric"
+      });
+    } catch {
+      return new Intl.DateTimeFormat("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric"
+      });
+    }
+  }, [resolvedLocale]);
+  const formatDate = (value) => {
+    const parsed = new Date(value);
+    if (Number.isNaN(parsed.getTime())) {
+      return value;
+    }
+    return dateFormatter.format(parsed);
+  };
   const formatAmount = (amount, currency) => {
+    const normalizedAmount = amount / 100;
+    const normalizedCurrency = typeof currency === "string" ? currency.toUpperCase() : currency;
     try {
-      return new Intl.NumberFormat("en-US", {
+      return new Intl.NumberFormat(resolvedLocale, {
         style: "currency",
-        currency
-      }).format(amount);
+        currency: normalizedCurrency
+      }).format(normalizedAmount);
     } catch {
-      return `${amount.toFixed(2)} ${currency}`;
+      return `${normalizedAmount.toFixed(2)} ${currency}`;
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "border-0 bg-black/30 shadow-2xl backdrop-blur-xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 sm:p-6", children: [
@@ -3332,7 +3414,7 @@ var BillingHistory = ({
         children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-0 pt-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: t.reviewActivity }),
-            enableCancel && /* @__PURE__ */ jsxRuntime.jsx(CancelMembershipDialog, { onNotify: notify })
+            enableCancel && subscriptionId && /* @__PURE__ */ jsxRuntime.jsx(CancelMembershipDialog, { subscriptionId, onNotify: notify, onCancelled })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[300px] overflow-y-auto rounded-lg border ", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: historyQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-4 text-center text-sm text-muted-foreground", children: t.loading }) : historyQuery.isError ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-4 text-center text-sm text-destructive", children: t.error }) : /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "", children: [
@@ -3414,8 +3496,7 @@ var PaymentMethodsSection = ({
     list: (params) => client.listPaymentMethods({ limit: params.pageSize }),
     create: (payload) => client.createPaymentMethod(payload),
     update: (id, payload) => client.updatePaymentMethod(id, payload),
-    remove: (id) => client.deletePaymentMethod(id),
-    activate: (id) => client.activatePaymentMethod(id)
+    remove: (id) => client.deletePaymentMethod(id)
   };
   const [isModalOpen, setIsModalOpen] = React4.useState(false);
   const [deletingId, setDeletingId] = React4.useState(null);
@@ -3467,20 +3548,6 @@ var PaymentMethodsSection = ({
     },
     onSettled: () => setDeletingId(null)
   });
-  reactQuery.useMutation({
-    mutationFn: (id) => paymentMethods.activate(id),
-    onSuccess: () => {
-      notify({ title: t.defaultPaymentMethodUpdated, status: "success" });
-      void queryClient.invalidateQueries({ queryKey });
-    },
-    onError: (error) => {
-      notify({
-        title: t.unableToSetDefault,
-        description: error.message,
-        status: "destructive"
-      });
-    }
-  });
   React4.useEffect(() => {
     if (!isModalOpen) {
       createMutation.reset();
@@ -3699,10 +3766,7 @@ var SubscriptionsSection = ({
     setCancelDialogOpen(false);
   }, [activeSubId]);
   const updatePaymentMethodMutation = reactQuery.useMutation({
-    mutationFn: (payload) => client.updateSubscriptionPaymentMethod({
-      subscription_id: payload.subscriptionId,
-      payment_method_id: payload.paymentMethodId
-    }),
+    mutationFn: (payload) => client.updateSubscriptionPaymentMethod(payload.subscriptionId, payload.paymentMethodId),
     onSuccess: () => {
       notify({ title: t.paymentMethodUpdated, status: "success" });
       void queryClient.invalidateQueries({ queryKey: subscriptionsQueryKey });
@@ -3716,7 +3780,7 @@ var SubscriptionsSection = ({
     }
   });
   const resumeSubscriptionMutation = reactQuery.useMutation({
-    mutationFn: () => client.resumeSubscription(),
+    mutationFn: (subscriptionId) => client.resumeSubscription(subscriptionId),
     onSuccess: () => {
       notify({ title: t.resumeSuccess, status: "success" });
       void queryClient.invalidateQueries({ queryKey: subscriptionsQueryKey });
@@ -3730,7 +3794,7 @@ var SubscriptionsSection = ({
     }
   });
   reactQuery.useMutation({
-    mutationFn: (payload) => client.changeSubscription({ price_id: payload.priceId }),
+    mutationFn: (payload) => client.changeSubscription(payload.subscriptionId, { price_id: payload.priceId }),
     onSuccess: () => {
       notify({ title: t.planChanged, status: "success" });
       void queryClient.invalidateQueries({ queryKey: subscriptionsQueryKey });
@@ -3883,7 +3947,7 @@ var SubscriptionsSection = ({
               Button,
               {
                 variant: "secondary",
-                onClick: () => resumeSubscriptionMutation.mutate(),
+                onClick: () => resumeSubscriptionMutation.mutate(activeSubscription.id),
                 disabled: resumeSubscriptionMutation.isPending,
                 className: "rounded-full px-4",
                 children: [
@@ -3948,6 +4012,7 @@ var SubscriptionsSection = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           CancelMembershipDialog,
           {
+            subscriptionId: activeSubscription?.id ?? "",
             translations: cancelTranslations,
             onNotify,
             open: cancelDialogOpen,
@@ -4310,18 +4375,10 @@ var usePaymentStatus = (options = {}) => {
     [connection]
   );
   const checkPaymentStatus = React4.useCallback(
-    async (id) => {
-      try {
-        return await client.getPaymentStatus(id);
-      } catch (error2) {
-        console.error("Failed to check payment status:", {
-          purchaseId: id,
-          error: error2
-        });
-        return null;
-      }
+    async (_id) => {
+      return null;
     },
-    [client]
+    []
   );
   const startMonitoring = React4.useCallback(async () => {
     if (isMonitoringRef.current || !transactionId && !purchaseId) {