@unifold/ui-react 0.1.70-beta.1 → 0.1.71-beta.1

package/dist/index.js

@@ -6702,7 +6702,7 @@ function BankTransfer({
       subdivision_code: userIpInfo?.subdivisionCode || void 0,
       // A provider may advertise multiple rails; default to the first.
       // UIs that want per-rail rows would need to render one entry per element.
-      payment_method: provider.payment_methods[0]
+      payment_method_type: provider.payment_methods[0]
     });
     setActiveProvider(provider);
     const convertedPrefilled = await resolvePrefilledSourceAmount(provider.source_currency);
@@ -11257,6 +11257,13 @@ function setStoredSelectedToken(customerId, token) {
   } catch {
   }
 }
+function clearStoredSelectedToken(customerId) {
+  try {
+    if (typeof window === "undefined" || !customerId) return;
+    localStorage.removeItem(selectedTokenKey(customerId));
+  } catch {
+  }
+}
 
 // src/components/deposits/stripe-link/PayWithStripeLink.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
@@ -11274,6 +11281,31 @@ var STRIPE_SESSION_STATUS = {
   EXPIRED: "expired"
 };
 var STRIPE_SESSION_POLL_INTERVAL_MS = 3e3;
+var STRIPE_CONSUMED_PAYMENT_METHOD_CODE = "payment_method_unexpected_state";
+function isConsumedPaymentMethodError(err) {
+  return err instanceof import_core21.StripeApiResponseError && (err.errorType === "stripe_onramp_payment_method_consumed" || err.stripeCode === STRIPE_CONSUMED_PAYMENT_METHOD_CODE);
+}
+var STRIPE_PAYMENT_FAILURE_MESSAGES = {
+  card_declined: "Your card was declined. Try again or use a different payment method.",
+  insufficient_funds: "Your card has insufficient funds. Try a different payment method.",
+  expired_card: "Your card has expired. Use a different payment method.",
+  incorrect_cvc: "Your card\u2019s security code is incorrect. Try again or use a different card.",
+  incorrect_number: "Your card number is incorrect. Try again or use a different card.",
+  card_not_supported: "This card isn\u2019t supported for this purchase. Try a different payment method.",
+  processing_error: "We couldn\u2019t process your card. Please try again in a moment.",
+  authentication_required: "Your bank requires authentication for this payment. Please try again.",
+  payment_intent_authentication_failure: "Card authentication failed. Try again or use a different card.",
+  payment_method_provider_decline: "Your payment provider declined the charge. Try a different payment method.",
+  payment_failed: "Your payment didn\u2019t go through. Try again or use a different payment method."
+};
+function describeStripePaymentFailure(reason) {
+  if (!reason) return null;
+  return STRIPE_PAYMENT_FAILURE_MESSAGES[reason] ?? null;
+}
+var PAYMENT_FAILED_LEAD = "We couldn\u2019t complete your payment.";
+function unmappedPaymentFailureMessage(stripeMessage) {
+  return stripeMessage ? `${PAYMENT_FAILED_LEAD} ${stripeMessage}` : `${PAYMENT_FAILED_LEAD} Please try again.`;
+}
 var NO_AUTOFILL = {
   autoComplete: "off",
   "data-lpignore": "true",
@@ -11375,7 +11407,11 @@ function PayWithStripeLink({
   }, [controlledStep]);
   (0, import_react17.useEffect)(() => {
     setLoading(false);
-    setError(null);
+    if (preserveErrorOnNextStepRef.current) {
+      preserveErrorOnNextStepRef.current = false;
+    } else {
+      setError(null);
+    }
     setKycPendingMessage(null);
     setQuoteLoading(false);
     if (step !== "checkout") {
@@ -11464,7 +11500,10 @@ function PayWithStripeLink({
   const pendingAddPaymentRef = (0, import_react17.useRef)(false);
   const autoOpenedAddPaymentRef = (0, import_react17.useRef)(false);
   const checkoutGenRef = (0, import_react17.useRef)(0);
+  const preserveErrorOnNextStepRef = (0, import_react17.useRef)(false);
+  const spentSessionIdsRef = (0, import_react17.useRef)(/* @__PURE__ */ new Set());
   const [stripePaymentUIReady, setStripePaymentUIReady] = (0, import_react17.useState)(false);
+  const [addPaymentHovered, setAddPaymentHovered] = (0, import_react17.useState)(false);
   const [oauthToken, setOauthToken] = (0, import_react17.useState)(null);
   const [refreshTokenValue, setRefreshTokenValue] = (0, import_react17.useState)(null);
   const [customerId, setCustomerId] = (0, import_react17.useState)(null);
@@ -11613,7 +11652,7 @@ function PayWithStripeLink({
             const merged = [
               ...pmResult.data.map((t13) => ({ id: t13.id, ...formatPaymentToken(t13) })),
               ...persistedNotInApi ? [persisted] : []
-            ];
+            ].filter((t13) => !deadPaymentTokenIdsRef.current.has(t13.id));
             if (merged.length > 0) {
               const preferred = persisted && merged.find((m) => m.id === persisted.id) || merged[0];
               selectPaymentToken(preferred);
@@ -11678,6 +11717,7 @@ function PayWithStripeLink({
   const [selectedPaymentToken, setSelectedPaymentToken] = (0, import_react17.useState)(null);
   const [paymentDisplay, setPaymentDisplay] = (0, import_react17.useState)(null);
   const selectedTokenSingleUseRef = (0, import_react17.useRef)(false);
+  const deadPaymentTokenIdsRef = (0, import_react17.useRef)(/* @__PURE__ */ new Set());
   const selectPaymentToken = (0, import_react17.useCallback)(
     (token) => {
       selectedTokenSingleUseRef.current = !!token.singleUse;
@@ -11705,9 +11745,25 @@ function PayWithStripeLink({
       setStoredSelectedTokenState(null);
     }
   }, [customerId]);
+  const forgetSelectedPaymentToken = (0, import_react17.useCallback)(
+    (tokenId) => {
+      selectedTokenSingleUseRef.current = false;
+      if (customerId) {
+        const persisted = getStoredSelectedToken(customerId);
+        if (!tokenId || persisted?.id === tokenId) {
+          clearStoredSelectedToken(customerId);
+        }
+      }
+      setSelectedPaymentToken((prev) => !tokenId || prev === tokenId ? null : prev);
+      setPaymentDisplay((prev) => !tokenId || !prev ? null : prev);
+      setStoredSelectedTokenState((prev) => !tokenId || prev?.id === tokenId ? null : prev);
+    },
+    [customerId]
+  );
   const displayPaymentTokens = (() => {
-    const apiDisplay = paymentTokens.map((t13) => ({ id: t13.id, ...formatPaymentToken(t13) }));
-    if (storedSelectedToken && !paymentTokens.some((t13) => t13.id === storedSelectedToken.id)) {
+    const isDead = (id) => deadPaymentTokenIdsRef.current.has(id);
+    const apiDisplay = paymentTokens.filter((t13) => !isDead(t13.id)).map((t13) => ({ id: t13.id, ...formatPaymentToken(t13) }));
+    if (storedSelectedToken && !isDead(storedSelectedToken.id) && !paymentTokens.some((t13) => t13.id === storedSelectedToken.id)) {
       return [...apiDisplay, storedSelectedToken];
     }
     return apiDisplay;
@@ -12356,7 +12412,7 @@ function PayWithStripeLink({
         const merged = [
           ...existing.data.map((t13) => ({ id: t13.id, ...formatPaymentToken(t13) })),
           ...storedNotInApi ? [stored] : []
-        ];
+        ].filter((t13) => !deadPaymentTokenIdsRef.current.has(t13.id));
         if (merged.length === 0) {
           if (!autoOpenedAddPaymentRef.current) {
             autoOpenedAddPaymentRef.current = true;
@@ -12398,6 +12454,9 @@ function PayWithStripeLink({
       paymentInnerRef.current.replaceChildren();
     };
   }, [step, oauthToken, customerId, publishableKey, coordinator]);
+  (0, import_react17.useEffect)(() => {
+    if (step !== "payment") setAddPaymentHovered(false);
+  }, [step]);
   (0, import_react17.useEffect)(() => {
     if (step !== "add_payment") return;
     if (!isCustomerVerified(customer)) {
@@ -12548,6 +12607,17 @@ function PayWithStripeLink({
       }
       if (message) onDepositError?.({ message, error: err });
     };
+    const isRetriablePaymentToken = (id) => !!id && paymentTokens.some((t13) => t13.id === id);
+    const dropConsumedToken = (message, cause) => {
+      if (selectedPaymentToken) deadPaymentTokenIdsRef.current.add(selectedPaymentToken);
+      setSessionForCheckout(null);
+      forgetSelectedPaymentToken(selectedPaymentToken);
+      preserveErrorOnNextStepRef.current = true;
+      setError(message);
+      setStep("amount");
+      onDepositError?.({ message, error: cause });
+    };
+    const CONSUMED_TOKEN_MESSAGE = "That payment method can\u2019t be used. Please choose another.";
     if (!sessionForCheckout || sessionForCheckout.amount !== amount || sessionForCheckout.paymentToken !== selectedPaymentToken) {
       return;
     }
@@ -12555,19 +12625,29 @@ function PayWithStripeLink({
     setLoading(true);
     setError(null);
     setStep("checkout");
+    let lastConfirmError = null;
     try {
-      const runCheckout = (sid) => coordinator.performCheckout(sid, async (onrampSessionId) => {
-        try {
-          await withTokenRefresh(
-            (tok) => (0, import_core21.stripeRefreshQuote)(onrampSessionId, tok, publishableKey)
-          );
-        } catch {
-        }
-        const confirmResponse = await withTokenRefresh(
-          (tok) => (0, import_core21.stripeConfirmSession)(onrampSessionId, tok, {}, publishableKey)
-        );
-        return confirmResponse.client_secret ?? "";
-      });
+      const runCheckout = (sid) => {
+        spentSessionIdsRef.current.add(sid);
+        return coordinator.performCheckout(sid, async (onrampSessionId) => {
+          try {
+            await withTokenRefresh(
+              (tok) => (0, import_core21.stripeRefreshQuote)(onrampSessionId, tok, publishableKey)
+            );
+          } catch {
+          }
+          try {
+            const confirmResponse = await withTokenRefresh(
+              (tok) => (0, import_core21.stripeConfirmSession)(onrampSessionId, tok, {}, publishableKey)
+            );
+            lastConfirmError = null;
+            return confirmResponse.client_secret ?? "";
+          } catch (confirmErr) {
+            lastConfirmError = confirmErr;
+            throw confirmErr;
+          }
+        });
+      };
       const lastErrorFor = async (sid) => {
         const sessionState = await withTokenRefresh(
           (tok) => (0, import_core21.stripeGetSession)(sid, tok, publishableKey)
@@ -12627,8 +12707,9 @@ function PayWithStripeLink({
         setStep("success");
       } else if (lastError === "quote_rate_drifted" || lastError === "charged_with_expired_quote") {
         setSessionForCheckout(null);
-        setStep("amount");
+        preserveErrorOnNextStepRef.current = true;
         setError("Pricing updated. Please try again.");
+        setStep("amount");
       } else if (lastError === "missing_document_verification") {
         surfaceStepUpOnAmount(void 0, void 0, "l2");
       } else if (lastError === "transaction_limit_reached") {
@@ -12639,28 +12720,52 @@ function PayWithStripeLink({
       } else if (lastError === "missing_consumer_wallet") {
         setStep("wallet");
         setError(null);
+      } else if (isConsumedPaymentMethodError(lastConfirmError)) {
+        dropConsumedToken(CONSUMED_TOKEN_MESSAGE, lastConfirmError);
       } else {
-        setSessionForCheckout(null);
-        setError(lastError ?? "Checkout failed. Please try again.");
-        setStep("amount");
+        const confirmErr = lastConfirmError instanceof import_core21.StripeApiResponseError ? lastConfirmError : void 0;
+        const reason = describeStripePaymentFailure(lastError) ?? describeStripePaymentFailure(confirmErr?.stripeCode) ?? unmappedPaymentFailureMessage(confirmErr?.stripeMessage);
+        if (!isRetriablePaymentToken(selectedPaymentToken)) {
+          dropConsumedToken(reason, lastConfirmError ?? void 0);
+        } else {
+          setSessionForCheckout(null);
+          preserveErrorOnNextStepRef.current = true;
+          setError(reason);
+          setStep("amount");
+          onDepositError?.({
+            message: lastError ?? confirmErr?.stripeCode ?? "checkout_failed",
+            error: lastConfirmError ?? void 0
+          });
+        }
       }
     } catch (err) {
       if (isStale()) return;
-      const msg = err instanceof Error ? err.message : "Checkout failed";
-      const errorType = err instanceof import_core21.StripeApiResponseError ? err.errorType : void 0;
-      if (errorType === "stripe_onramp_missing_minimum_identity_verification") {
+      const stripeErr = lastConfirmError instanceof import_core21.StripeApiResponseError ? lastConfirmError : err instanceof import_core21.StripeApiResponseError ? err : void 0;
+      const effectiveError = stripeErr ?? err;
+      const msg = stripeErr?.message ?? (err instanceof Error ? err.message : "Checkout failed");
+      const errorType = stripeErr?.errorType;
+      if (isConsumedPaymentMethodError(effectiveError)) {
+        dropConsumedToken(CONSUMED_TOKEN_MESSAGE, effectiveError);
+      } else if (errorType === "stripe_onramp_missing_minimum_identity_verification") {
         setStep("kyc");
         setError(null);
       } else if (errorType === "stripe_onramp_missing_identity_verification") {
-        surfaceStepUpOnAmount(err, msg, "l1");
+        surfaceStepUpOnAmount(effectiveError, msg, "l1");
       } else if (errorType === "stripe_onramp_missing_document_verification") {
-        surfaceStepUpOnAmount(err, msg, "l2");
+        surfaceStepUpOnAmount(effectiveError, msg, "l2");
       } else if (errorType === "stripe_onramp_purchase_limit_reached") {
-        surfaceStepUpOnAmount(err, msg, null);
+        surfaceStepUpOnAmount(effectiveError, msg, null);
       } else {
-        setError(msg);
-        setStep("amount");
-        onDepositError?.({ message: msg, error: err });
+        const reason = describeStripePaymentFailure(stripeErr?.stripeCode) ?? (stripeErr?.stripeMessage ? unmappedPaymentFailureMessage(stripeErr.stripeMessage) : msg || unmappedPaymentFailureMessage());
+        if (!isRetriablePaymentToken(selectedPaymentToken)) {
+          dropConsumedToken(reason, effectiveError);
+        } else {
+          setSessionForCheckout(null);
+          preserveErrorOnNextStepRef.current = true;
+          setError(reason);
+          setStep("amount");
+          onDepositError?.({ message: msg || "checkout_failed", error: effectiveError });
+        }
       }
     } finally {
       setLoading(false);
@@ -12686,7 +12791,7 @@ function PayWithStripeLink({
       const merged = [
         ...existing.data.map((t13) => ({ id: t13.id, ...formatPaymentToken(t13) })),
         ...stored && !existing.data.some((t13) => t13.id === stored.id) ? [stored] : []
-      ];
+      ].filter((t13) => !deadPaymentTokenIdsRef.current.has(t13.id));
       if (merged.length > 0) {
         const preferred = stored && merged.find((m) => m.id === stored.id) || merged[0];
         selectPaymentToken(preferred);
@@ -12765,7 +12870,7 @@ function PayWithStripeLink({
   (0, import_react17.useEffect)(() => {
     if (step === "review") {
       const existing = sessionForCheckoutRef.current;
-      const hasFreshSession = !!(existing && existing.amount === amount && existing.paymentToken === selectedPaymentToken);
+      const hasFreshSession = !!(existing && existing.amount === amount && existing.paymentToken === selectedPaymentToken && !spentSessionIdsRef.current.has(existing.id));
       if (quoteNonce === quoteNonceAtReviewRef.current && hasFreshSession) return;
       quoteNonceAtReviewRef.current = quoteNonce;
     } else if (step !== "amount") {
@@ -12789,7 +12894,9 @@ function PayWithStripeLink({
         const hasPaymentMethod = !!(isAuthenticated && selectedPaymentToken && onrampWalletAddress && isOnrampWalletRegistered);
         if (hasPaymentMethod) {
           const existing = sessionForCheckoutRef.current;
-          const canRefreshExisting = step === "review" && existing != null && existing.amount === amount && existing.paymentToken === selectedPaymentToken;
+          const canRefreshExisting = step === "review" && existing != null && existing.amount === amount && existing.paymentToken === selectedPaymentToken && // Never refresh (and thereby reuse) a session already checked out —
+          // its PaymentIntent is spent. Build a fresh one instead.
+          !spentSessionIdsRef.current.has(existing.id);
           const session = canRefreshExisting ? await withTokenRefresh((tok) => (0, import_core21.stripeRefreshQuote)(existing.id, tok, publishableKey)) : await withTokenRefresh(
             (tok) => (0, import_core21.stripeCreateSession)(
               {
@@ -12917,7 +13024,7 @@ function PayWithStripeLink({
   const exceedsReachedLimit = limitReachedAmount !== null && hasInput && amountNum >= limitReachedAmount;
   const exceedsLimit = exceedsKnownLimit || exceedsReachedLimit || requiredStepUp !== null;
   const isValidAmount = hasInput && amountNum >= 5 && !exceedsLimit;
-  const hasValidSession = !!(sessionForCheckout && sessionForCheckout.amount === amount && sessionForCheckout.paymentToken === selectedPaymentToken);
+  const hasValidSession = !!(sessionForCheckout && sessionForCheckout.amount === amount && sessionForCheckout.paymentToken === selectedPaymentToken && !spentSessionIdsRef.current.has(sessionForCheckout.id));
   const canCheckoutDirectly = !!(oauthToken && customerId && selectedPaymentToken && isOnrampWalletRegistered);
   const isPreparingSession = canCheckoutDirectly && isValidAmount && !quoteError && (quoteLoading || !hasValidSession);
   const custTiers = customer?.kyc_tiers ?? [];
@@ -13434,7 +13541,7 @@ function PayWithStripeLink({
               {
                 onClick: kycFormMode === "name" ? handleNameNext : handleKycSubmit,
                 disabled: loading || (kycFormMode === "name" ? !kycForm.givenName || !kycForm.surname : kycFormMode === "address" ? !kycForm.addressLine1 || !kycForm.addressCity || !kycForm.addressState || !kycForm.addressPostalCode : !kycForm.ssn || !kycForm.dob.day || !kycForm.dob.month || !kycForm.dob.year),
-                className: "uf-flex-1 uf-py-3.5 uf-text-white uf-font-medium uf-transition-colors disabled:uf-opacity-40",
+                className: "uf-flex-1 uf-py-3.5 uf-text-white uf-font-medium uf-transition-all hover:uf-opacity-90 disabled:uf-opacity-40",
                 style: {
                   backgroundColor: components.button.primaryBackground,
                   fontFamily: fonts.medium,
@@ -13493,7 +13600,17 @@ function PayWithStripeLink({
               className: "uf-w-full uf-flex-1 uf-overflow-y-auto uf-overflow-x-hidden"
             }
           ),
-          !stripePaymentUIReady && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "uf-flex uf-items-center uf-justify-center uf-py-8", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Loader2, { className: "uf-w-8 uf-h-8 uf-animate-spin", style: { color: colors2.primary } }) }),
+          !stripePaymentUIReady && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-gap-3 uf-py-10", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Loader2, { className: "uf-w-8 uf-h-8 uf-animate-spin", style: { color: colors2.primary } }),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              "p",
+              {
+                className: "uf-text-sm uf-text-center",
+                style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
+                children: "Setting up secure payment\u2026"
+              }
+            )
+          ] }),
           error && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             "div",
             {
@@ -13600,35 +13717,14 @@ function PayWithStripeLink({
           isCustomerVerified(customer) && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "uf-px-1", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
             "button",
             {
-              onClick: async () => {
-                if (coordinator && sdkAuthenticatedRef.current) {
-                  setStep("add_payment");
-                  return;
-                }
-                pendingAddPaymentRef.current = true;
-                if (accessTokenRef.current && email) {
-                  setLoading(true);
-                  try {
-                    await withTokenRefresh(
-                      (tok) => (0, import_core21.stripeGetCustomer)(customerId, tok, publishableKey)
-                    );
-                    const sdk = await initialize();
-                    if (!sdk) throw new Error("SDK failed to load");
-                    const authResult = await (0, import_core21.stripeCreateAuthIntent)(email, publishableKey);
-                    setAuthIntentId(authResult.auth_intent_id);
-                    setStep("auth");
-                  } catch {
-                    setStep("email");
-                  } finally {
-                    setLoading(false);
-                  }
-                  return;
-                }
-                setStep("email");
+              onClick: () => {
+                setStep("add_payment");
               },
+              onMouseEnter: () => setAddPaymentHovered(true),
+              onMouseLeave: () => setAddPaymentHovered(false),
               className: "uf-w-full uf-p-3 uf-flex uf-items-center uf-gap-3 uf-transition-colors",
               style: {
-                backgroundColor: components.card.backgroundColor,
+                backgroundColor: addPaymentHovered ? colors2.cardHover : components.card.backgroundColor,
                 borderRadius: components.card.borderRadius,
                 border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
               },
@@ -13743,7 +13839,7 @@ function PayWithStripeLink({
             {
               onClick: () => handleEmailSubmit(),
               disabled: loading || !email.trim(),
-              className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-colors disabled:uf-opacity-40",
+              className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-all hover:uf-opacity-90 disabled:uf-opacity-40",
               style: {
                 backgroundColor: components.button.primaryBackground,
                 fontFamily: fonts.medium,
@@ -13972,7 +14068,7 @@ function PayWithStripeLink({
             {
               onClick: handleRegisterSubmit,
               disabled: loading || phone.length !== 10,
-              className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-colors disabled:uf-opacity-40",
+              className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-all hover:uf-opacity-90 disabled:uf-opacity-40",
               style: {
                 backgroundColor: components.button.primaryBackground,
                 fontFamily: fonts.medium,
@@ -14106,7 +14202,9 @@ function PayWithStripeLink({
     );
   }
   if (step === "amount") {
-    const paymentSelector = oauthToken && customerId && isCustomerVerified(customer) ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    const canSelectPaymentMethod = !!(oauthToken && customerId && isCustomerVerified(customer));
+    const needsPaymentMethodSelection = canSelectPaymentMethod && !selectedPaymentToken;
+    const paymentSelector = canSelectPaymentMethod ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
       "button",
       {
         onClick: () => setStep("payment"),
@@ -14180,6 +14278,35 @@ function PayWithStripeLink({
         style: { backgroundColor: colors2.background },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "uf-mb-6 uf-pt-2", children: [
+            error && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+              "div",
+              {
+                className: "uf-flex uf-items-start uf-gap-2 uf-mx-1 uf-mb-4 uf-px-3 uf-py-2.5",
+                role: "alert",
+                style: {
+                  backgroundColor: `${colors2.error}14`,
+                  border: `1px solid ${colors2.error}40`,
+                  borderRadius: components.card.borderRadius
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                    import_lucide_react25.AlertTriangle,
+                    {
+                      className: "uf-w-4 uf-h-4 uf-mt-0.5 uf-shrink-0",
+                      style: { color: colors2.error }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                    "span",
+                    {
+                      className: "uf-text-xs uf-text-left",
+                      style: { color: colors2.error, fontFamily: fonts.regular },
+                      children: error
+                    }
+                  )
+                ]
+              }
+            ),
             paymentSelector,
             /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "uf-text-center uf-mb-4", children: [
               /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
@@ -14216,7 +14343,7 @@ function PayWithStripeLink({
                   children: amount && amountNum < 5 && !error ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { style: { color: colors2.error }, children: "Minimum amount is $5" }) : exceedsLimit && canRaiseLimit && !error ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { style: { color: colors2.foregroundMuted }, children: [
                     purchaseLimit !== null ? `Limit $${purchaseLimit.toLocaleString()} \xB7 ` : "Limit reached \xB7 ",
                     "Verify to raise"
-                  ] }) : exceedsLimit && !error ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { style: { color: colors2.error }, children: purchaseLimit !== null ? `Limit $${purchaseLimit.toLocaleString()} \xB7 Try less` : "Limit reached \xB7 Try less" }) : error ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { style: { color: colors2.error }, children: error }) : quoteError ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { style: { color: colors2.error }, children: quoteError }) : quoteLoading ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+                  ] }) : exceedsLimit && !error ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { style: { color: colors2.error }, children: purchaseLimit !== null ? `Limit $${purchaseLimit.toLocaleString()} \xB7 Try less` : "Limit reached \xB7 Try less" }) : quoteError ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { style: { color: colors2.error }, children: quoteError }) : quoteLoading ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
                     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                       import_lucide_react25.Loader2,
                       {
@@ -14306,7 +14433,7 @@ function PayWithStripeLink({
             {
               onClick: startLimitStepUp,
               disabled: loading,
-              className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-colors disabled:uf-opacity-40",
+              className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-all hover:uf-opacity-90 disabled:uf-opacity-40",
               style: {
                 backgroundColor: components.button.primaryBackground,
                 fontFamily: fonts.medium,
@@ -14318,8 +14445,8 @@ function PayWithStripeLink({
             "button",
             {
               onClick: handleAmountContinue,
-              disabled: loading || !isValidAmount || !quote || isPreparingSession,
-              className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-colors disabled:uf-opacity-40",
+              disabled: loading || !isValidAmount || !quote || isPreparingSession || needsPaymentMethodSelection,
+              className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-all hover:uf-opacity-90 disabled:uf-opacity-40",
               style: {
                 backgroundColor: components.button.primaryBackground,
                 fontFamily: fonts.medium,
@@ -14449,7 +14576,7 @@ function PayWithStripeLink({
               {
                 onClick: isBuyNow ? handleCheckout : handleReviewContinue,
                 disabled: loading || !quote || isBuyNow && !hasValidSession,
-                className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-colors disabled:uf-opacity-40",
+                className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-all hover:uf-opacity-90 disabled:uf-opacity-40",
                 style: {
                   backgroundColor: components.button.primaryBackground,
                   fontFamily: fonts.medium,
@@ -21246,7 +21373,7 @@ function WalletConnect({
   const chainType = activeDepositWallet?.chain_type ?? "ethereum";
   const recipientAddress = activeDepositWallet?.address ?? "";
   const isCheckoutMode = !!checkoutAmountUsd;
-  const supportedChainType = chainType === "algorand" || chainType === "xrpl" || chainType === "cardano" || chainType === "n1" ? "ethereum" : chainType;
+  const supportedChainType = chainType === "algorand" || chainType === "xrpl" || chainType === "cardano" || chainType === "n1" || chainType === "tron" ? "ethereum" : chainType;
   const transitionTo = React35.useCallback((nextView) => {
     if (nextView === viewRef.current) return;
     setIsTransitioning(true);
@@ -21595,7 +21722,7 @@ function WalletConnect({
     let cancelled = false;
     setIsLoading(true);
     setError(null);
-    const sct = activeDepositWallet.chain_type === "algorand" || activeDepositWallet.chain_type === "xrpl" || activeDepositWallet.chain_type === "cardano" || activeDepositWallet.chain_type === "n1" ? "ethereum" : activeDepositWallet.chain_type;
+    const sct = activeDepositWallet.chain_type === "algorand" || activeDepositWallet.chain_type === "xrpl" || activeDepositWallet.chain_type === "cardano" || activeDepositWallet.chain_type === "n1" || activeDepositWallet.chain_type === "tron" ? "ethereum" : activeDepositWallet.chain_type;
     (0, import_core37.getAddressBalances)(activeWalletInfo.address, sct, publishableKey).then((response) => {
       if (cancelled) return;
       const nonZero = response.balances.filter((b) => b.amount !== "0");

package/dist/index.mjs

@@ -6638,7 +6638,7 @@ function BankTransfer({
       subdivision_code: userIpInfo?.subdivisionCode || void 0,
       // A provider may advertise multiple rails; default to the first.
       // UIs that want per-rail rows would need to render one entry per element.
-      payment_method: provider.payment_methods[0]
+      payment_method_type: provider.payment_methods[0]
     });
     setActiveProvider(provider);
     const convertedPrefilled = await resolvePrefilledSourceAmount(provider.source_currency);
@@ -11218,6 +11218,13 @@ function setStoredSelectedToken(customerId, token) {
   } catch {
   }
 }
+function clearStoredSelectedToken(customerId) {
+  try {
+    if (typeof window === "undefined" || !customerId) return;
+    localStorage.removeItem(selectedTokenKey(customerId));
+  } catch {
+  }
+}
 
 // src/components/deposits/stripe-link/PayWithStripeLink.tsx
 import { Fragment as Fragment6, jsx as jsx44, jsxs as jsxs41 } from "react/jsx-runtime";
@@ -11235,6 +11242,31 @@ var STRIPE_SESSION_STATUS = {
   EXPIRED: "expired"
 };
 var STRIPE_SESSION_POLL_INTERVAL_MS = 3e3;
+var STRIPE_CONSUMED_PAYMENT_METHOD_CODE = "payment_method_unexpected_state";
+function isConsumedPaymentMethodError(err) {
+  return err instanceof StripeApiResponseError && (err.errorType === "stripe_onramp_payment_method_consumed" || err.stripeCode === STRIPE_CONSUMED_PAYMENT_METHOD_CODE);
+}
+var STRIPE_PAYMENT_FAILURE_MESSAGES = {
+  card_declined: "Your card was declined. Try again or use a different payment method.",
+  insufficient_funds: "Your card has insufficient funds. Try a different payment method.",
+  expired_card: "Your card has expired. Use a different payment method.",
+  incorrect_cvc: "Your card\u2019s security code is incorrect. Try again or use a different card.",
+  incorrect_number: "Your card number is incorrect. Try again or use a different card.",
+  card_not_supported: "This card isn\u2019t supported for this purchase. Try a different payment method.",
+  processing_error: "We couldn\u2019t process your card. Please try again in a moment.",
+  authentication_required: "Your bank requires authentication for this payment. Please try again.",
+  payment_intent_authentication_failure: "Card authentication failed. Try again or use a different card.",
+  payment_method_provider_decline: "Your payment provider declined the charge. Try a different payment method.",
+  payment_failed: "Your payment didn\u2019t go through. Try again or use a different payment method."
+};
+function describeStripePaymentFailure(reason) {
+  if (!reason) return null;
+  return STRIPE_PAYMENT_FAILURE_MESSAGES[reason] ?? null;
+}
+var PAYMENT_FAILED_LEAD = "We couldn\u2019t complete your payment.";
+function unmappedPaymentFailureMessage(stripeMessage) {
+  return stripeMessage ? `${PAYMENT_FAILED_LEAD} ${stripeMessage}` : `${PAYMENT_FAILED_LEAD} Please try again.`;
+}
 var NO_AUTOFILL = {
   autoComplete: "off",
   "data-lpignore": "true",
@@ -11336,7 +11368,11 @@ function PayWithStripeLink({
   }, [controlledStep]);
   useEffect24(() => {
     setLoading(false);
-    setError(null);
+    if (preserveErrorOnNextStepRef.current) {
+      preserveErrorOnNextStepRef.current = false;
+    } else {
+      setError(null);
+    }
     setKycPendingMessage(null);
     setQuoteLoading(false);
     if (step !== "checkout") {
@@ -11425,7 +11461,10 @@ function PayWithStripeLink({
   const pendingAddPaymentRef = useRef9(false);
   const autoOpenedAddPaymentRef = useRef9(false);
   const checkoutGenRef = useRef9(0);
+  const preserveErrorOnNextStepRef = useRef9(false);
+  const spentSessionIdsRef = useRef9(/* @__PURE__ */ new Set());
   const [stripePaymentUIReady, setStripePaymentUIReady] = useState29(false);
+  const [addPaymentHovered, setAddPaymentHovered] = useState29(false);
   const [oauthToken, setOauthToken] = useState29(null);
   const [refreshTokenValue, setRefreshTokenValue] = useState29(null);
   const [customerId, setCustomerId] = useState29(null);
@@ -11574,7 +11613,7 @@ function PayWithStripeLink({
             const merged = [
               ...pmResult.data.map((t13) => ({ id: t13.id, ...formatPaymentToken(t13) })),
               ...persistedNotInApi ? [persisted] : []
-            ];
+            ].filter((t13) => !deadPaymentTokenIdsRef.current.has(t13.id));
             if (merged.length > 0) {
               const preferred = persisted && merged.find((m) => m.id === persisted.id) || merged[0];
               selectPaymentToken(preferred);
@@ -11639,6 +11678,7 @@ function PayWithStripeLink({
   const [selectedPaymentToken, setSelectedPaymentToken] = useState29(null);
   const [paymentDisplay, setPaymentDisplay] = useState29(null);
   const selectedTokenSingleUseRef = useRef9(false);
+  const deadPaymentTokenIdsRef = useRef9(/* @__PURE__ */ new Set());
   const selectPaymentToken = useCallback6(
     (token) => {
       selectedTokenSingleUseRef.current = !!token.singleUse;
@@ -11666,9 +11706,25 @@ function PayWithStripeLink({
       setStoredSelectedTokenState(null);
     }
   }, [customerId]);
+  const forgetSelectedPaymentToken = useCallback6(
+    (tokenId) => {
+      selectedTokenSingleUseRef.current = false;
+      if (customerId) {
+        const persisted = getStoredSelectedToken(customerId);
+        if (!tokenId || persisted?.id === tokenId) {
+          clearStoredSelectedToken(customerId);
+        }
+      }
+      setSelectedPaymentToken((prev) => !tokenId || prev === tokenId ? null : prev);
+      setPaymentDisplay((prev) => !tokenId || !prev ? null : prev);
+      setStoredSelectedTokenState((prev) => !tokenId || prev?.id === tokenId ? null : prev);
+    },
+    [customerId]
+  );
   const displayPaymentTokens = (() => {
-    const apiDisplay = paymentTokens.map((t13) => ({ id: t13.id, ...formatPaymentToken(t13) }));
-    if (storedSelectedToken && !paymentTokens.some((t13) => t13.id === storedSelectedToken.id)) {
+    const isDead = (id) => deadPaymentTokenIdsRef.current.has(id);
+    const apiDisplay = paymentTokens.filter((t13) => !isDead(t13.id)).map((t13) => ({ id: t13.id, ...formatPaymentToken(t13) }));
+    if (storedSelectedToken && !isDead(storedSelectedToken.id) && !paymentTokens.some((t13) => t13.id === storedSelectedToken.id)) {
       return [...apiDisplay, storedSelectedToken];
     }
     return apiDisplay;
@@ -12317,7 +12373,7 @@ function PayWithStripeLink({
         const merged = [
           ...existing.data.map((t13) => ({ id: t13.id, ...formatPaymentToken(t13) })),
           ...storedNotInApi ? [stored] : []
-        ];
+        ].filter((t13) => !deadPaymentTokenIdsRef.current.has(t13.id));
         if (merged.length === 0) {
           if (!autoOpenedAddPaymentRef.current) {
             autoOpenedAddPaymentRef.current = true;
@@ -12359,6 +12415,9 @@ function PayWithStripeLink({
       paymentInnerRef.current.replaceChildren();
     };
   }, [step, oauthToken, customerId, publishableKey, coordinator]);
+  useEffect24(() => {
+    if (step !== "payment") setAddPaymentHovered(false);
+  }, [step]);
   useEffect24(() => {
     if (step !== "add_payment") return;
     if (!isCustomerVerified(customer)) {
@@ -12509,6 +12568,17 @@ function PayWithStripeLink({
       }
       if (message) onDepositError?.({ message, error: err });
     };
+    const isRetriablePaymentToken = (id) => !!id && paymentTokens.some((t13) => t13.id === id);
+    const dropConsumedToken = (message, cause) => {
+      if (selectedPaymentToken) deadPaymentTokenIdsRef.current.add(selectedPaymentToken);
+      setSessionForCheckout(null);
+      forgetSelectedPaymentToken(selectedPaymentToken);
+      preserveErrorOnNextStepRef.current = true;
+      setError(message);
+      setStep("amount");
+      onDepositError?.({ message, error: cause });
+    };
+    const CONSUMED_TOKEN_MESSAGE = "That payment method can\u2019t be used. Please choose another.";
     if (!sessionForCheckout || sessionForCheckout.amount !== amount || sessionForCheckout.paymentToken !== selectedPaymentToken) {
       return;
     }
@@ -12516,19 +12586,29 @@ function PayWithStripeLink({
     setLoading(true);
     setError(null);
     setStep("checkout");
+    let lastConfirmError = null;
     try {
-      const runCheckout = (sid) => coordinator.performCheckout(sid, async (onrampSessionId) => {
-        try {
-          await withTokenRefresh(
-            (tok) => stripeRefreshQuote(onrampSessionId, tok, publishableKey)
-          );
-        } catch {
-        }
-        const confirmResponse = await withTokenRefresh(
-          (tok) => stripeConfirmSession(onrampSessionId, tok, {}, publishableKey)
-        );
-        return confirmResponse.client_secret ?? "";
-      });
+      const runCheckout = (sid) => {
+        spentSessionIdsRef.current.add(sid);
+        return coordinator.performCheckout(sid, async (onrampSessionId) => {
+          try {
+            await withTokenRefresh(
+              (tok) => stripeRefreshQuote(onrampSessionId, tok, publishableKey)
+            );
+          } catch {
+          }
+          try {
+            const confirmResponse = await withTokenRefresh(
+              (tok) => stripeConfirmSession(onrampSessionId, tok, {}, publishableKey)
+            );
+            lastConfirmError = null;
+            return confirmResponse.client_secret ?? "";
+          } catch (confirmErr) {
+            lastConfirmError = confirmErr;
+            throw confirmErr;
+          }
+        });
+      };
       const lastErrorFor = async (sid) => {
         const sessionState = await withTokenRefresh(
           (tok) => stripeGetSession(sid, tok, publishableKey)
@@ -12588,8 +12668,9 @@ function PayWithStripeLink({
         setStep("success");
       } else if (lastError === "quote_rate_drifted" || lastError === "charged_with_expired_quote") {
         setSessionForCheckout(null);
-        setStep("amount");
+        preserveErrorOnNextStepRef.current = true;
         setError("Pricing updated. Please try again.");
+        setStep("amount");
       } else if (lastError === "missing_document_verification") {
         surfaceStepUpOnAmount(void 0, void 0, "l2");
       } else if (lastError === "transaction_limit_reached") {
@@ -12600,28 +12681,52 @@ function PayWithStripeLink({
       } else if (lastError === "missing_consumer_wallet") {
         setStep("wallet");
         setError(null);
+      } else if (isConsumedPaymentMethodError(lastConfirmError)) {
+        dropConsumedToken(CONSUMED_TOKEN_MESSAGE, lastConfirmError);
       } else {
-        setSessionForCheckout(null);
-        setError(lastError ?? "Checkout failed. Please try again.");
-        setStep("amount");
+        const confirmErr = lastConfirmError instanceof StripeApiResponseError ? lastConfirmError : void 0;
+        const reason = describeStripePaymentFailure(lastError) ?? describeStripePaymentFailure(confirmErr?.stripeCode) ?? unmappedPaymentFailureMessage(confirmErr?.stripeMessage);
+        if (!isRetriablePaymentToken(selectedPaymentToken)) {
+          dropConsumedToken(reason, lastConfirmError ?? void 0);
+        } else {
+          setSessionForCheckout(null);
+          preserveErrorOnNextStepRef.current = true;
+          setError(reason);
+          setStep("amount");
+          onDepositError?.({
+            message: lastError ?? confirmErr?.stripeCode ?? "checkout_failed",
+            error: lastConfirmError ?? void 0
+          });
+        }
       }
     } catch (err) {
       if (isStale()) return;
-      const msg = err instanceof Error ? err.message : "Checkout failed";
-      const errorType = err instanceof StripeApiResponseError ? err.errorType : void 0;
-      if (errorType === "stripe_onramp_missing_minimum_identity_verification") {
+      const stripeErr = lastConfirmError instanceof StripeApiResponseError ? lastConfirmError : err instanceof StripeApiResponseError ? err : void 0;
+      const effectiveError = stripeErr ?? err;
+      const msg = stripeErr?.message ?? (err instanceof Error ? err.message : "Checkout failed");
+      const errorType = stripeErr?.errorType;
+      if (isConsumedPaymentMethodError(effectiveError)) {
+        dropConsumedToken(CONSUMED_TOKEN_MESSAGE, effectiveError);
+      } else if (errorType === "stripe_onramp_missing_minimum_identity_verification") {
         setStep("kyc");
         setError(null);
       } else if (errorType === "stripe_onramp_missing_identity_verification") {
-        surfaceStepUpOnAmount(err, msg, "l1");
+        surfaceStepUpOnAmount(effectiveError, msg, "l1");
       } else if (errorType === "stripe_onramp_missing_document_verification") {
-        surfaceStepUpOnAmount(err, msg, "l2");
+        surfaceStepUpOnAmount(effectiveError, msg, "l2");
       } else if (errorType === "stripe_onramp_purchase_limit_reached") {
-        surfaceStepUpOnAmount(err, msg, null);
+        surfaceStepUpOnAmount(effectiveError, msg, null);
       } else {
-        setError(msg);
-        setStep("amount");
-        onDepositError?.({ message: msg, error: err });
+        const reason = describeStripePaymentFailure(stripeErr?.stripeCode) ?? (stripeErr?.stripeMessage ? unmappedPaymentFailureMessage(stripeErr.stripeMessage) : msg || unmappedPaymentFailureMessage());
+        if (!isRetriablePaymentToken(selectedPaymentToken)) {
+          dropConsumedToken(reason, effectiveError);
+        } else {
+          setSessionForCheckout(null);
+          preserveErrorOnNextStepRef.current = true;
+          setError(reason);
+          setStep("amount");
+          onDepositError?.({ message: msg || "checkout_failed", error: effectiveError });
+        }
       }
     } finally {
       setLoading(false);
@@ -12647,7 +12752,7 @@ function PayWithStripeLink({
       const merged = [
         ...existing.data.map((t13) => ({ id: t13.id, ...formatPaymentToken(t13) })),
         ...stored && !existing.data.some((t13) => t13.id === stored.id) ? [stored] : []
-      ];
+      ].filter((t13) => !deadPaymentTokenIdsRef.current.has(t13.id));
       if (merged.length > 0) {
         const preferred = stored && merged.find((m) => m.id === stored.id) || merged[0];
         selectPaymentToken(preferred);
@@ -12726,7 +12831,7 @@ function PayWithStripeLink({
   useEffect24(() => {
     if (step === "review") {
       const existing = sessionForCheckoutRef.current;
-      const hasFreshSession = !!(existing && existing.amount === amount && existing.paymentToken === selectedPaymentToken);
+      const hasFreshSession = !!(existing && existing.amount === amount && existing.paymentToken === selectedPaymentToken && !spentSessionIdsRef.current.has(existing.id));
       if (quoteNonce === quoteNonceAtReviewRef.current && hasFreshSession) return;
       quoteNonceAtReviewRef.current = quoteNonce;
     } else if (step !== "amount") {
@@ -12750,7 +12855,9 @@ function PayWithStripeLink({
         const hasPaymentMethod = !!(isAuthenticated && selectedPaymentToken && onrampWalletAddress && isOnrampWalletRegistered);
         if (hasPaymentMethod) {
           const existing = sessionForCheckoutRef.current;
-          const canRefreshExisting = step === "review" && existing != null && existing.amount === amount && existing.paymentToken === selectedPaymentToken;
+          const canRefreshExisting = step === "review" && existing != null && existing.amount === amount && existing.paymentToken === selectedPaymentToken && // Never refresh (and thereby reuse) a session already checked out —
+          // its PaymentIntent is spent. Build a fresh one instead.
+          !spentSessionIdsRef.current.has(existing.id);
           const session = canRefreshExisting ? await withTokenRefresh((tok) => stripeRefreshQuote(existing.id, tok, publishableKey)) : await withTokenRefresh(
             (tok) => stripeCreateSession(
               {
@@ -12878,7 +12985,7 @@ function PayWithStripeLink({
   const exceedsReachedLimit = limitReachedAmount !== null && hasInput && amountNum >= limitReachedAmount;
   const exceedsLimit = exceedsKnownLimit || exceedsReachedLimit || requiredStepUp !== null;
   const isValidAmount = hasInput && amountNum >= 5 && !exceedsLimit;
-  const hasValidSession = !!(sessionForCheckout && sessionForCheckout.amount === amount && sessionForCheckout.paymentToken === selectedPaymentToken);
+  const hasValidSession = !!(sessionForCheckout && sessionForCheckout.amount === amount && sessionForCheckout.paymentToken === selectedPaymentToken && !spentSessionIdsRef.current.has(sessionForCheckout.id));
   const canCheckoutDirectly = !!(oauthToken && customerId && selectedPaymentToken && isOnrampWalletRegistered);
   const isPreparingSession = canCheckoutDirectly && isValidAmount && !quoteError && (quoteLoading || !hasValidSession);
   const custTiers = customer?.kyc_tiers ?? [];
@@ -13395,7 +13502,7 @@ function PayWithStripeLink({
               {
                 onClick: kycFormMode === "name" ? handleNameNext : handleKycSubmit,
                 disabled: loading || (kycFormMode === "name" ? !kycForm.givenName || !kycForm.surname : kycFormMode === "address" ? !kycForm.addressLine1 || !kycForm.addressCity || !kycForm.addressState || !kycForm.addressPostalCode : !kycForm.ssn || !kycForm.dob.day || !kycForm.dob.month || !kycForm.dob.year),
-                className: "uf-flex-1 uf-py-3.5 uf-text-white uf-font-medium uf-transition-colors disabled:uf-opacity-40",
+                className: "uf-flex-1 uf-py-3.5 uf-text-white uf-font-medium uf-transition-all hover:uf-opacity-90 disabled:uf-opacity-40",
                 style: {
                   backgroundColor: components.button.primaryBackground,
                   fontFamily: fonts.medium,
@@ -13454,7 +13561,17 @@ function PayWithStripeLink({
               className: "uf-w-full uf-flex-1 uf-overflow-y-auto uf-overflow-x-hidden"
             }
           ),
-          !stripePaymentUIReady && /* @__PURE__ */ jsx44("div", { className: "uf-flex uf-items-center uf-justify-center uf-py-8", children: /* @__PURE__ */ jsx44(Loader25, { className: "uf-w-8 uf-h-8 uf-animate-spin", style: { color: colors2.primary } }) }),
+          !stripePaymentUIReady && /* @__PURE__ */ jsxs41("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-gap-3 uf-py-10", children: [
+            /* @__PURE__ */ jsx44(Loader25, { className: "uf-w-8 uf-h-8 uf-animate-spin", style: { color: colors2.primary } }),
+            /* @__PURE__ */ jsx44(
+              "p",
+              {
+                className: "uf-text-sm uf-text-center",
+                style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
+                children: "Setting up secure payment\u2026"
+              }
+            )
+          ] }),
           error && /* @__PURE__ */ jsx44(
             "div",
             {
@@ -13561,35 +13678,14 @@ function PayWithStripeLink({
           isCustomerVerified(customer) && /* @__PURE__ */ jsx44("div", { className: "uf-px-1", children: /* @__PURE__ */ jsxs41(
             "button",
             {
-              onClick: async () => {
-                if (coordinator && sdkAuthenticatedRef.current) {
-                  setStep("add_payment");
-                  return;
-                }
-                pendingAddPaymentRef.current = true;
-                if (accessTokenRef.current && email) {
-                  setLoading(true);
-                  try {
-                    await withTokenRefresh(
-                      (tok) => stripeGetCustomer(customerId, tok, publishableKey)
-                    );
-                    const sdk = await initialize();
-                    if (!sdk) throw new Error("SDK failed to load");
-                    const authResult = await stripeCreateAuthIntent(email, publishableKey);
-                    setAuthIntentId(authResult.auth_intent_id);
-                    setStep("auth");
-                  } catch {
-                    setStep("email");
-                  } finally {
-                    setLoading(false);
-                  }
-                  return;
-                }
-                setStep("email");
+              onClick: () => {
+                setStep("add_payment");
               },
+              onMouseEnter: () => setAddPaymentHovered(true),
+              onMouseLeave: () => setAddPaymentHovered(false),
               className: "uf-w-full uf-p-3 uf-flex uf-items-center uf-gap-3 uf-transition-colors",
               style: {
-                backgroundColor: components.card.backgroundColor,
+                backgroundColor: addPaymentHovered ? colors2.cardHover : components.card.backgroundColor,
                 borderRadius: components.card.borderRadius,
                 border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
               },
@@ -13704,7 +13800,7 @@ function PayWithStripeLink({
             {
               onClick: () => handleEmailSubmit(),
               disabled: loading || !email.trim(),
-              className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-colors disabled:uf-opacity-40",
+              className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-all hover:uf-opacity-90 disabled:uf-opacity-40",
               style: {
                 backgroundColor: components.button.primaryBackground,
                 fontFamily: fonts.medium,
@@ -13933,7 +14029,7 @@ function PayWithStripeLink({
             {
               onClick: handleRegisterSubmit,
               disabled: loading || phone.length !== 10,
-              className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-colors disabled:uf-opacity-40",
+              className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-all hover:uf-opacity-90 disabled:uf-opacity-40",
               style: {
                 backgroundColor: components.button.primaryBackground,
                 fontFamily: fonts.medium,
@@ -14067,7 +14163,9 @@ function PayWithStripeLink({
     );
   }
   if (step === "amount") {
-    const paymentSelector = oauthToken && customerId && isCustomerVerified(customer) ? /* @__PURE__ */ jsxs41(
+    const canSelectPaymentMethod = !!(oauthToken && customerId && isCustomerVerified(customer));
+    const needsPaymentMethodSelection = canSelectPaymentMethod && !selectedPaymentToken;
+    const paymentSelector = canSelectPaymentMethod ? /* @__PURE__ */ jsxs41(
       "button",
       {
         onClick: () => setStep("payment"),
@@ -14141,6 +14239,35 @@ function PayWithStripeLink({
         style: { backgroundColor: colors2.background },
         children: [
           /* @__PURE__ */ jsxs41("div", { className: "uf-mb-6 uf-pt-2", children: [
+            error && /* @__PURE__ */ jsxs41(
+              "div",
+              {
+                className: "uf-flex uf-items-start uf-gap-2 uf-mx-1 uf-mb-4 uf-px-3 uf-py-2.5",
+                role: "alert",
+                style: {
+                  backgroundColor: `${colors2.error}14`,
+                  border: `1px solid ${colors2.error}40`,
+                  borderRadius: components.card.borderRadius
+                },
+                children: [
+                  /* @__PURE__ */ jsx44(
+                    AlertTriangle2,
+                    {
+                      className: "uf-w-4 uf-h-4 uf-mt-0.5 uf-shrink-0",
+                      style: { color: colors2.error }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx44(
+                    "span",
+                    {
+                      className: "uf-text-xs uf-text-left",
+                      style: { color: colors2.error, fontFamily: fonts.regular },
+                      children: error
+                    }
+                  )
+                ]
+              }
+            ),
             paymentSelector,
             /* @__PURE__ */ jsxs41("div", { className: "uf-text-center uf-mb-4", children: [
               /* @__PURE__ */ jsx44(
@@ -14177,7 +14304,7 @@ function PayWithStripeLink({
                   children: amount && amountNum < 5 && !error ? /* @__PURE__ */ jsx44("span", { style: { color: colors2.error }, children: "Minimum amount is $5" }) : exceedsLimit && canRaiseLimit && !error ? /* @__PURE__ */ jsxs41("span", { style: { color: colors2.foregroundMuted }, children: [
                     purchaseLimit !== null ? `Limit $${purchaseLimit.toLocaleString()} \xB7 ` : "Limit reached \xB7 ",
                     "Verify to raise"
-                  ] }) : exceedsLimit && !error ? /* @__PURE__ */ jsx44("span", { style: { color: colors2.error }, children: purchaseLimit !== null ? `Limit $${purchaseLimit.toLocaleString()} \xB7 Try less` : "Limit reached \xB7 Try less" }) : error ? /* @__PURE__ */ jsx44("span", { style: { color: colors2.error }, children: error }) : quoteError ? /* @__PURE__ */ jsx44("span", { style: { color: colors2.error }, children: quoteError }) : quoteLoading ? /* @__PURE__ */ jsxs41(Fragment6, { children: [
+                  ] }) : exceedsLimit && !error ? /* @__PURE__ */ jsx44("span", { style: { color: colors2.error }, children: purchaseLimit !== null ? `Limit $${purchaseLimit.toLocaleString()} \xB7 Try less` : "Limit reached \xB7 Try less" }) : quoteError ? /* @__PURE__ */ jsx44("span", { style: { color: colors2.error }, children: quoteError }) : quoteLoading ? /* @__PURE__ */ jsxs41(Fragment6, { children: [
                     /* @__PURE__ */ jsx44(
                       Loader25,
                       {
@@ -14267,7 +14394,7 @@ function PayWithStripeLink({
             {
               onClick: startLimitStepUp,
               disabled: loading,
-              className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-colors disabled:uf-opacity-40",
+              className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-all hover:uf-opacity-90 disabled:uf-opacity-40",
               style: {
                 backgroundColor: components.button.primaryBackground,
                 fontFamily: fonts.medium,
@@ -14279,8 +14406,8 @@ function PayWithStripeLink({
             "button",
             {
               onClick: handleAmountContinue,
-              disabled: loading || !isValidAmount || !quote || isPreparingSession,
-              className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-colors disabled:uf-opacity-40",
+              disabled: loading || !isValidAmount || !quote || isPreparingSession || needsPaymentMethodSelection,
+              className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-all hover:uf-opacity-90 disabled:uf-opacity-40",
               style: {
                 backgroundColor: components.button.primaryBackground,
                 fontFamily: fonts.medium,
@@ -14410,7 +14537,7 @@ function PayWithStripeLink({
               {
                 onClick: isBuyNow ? handleCheckout : handleReviewContinue,
                 disabled: loading || !quote || isBuyNow && !hasValidSession,
-                className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-colors disabled:uf-opacity-40",
+                className: "uf-w-full uf-py-3.5 uf-text-white uf-font-medium uf-transition-all hover:uf-opacity-90 disabled:uf-opacity-40",
                 style: {
                   backgroundColor: components.button.primaryBackground,
                   fontFamily: fonts.medium,
@@ -21278,7 +21405,7 @@ function WalletConnect({
   const chainType = activeDepositWallet?.chain_type ?? "ethereum";
   const recipientAddress = activeDepositWallet?.address ?? "";
   const isCheckoutMode = !!checkoutAmountUsd;
-  const supportedChainType = chainType === "algorand" || chainType === "xrpl" || chainType === "cardano" || chainType === "n1" ? "ethereum" : chainType;
+  const supportedChainType = chainType === "algorand" || chainType === "xrpl" || chainType === "cardano" || chainType === "n1" || chainType === "tron" ? "ethereum" : chainType;
   const transitionTo = React35.useCallback((nextView) => {
     if (nextView === viewRef.current) return;
     setIsTransitioning(true);
@@ -21627,7 +21754,7 @@ function WalletConnect({
     let cancelled = false;
     setIsLoading(true);
     setError(null);
-    const sct = activeDepositWallet.chain_type === "algorand" || activeDepositWallet.chain_type === "xrpl" || activeDepositWallet.chain_type === "cardano" || activeDepositWallet.chain_type === "n1" ? "ethereum" : activeDepositWallet.chain_type;
+    const sct = activeDepositWallet.chain_type === "algorand" || activeDepositWallet.chain_type === "xrpl" || activeDepositWallet.chain_type === "cardano" || activeDepositWallet.chain_type === "n1" || activeDepositWallet.chain_type === "tron" ? "ethereum" : activeDepositWallet.chain_type;
     getAddressBalances2(activeWalletInfo.address, sct, publishableKey).then((response) => {
       if (cancelled) return;
       const nonZero = response.balances.filter((b) => b.amount !== "0");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unifold/ui-react",
-  "version": "0.1.70-beta.1",
+  "version": "0.1.71-beta.1",
   "description": "Unifold UI React - Deposit and onramp components for React applications",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -42,7 +42,7 @@
     "mipd": "^0.0.7",
     "qr-code-styling": "^1.6.0-rc.1",
     "tailwind-merge": "^2.0.0",
-    "@unifold/core": "0.1.70-beta.1"
+    "@unifold/core": "0.1.71-beta.1"
   },
   "devDependencies": {
     "@solana/web3.js": "^1.87.0",