@b3dotfun/sdk 0.0.80 → 0.0.81-alpha.0

package/dist/cjs/anyspend/react/components/AnySpend.js

@@ -362,18 +362,18 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         isBalanceLoading,
     });
     // Get geo-based onramp options for fiat payments
-    const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = (0, react_1.useGeoOnrampOptions)(srcAmountOnRamp);
+    const { geoData, coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support } = (0, react_1.useGeoOnrampOptions)(srcAmountOnRamp);
     // Helper function to map payment method to onramp vendor
     const getOnrampVendor = (paymentMethod) => {
         switch (paymentMethod) {
             case FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY:
                 return "coinbase";
             case FiatPaymentMethod_1.FiatPaymentMethod.STRIPE:
-                // Determine if it's stripe onramp or stripe-web2 based on support
-                if (stripeWeb2Support?.isSupport) {
-                    return "stripe-web2";
-                }
-                return undefined;
+                // Stripe redirect flow (one-click URL)
+                return stripeOnrampSupport ? "stripe" : undefined;
+            case FiatPaymentMethod_1.FiatPaymentMethod.STRIPE_WEB2:
+                // Stripe embedded payment form
+                return stripeWeb2Support?.isSupport ? "stripe-web2" : undefined;
             default:
                 return undefined;
         }
@@ -518,7 +518,9 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     }, [activeTab, selectedSrcChainId, selectedDstChainId, selectedSrcToken.address, selectedDstToken.address]);
     // Determine button state and text
     const btnInfo = (0, react_4.useMemo)(() => {
-        if (activeInputAmountInWei === "0")
+        // For fiat tab, check srcAmountOnRamp; for crypto tab, check activeInputAmountInWei
+        const hasAmount = activeTab === "fiat" ? srcAmountOnRamp && parseFloat(srcAmountOnRamp) > 0 : activeInputAmountInWei !== "0";
+        if (!hasAmount)
             return { text: "Enter an amount", disable: true, error: false, loading: false };
         if (isSameChainSameToken)
             return { text: "Select a different token or chain", disable: true, error: false, loading: false };
@@ -569,6 +571,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         activeTab,
         effectiveCryptoPaymentMethod,
         selectedFiatPaymentMethod,
+        srcAmountOnRamp,
     ]);
     // Handle main button click
     const onMainButtonClick = async () => {
@@ -683,11 +686,21 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || ""; // Use first available payment method ID
             }
             else if (paymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE) {
-                if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
-                    react_2.toast.error("Stripe not available");
+                // Stripe redirect flow (one-click URL)
+                if (!stripeOnrampSupport) {
+                    react_2.toast.error("Credit/Debit Card not available");
+                    return;
+                }
+                vendor = "stripe";
+                paymentMethodString = "";
+            }
+            else if (paymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE_WEB2) {
+                // Stripe embedded payment form
+                if (!stripeWeb2Support.isSupport) {
+                    react_2.toast.error("Pay with Card not available");
                     return;
                 }
-                vendor = stripeWeb2Support && stripeWeb2Support.isSupport ? "stripe-web2" : "stripe";
+                vendor = "stripe-web2";
                 paymentMethodString = "";
             }
             else {

package/dist/cjs/anyspend/react/components/AnySpendCustom.js

@@ -236,7 +236,11 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
             contractType: orderType === "mint_nft" ? metadata?.nftContract?.type : undefined,
             encodedData: encodedData,
             spenderAddress: spenderAddress,
-            onrampVendor: selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? "stripe-web2" : undefined,
+            onrampVendor: selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE
+                ? "stripe"
+                : selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE_WEB2
+                    ? "stripe-web2"
+                    : undefined,
         });
     }, [
         activeTab,
@@ -578,7 +582,13 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Select payment method" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_4.motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: (() => {
+                                                        const config = FiatPaymentMethod_1.FIAT_PAYMENT_METHOD_DISPLAY[selectedFiatPaymentMethod];
+                                                        if (config) {
+                                                            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: config.icon }) }), config.label] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+                                                        }
+                                                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Select payment method" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+                                                    })() })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_4.motion.div, { initial: false, animate: {
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
@@ -618,11 +628,17 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                 setSelectedCryptoPaymentMethod(method);
                 setActivePanel(PanelView.CONFIRM_ORDER);
             } }) }));
+    // Stable callback for fiat payment method selection
+    const handleFiatPaymentMethodSelect = (0, react_5.useCallback)((method) => {
+        setSelectedFiatPaymentMethod(method);
+        setActivePanel(PanelView.CONFIRM_ORDER);
+    }, []);
+    // Stable callback for navigating back to confirm order
+    const handleBackToConfirmOrder = (0, react_5.useCallback)(() => {
+        setActivePanel(PanelView.CONFIRM_ORDER);
+    }, []);
     // Fiat payment method view
-    const fiatPaymentMethodView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(FiatPaymentMethod_1.FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onSelectPaymentMethod: (method) => {
-                setSelectedFiatPaymentMethod(method);
-                setActivePanel(PanelView.CONFIRM_ORDER);
-            }, srcAmountOnRamp: srcFiatAmount }) }));
+    const fiatPaymentMethodView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(FiatPaymentMethod_1.FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: handleBackToConfirmOrder, onSelectPaymentMethod: handleFiatPaymentMethodSelect, srcAmountOnRamp: srcFiatAmount }) }));
     // Points detail view
     const pointsDetailView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(PointsDetailPanel_1.PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER) }) }));
     // Return the TransitionPanel with all views

package/dist/cjs/anyspend/react/components/common/FiatPaymentMethod.d.ts

@@ -4,6 +4,10 @@ export declare enum FiatPaymentMethod {
     STRIPE = "stripe",// Stripe redirect (one-click buy URL)
     STRIPE_WEB2 = "stripe_web2"
 }
+export declare const FIAT_PAYMENT_METHOD_DISPLAY: Record<FiatPaymentMethod, {
+    icon: string;
+    label: string;
+} | null>;
 interface FiatPaymentMethodProps {
     selectedPaymentMethod: FiatPaymentMethod;
     setSelectedPaymentMethod: (method: FiatPaymentMethod) => void;

package/dist/cjs/anyspend/react/components/common/FiatPaymentMethod.js

@@ -1,7 +1,7 @@
 "use strict";
 "use client";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FiatPaymentMethod = void 0;
+exports.FIAT_PAYMENT_METHOD_DISPLAY = exports.FiatPaymentMethod = void 0;
 exports.FiatPaymentMethodComponent = FiatPaymentMethodComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../anyspend/react");
@@ -14,6 +14,13 @@ var FiatPaymentMethod;
     FiatPaymentMethod["STRIPE"] = "stripe";
     FiatPaymentMethod["STRIPE_WEB2"] = "stripe_web2";
 })(FiatPaymentMethod || (exports.FiatPaymentMethod = FiatPaymentMethod = {}));
+// Shared display config for fiat payment methods
+exports.FIAT_PAYMENT_METHOD_DISPLAY = {
+    [FiatPaymentMethod.COINBASE_PAY]: { icon: "C", label: "Coinbase Pay" },
+    [FiatPaymentMethod.STRIPE]: { icon: "S", label: "Pay via Stripe" },
+    [FiatPaymentMethod.STRIPE_WEB2]: { icon: "S", label: "Pay with Card" },
+    [FiatPaymentMethod.NONE]: null,
+};
 function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentMethod, onBack, onSelectPaymentMethod, srcAmountOnRamp, }) {
     // Load geo-based onramp options like in PanelOnramp
     const { coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = (0, react_1.useGeoOnrampOptions)(srcAmountOnRamp);
@@ -50,25 +57,25 @@ function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentM
             available: true,
         });
     }
-    // Add Stripe redirect (one-click) if available - primary option
+    // Add Stripe redirect (one-click) if available - redirects to Stripe checkout
     if (stripeOnrampSupport) {
         const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2); // Use same fee estimate
         availablePaymentMethods.push({
             id: FiatPaymentMethod.STRIPE,
-            name: "Credit/Debit Card",
-            description: "Pay via Stripe checkout",
+            name: "Pay via Stripe",
+            description: "Redirects to Stripe checkout",
             badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
             badgeColor: "bg-gray-100 text-gray-800",
             available: true,
         });
     }
-    // Add Stripe Web2 (embedded) if available - secondary option
+    // Add Stripe Web2 (embedded) if available - embedded card form
     if (stripeWeb2Support && stripeWeb2Support.isSupport) {
         const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2);
         availablePaymentMethods.push({
             id: FiatPaymentMethod.STRIPE_WEB2,
-            name: "Quick Pay",
-            description: "Credit or debit card",
+            name: "Pay with Card",
+            description: "Fast checkout",
             badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
             badgeColor: "bg-gray-100 text-gray-800",
             available: true,

package/dist/cjs/anyspend/react/components/common/PanelOnramp.js

@@ -78,7 +78,13 @@ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMetho
     const handleQuickAmount = (value) => {
         setSrcAmountOnRamp(value);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex h-7 w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: selectedPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Stripe"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center pb-2 pt-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex h-7 w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: (() => {
+                                    const config = selectedPaymentMethod ? FiatPaymentMethod_1.FIAT_PAYMENT_METHOD_DISPLAY[selectedPaymentMethod] : null;
+                                    if (config) {
+                                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: config.icon }) }), config.label] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }));
+                                    }
+                                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }));
+                                })() })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center pb-2 pt-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
                                         width: `${Math.max(ONE_CHAR_WIDTH, srcAmountOnRamp.length * ONE_CHAR_WIDTH)}px`,
                                     } })] }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto mb-6 flex justify-center gap-2", hideDstToken && "mb-0"), children: customUsdInputValues
                             .filter(v => !isNaN(Number(v)))

package/dist/esm/anyspend/react/components/AnySpend.js

@@ -355,18 +355,18 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         isBalanceLoading,
     });
     // Get geo-based onramp options for fiat payments
-    const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
+    const { geoData, coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
     // Helper function to map payment method to onramp vendor
     const getOnrampVendor = (paymentMethod) => {
         switch (paymentMethod) {
             case FiatPaymentMethod.COINBASE_PAY:
                 return "coinbase";
             case FiatPaymentMethod.STRIPE:
-                // Determine if it's stripe onramp or stripe-web2 based on support
-                if (stripeWeb2Support?.isSupport) {
-                    return "stripe-web2";
-                }
-                return undefined;
+                // Stripe redirect flow (one-click URL)
+                return stripeOnrampSupport ? "stripe" : undefined;
+            case FiatPaymentMethod.STRIPE_WEB2:
+                // Stripe embedded payment form
+                return stripeWeb2Support?.isSupport ? "stripe-web2" : undefined;
             default:
                 return undefined;
         }
@@ -511,7 +511,9 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     }, [activeTab, selectedSrcChainId, selectedDstChainId, selectedSrcToken.address, selectedDstToken.address]);
     // Determine button state and text
     const btnInfo = useMemo(() => {
-        if (activeInputAmountInWei === "0")
+        // For fiat tab, check srcAmountOnRamp; for crypto tab, check activeInputAmountInWei
+        const hasAmount = activeTab === "fiat" ? srcAmountOnRamp && parseFloat(srcAmountOnRamp) > 0 : activeInputAmountInWei !== "0";
+        if (!hasAmount)
             return { text: "Enter an amount", disable: true, error: false, loading: false };
         if (isSameChainSameToken)
             return { text: "Select a different token or chain", disable: true, error: false, loading: false };
@@ -562,6 +564,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         activeTab,
         effectiveCryptoPaymentMethod,
         selectedFiatPaymentMethod,
+        srcAmountOnRamp,
     ]);
     // Handle main button click
     const onMainButtonClick = async () => {
@@ -676,11 +679,21 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                 paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || ""; // Use first available payment method ID
             }
             else if (paymentMethod === FiatPaymentMethod.STRIPE) {
-                if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
-                    toast.error("Stripe not available");
+                // Stripe redirect flow (one-click URL)
+                if (!stripeOnrampSupport) {
+                    toast.error("Credit/Debit Card not available");
+                    return;
+                }
+                vendor = "stripe";
+                paymentMethodString = "";
+            }
+            else if (paymentMethod === FiatPaymentMethod.STRIPE_WEB2) {
+                // Stripe embedded payment form
+                if (!stripeWeb2Support.isSupport) {
+                    toast.error("Pay with Card not available");
                     return;
                 }
-                vendor = stripeWeb2Support && stripeWeb2Support.isSupport ? "stripe-web2" : "stripe";
+                vendor = "stripe-web2";
                 paymentMethodString = "";
             }
             else {

package/dist/esm/anyspend/react/components/AnySpendCustom.js

@@ -19,7 +19,7 @@ import { useRecipientAddressState } from "../hooks/useRecipientAddressState.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
 import { FeeBreakDown } from "./common/FeeBreakDown.js";
-import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
+import { FIAT_PAYMENT_METHOD_DISPLAY, FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
 import { OrderDetails } from "./common/OrderDetails.js";
 import { OrderHistory } from "./common/OrderHistory.js";
 import { OrderToken } from "./common/OrderToken.js";
@@ -197,7 +197,11 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
             contractType: orderType === "mint_nft" ? metadata?.nftContract?.type : undefined,
             encodedData: encodedData,
             spenderAddress: spenderAddress,
-            onrampVendor: selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? "stripe-web2" : undefined,
+            onrampVendor: selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE
+                ? "stripe"
+                : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE_WEB2
+                    ? "stripe-web2"
+                    : undefined,
         });
     }, [
         activeTab,
@@ -539,7 +543,13 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), _jsx("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [_jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [_jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Select payment method" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs(motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), _jsx("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: (() => {
+                                                        const config = FIAT_PAYMENT_METHOD_DISPLAY[selectedFiatPaymentMethod];
+                                                        if (config) {
+                                                            return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [_jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: config.icon }) }), config.label] }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+                                                        }
+                                                        return (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Select payment method" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
+                                                    })() })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs(motion.div, { initial: false, animate: {
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
@@ -579,11 +589,17 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                 setSelectedCryptoPaymentMethod(method);
                 setActivePanel(PanelView.CONFIRM_ORDER);
             } }) }));
+    // Stable callback for fiat payment method selection
+    const handleFiatPaymentMethodSelect = useCallback((method) => {
+        setSelectedFiatPaymentMethod(method);
+        setActivePanel(PanelView.CONFIRM_ORDER);
+    }, []);
+    // Stable callback for navigating back to confirm order
+    const handleBackToConfirmOrder = useCallback(() => {
+        setActivePanel(PanelView.CONFIRM_ORDER);
+    }, []);
     // Fiat payment method view
-    const fiatPaymentMethodView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onSelectPaymentMethod: (method) => {
-                setSelectedFiatPaymentMethod(method);
-                setActivePanel(PanelView.CONFIRM_ORDER);
-            }, srcAmountOnRamp: srcFiatAmount }) }));
+    const fiatPaymentMethodView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: handleBackToConfirmOrder, onSelectPaymentMethod: handleFiatPaymentMethodSelect, srcAmountOnRamp: srcFiatAmount }) }));
     // Points detail view
     const pointsDetailView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER) }) }));
     // Return the TransitionPanel with all views

package/dist/esm/anyspend/react/components/common/FiatPaymentMethod.d.ts

@@ -4,6 +4,10 @@ export declare enum FiatPaymentMethod {
     STRIPE = "stripe",// Stripe redirect (one-click buy URL)
     STRIPE_WEB2 = "stripe_web2"
 }
+export declare const FIAT_PAYMENT_METHOD_DISPLAY: Record<FiatPaymentMethod, {
+    icon: string;
+    label: string;
+} | null>;
 interface FiatPaymentMethodProps {
     selectedPaymentMethod: FiatPaymentMethod;
     setSelectedPaymentMethod: (method: FiatPaymentMethod) => void;

package/dist/esm/anyspend/react/components/common/FiatPaymentMethod.js

@@ -10,6 +10,13 @@ export var FiatPaymentMethod;
     FiatPaymentMethod["STRIPE"] = "stripe";
     FiatPaymentMethod["STRIPE_WEB2"] = "stripe_web2";
 })(FiatPaymentMethod || (FiatPaymentMethod = {}));
+// Shared display config for fiat payment methods
+export const FIAT_PAYMENT_METHOD_DISPLAY = {
+    [FiatPaymentMethod.COINBASE_PAY]: { icon: "C", label: "Coinbase Pay" },
+    [FiatPaymentMethod.STRIPE]: { icon: "S", label: "Pay via Stripe" },
+    [FiatPaymentMethod.STRIPE_WEB2]: { icon: "S", label: "Pay with Card" },
+    [FiatPaymentMethod.NONE]: null,
+};
 export function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentMethod, onBack, onSelectPaymentMethod, srcAmountOnRamp, }) {
     // Load geo-based onramp options like in PanelOnramp
     const { coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = useGeoOnrampOptions(srcAmountOnRamp);
@@ -46,25 +53,25 @@ export function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedP
             available: true,
         });
     }
-    // Add Stripe redirect (one-click) if available - primary option
+    // Add Stripe redirect (one-click) if available - redirects to Stripe checkout
     if (stripeOnrampSupport) {
         const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2); // Use same fee estimate
         availablePaymentMethods.push({
             id: FiatPaymentMethod.STRIPE,
-            name: "Credit/Debit Card",
-            description: "Pay via Stripe checkout",
+            name: "Pay via Stripe",
+            description: "Redirects to Stripe checkout",
             badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
             badgeColor: "bg-gray-100 text-gray-800",
             available: true,
         });
     }
-    // Add Stripe Web2 (embedded) if available - secondary option
+    // Add Stripe Web2 (embedded) if available - embedded card form
     if (stripeWeb2Support && stripeWeb2Support.isSupport) {
         const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2);
         availablePaymentMethods.push({
             id: FiatPaymentMethod.STRIPE_WEB2,
-            name: "Quick Pay",
-            description: "Credit or debit card",
+            name: "Pay with Card",
+            description: "Fast checkout",
             badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
             badgeColor: "bg-gray-100 text-gray-800",
             available: true,

package/dist/esm/anyspend/react/components/common/PanelOnramp.js

@@ -6,7 +6,7 @@ import { cn, formatUsername } from "../../../../shared/utils/index.js";
 import { formatAddress } from "../../../../shared/utils/formatAddress.js";
 import { ChevronRight, Info, Wallet } from "lucide-react";
 import { useRef } from "react";
-import { FiatPaymentMethod } from "./FiatPaymentMethod.js";
+import { FIAT_PAYMENT_METHOD_DISPLAY, FiatPaymentMethod } from "./FiatPaymentMethod.js";
 import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat.js";
 import { PointsBadge } from "./PointsBadge.js";
 const ONE_CHAR_WIDTH = 30;
@@ -75,7 +75,13 @@ export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPayme
     const handleQuickAmount = (value) => {
         setSrcAmountOnRamp(value);
     };
-    return (_jsxs("div", { className: "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [_jsxs("div", { className: "flex h-7 w-full items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: selectedPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Stripe"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx("div", { className: "flex items-center justify-center pb-2 pt-8", children: _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), _jsx(Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
+    return (_jsxs("div", { className: "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [_jsxs("div", { className: "flex h-7 w-full items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: (() => {
+                                    const config = selectedPaymentMethod ? FIAT_PAYMENT_METHOD_DISPLAY[selectedPaymentMethod] : null;
+                                    if (config) {
+                                        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: config.icon }) }), config.label] }), _jsx(ChevronRight, { className: "h-4 w-4" })] }));
+                                    }
+                                    return (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] }));
+                                })() })] }), _jsx("div", { className: "flex items-center justify-center pb-2 pt-8", children: _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), _jsx(Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
                                         width: `${Math.max(ONE_CHAR_WIDTH, srcAmountOnRamp.length * ONE_CHAR_WIDTH)}px`,
                                     } })] }) }), _jsx("div", { className: cn("mx-auto mb-6 flex justify-center gap-2", hideDstToken && "mb-0"), children: customUsdInputValues
                             .filter(v => !isNaN(Number(v)))

package/dist/types/anyspend/react/components/common/FiatPaymentMethod.d.ts

@@ -4,6 +4,10 @@ export declare enum FiatPaymentMethod {
     STRIPE = "stripe",// Stripe redirect (one-click buy URL)
     STRIPE_WEB2 = "stripe_web2"
 }
+export declare const FIAT_PAYMENT_METHOD_DISPLAY: Record<FiatPaymentMethod, {
+    icon: string;
+    label: string;
+} | null>;
 interface FiatPaymentMethodProps {
     selectedPaymentMethod: FiatPaymentMethod;
     setSelectedPaymentMethod: (method: FiatPaymentMethod) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.80",
+  "version": "0.0.81-alpha.0",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

package/src/anyspend/react/components/AnySpend.tsx

@@ -510,7 +510,8 @@ function AnySpendInner({
   });
 
   // Get geo-based onramp options for fiat payments
-  const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
+  const { geoData, coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support } =
+    useGeoOnrampOptions(srcAmountOnRamp);
 
   // Helper function to map payment method to onramp vendor
   const getOnrampVendor = (paymentMethod: FiatPaymentMethod): "coinbase" | "stripe" | "stripe-web2" | undefined => {
@@ -518,11 +519,11 @@ function AnySpendInner({
       case FiatPaymentMethod.COINBASE_PAY:
         return "coinbase";
       case FiatPaymentMethod.STRIPE:
-        // Determine if it's stripe onramp or stripe-web2 based on support
-        if (stripeWeb2Support?.isSupport) {
-          return "stripe-web2";
-        }
-        return undefined;
+        // Stripe redirect flow (one-click URL)
+        return stripeOnrampSupport ? "stripe" : undefined;
+      case FiatPaymentMethod.STRIPE_WEB2:
+        // Stripe embedded payment form
+        return stripeWeb2Support?.isSupport ? "stripe-web2" : undefined;
       default:
         return undefined;
     }
@@ -683,7 +684,10 @@ function AnySpendInner({
 
   // Determine button state and text
   const btnInfo: { text: string; disable: boolean; error: boolean; loading: boolean } = useMemo(() => {
-    if (activeInputAmountInWei === "0") return { text: "Enter an amount", disable: true, error: false, loading: false };
+    // For fiat tab, check srcAmountOnRamp; for crypto tab, check activeInputAmountInWei
+    const hasAmount =
+      activeTab === "fiat" ? srcAmountOnRamp && parseFloat(srcAmountOnRamp) > 0 : activeInputAmountInWei !== "0";
+    if (!hasAmount) return { text: "Enter an amount", disable: true, error: false, loading: false };
     if (isSameChainSameToken)
       return { text: "Select a different token or chain", disable: true, error: false, loading: false };
     if (isLoadingAnyspendQuote) return { text: "Loading quote...", disable: true, error: false, loading: true };
@@ -739,6 +743,7 @@ function AnySpendInner({
     activeTab,
     effectiveCryptoPaymentMethod,
     selectedFiatPaymentMethod,
+    srcAmountOnRamp,
   ]);
 
   // Handle main button click
@@ -870,11 +875,20 @@ function AnySpendInner({
         vendor = "coinbase";
         paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || ""; // Use first available payment method ID
       } else if (paymentMethod === FiatPaymentMethod.STRIPE) {
-        if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
-          toast.error("Stripe not available");
+        // Stripe redirect flow (one-click URL)
+        if (!stripeOnrampSupport) {
+          toast.error("Credit/Debit Card not available");
+          return;
+        }
+        vendor = "stripe";
+        paymentMethodString = "";
+      } else if (paymentMethod === FiatPaymentMethod.STRIPE_WEB2) {
+        // Stripe embedded payment form
+        if (!stripeWeb2Support.isSupport) {
+          toast.error("Pay with Card not available");
           return;
         }
-        vendor = stripeWeb2Support && stripeWeb2Support.isSupport ? "stripe-web2" : "stripe";
+        vendor = "stripe-web2";
         paymentMethodString = "";
       } else {
         toast.error("Please select a payment method");

package/src/anyspend/react/components/AnySpendCustom.tsx

@@ -50,7 +50,7 @@ import { useRecipientAddressState } from "../hooks/useRecipientAddressState";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
 import { FeeBreakDown } from "./common/FeeBreakDown";
-import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
+import { FIAT_PAYMENT_METHOD_DISPLAY, FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails } from "./common/OrderDetails";
 import { OrderHistory } from "./common/OrderHistory";
 import { OrderToken } from "./common/OrderToken";
@@ -355,7 +355,12 @@ function AnySpendCustomInner({
       contractType: orderType === "mint_nft" ? metadata?.nftContract?.type : undefined,
       encodedData: encodedData,
       spenderAddress: spenderAddress,
-      onrampVendor: selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? "stripe-web2" : undefined,
+      onrampVendor:
+        selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE
+          ? "stripe"
+          : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE_WEB2
+            ? "stripe-web2"
+            : undefined,
     });
   }, [
     activeTab,
@@ -1127,32 +1132,28 @@ function AnySpendCustomInner({
                   className="text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700"
                   onClick={() => setActivePanel(PanelView.FIAT_PAYMENT_METHOD)}
                 >
-                  {selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (
-                    <>
-                      <div className="flex items-center gap-2 whitespace-nowrap">
-                        <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600">
-                          <span className="text-xs font-bold text-white">C</span>
-                        </div>
-                        Coinbase Pay
-                      </div>
-                      <ChevronRight className="h-4 w-4 shrink-0" />
-                    </>
-                  ) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (
-                    <>
-                      <div className="flex items-center gap-2 whitespace-nowrap">
-                        <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600">
-                          <span className="text-xs font-bold text-white">S</span>
-                        </div>
-                        Credit/Debit Card
-                      </div>
-                      <ChevronRight className="h-4 w-4 shrink-0" />
-                    </>
-                  ) : (
-                    <>
-                      <span className="whitespace-nowrap">Select payment method</span>
-                      <ChevronRight className="h-4 w-4 shrink-0" />
-                    </>
-                  )}
+                  {(() => {
+                    const config = FIAT_PAYMENT_METHOD_DISPLAY[selectedFiatPaymentMethod];
+                    if (config) {
+                      return (
+                        <>
+                          <div className="flex items-center gap-2 whitespace-nowrap">
+                            <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600">
+                              <span className="text-xs font-bold text-white">{config.icon}</span>
+                            </div>
+                            {config.label}
+                          </div>
+                          <ChevronRight className="h-4 w-4 shrink-0" />
+                        </>
+                      );
+                    }
+                    return (
+                      <>
+                        <span className="whitespace-nowrap">Select payment method</span>
+                        <ChevronRight className="h-4 w-4 shrink-0" />
+                      </>
+                    );
+                  })()}
                 </button>
               </motion.div>
 
@@ -1318,17 +1319,25 @@ function AnySpendCustomInner({
     </div>
   );
 
+  // Stable callback for fiat payment method selection
+  const handleFiatPaymentMethodSelect = useCallback((method: FiatPaymentMethod) => {
+    setSelectedFiatPaymentMethod(method);
+    setActivePanel(PanelView.CONFIRM_ORDER);
+  }, []);
+
+  // Stable callback for navigating back to confirm order
+  const handleBackToConfirmOrder = useCallback(() => {
+    setActivePanel(PanelView.CONFIRM_ORDER);
+  }, []);
+
   // Fiat payment method view
   const fiatPaymentMethodView = (
     <div className={cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4")}>
       <FiatPaymentMethodComponent
         selectedPaymentMethod={selectedFiatPaymentMethod}
         setSelectedPaymentMethod={setSelectedFiatPaymentMethod}
-        onBack={() => setActivePanel(PanelView.CONFIRM_ORDER)}
-        onSelectPaymentMethod={(method: FiatPaymentMethod) => {
-          setSelectedFiatPaymentMethod(method);
-          setActivePanel(PanelView.CONFIRM_ORDER);
-        }}
+        onBack={handleBackToConfirmOrder}
+        onSelectPaymentMethod={handleFiatPaymentMethodSelect}
         srcAmountOnRamp={srcFiatAmount}
       />
     </div>

package/src/anyspend/react/components/common/FiatPaymentMethod.tsx

@@ -11,6 +11,14 @@ export enum FiatPaymentMethod {
   STRIPE_WEB2 = "stripe_web2", // Stripe embedded payment
 }
 
+// Shared display config for fiat payment methods
+export const FIAT_PAYMENT_METHOD_DISPLAY: Record<FiatPaymentMethod, { icon: string; label: string } | null> = {
+  [FiatPaymentMethod.COINBASE_PAY]: { icon: "C", label: "Coinbase Pay" },
+  [FiatPaymentMethod.STRIPE]: { icon: "S", label: "Pay via Stripe" },
+  [FiatPaymentMethod.STRIPE_WEB2]: { icon: "S", label: "Pay with Card" },
+  [FiatPaymentMethod.NONE]: null,
+};
+
 interface FiatPaymentMethodProps {
   selectedPaymentMethod: FiatPaymentMethod;
   setSelectedPaymentMethod: (method: FiatPaymentMethod) => void;
@@ -70,26 +78,26 @@ export function FiatPaymentMethodComponent({
     });
   }
 
-  // Add Stripe redirect (one-click) if available - primary option
+  // Add Stripe redirect (one-click) if available - redirects to Stripe checkout
   if (stripeOnrampSupport) {
     const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2); // Use same fee estimate
     availablePaymentMethods.push({
       id: FiatPaymentMethod.STRIPE,
-      name: "Credit/Debit Card",
-      description: "Pay via Stripe checkout",
+      name: "Pay via Stripe",
+      description: "Redirects to Stripe checkout",
       badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
       badgeColor: "bg-gray-100 text-gray-800",
       available: true,
     });
   }
 
-  // Add Stripe Web2 (embedded) if available - secondary option
+  // Add Stripe Web2 (embedded) if available - embedded card form
   if (stripeWeb2Support && stripeWeb2Support.isSupport) {
     const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2);
     availablePaymentMethods.push({
       id: FiatPaymentMethod.STRIPE_WEB2,
-      name: "Quick Pay",
-      description: "Credit or debit card",
+      name: "Pay with Card",
+      description: "Fast checkout",
       badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
       badgeColor: "bg-gray-100 text-gray-800",
       available: true,

package/src/anyspend/react/components/common/PanelOnramp.tsx

@@ -8,7 +8,7 @@ import { formatAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { ChevronRight, Info, Wallet } from "lucide-react";
 import { useRef } from "react";
 
-import { FiatPaymentMethod } from "./FiatPaymentMethod";
+import { FIAT_PAYMENT_METHOD_DISPLAY, FiatPaymentMethod } from "./FiatPaymentMethod";
 import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat";
 import { PointsBadge } from "./PointsBadge";
 
@@ -141,32 +141,28 @@ export function PanelOnramp({
             className="text-as-tertiarry flex h-7 items-center gap-1 text-sm"
             onClick={() => setActivePanel(fiatPaymentMethodIndex)} // PanelView.FIAT_PAYMENT_METHOD
           >
-            {selectedPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (
-              <>
-                <div className="flex items-center gap-2">
-                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
-                    <span className="text-xs font-bold text-white">C</span>
-                  </div>
-                  Coinbase Pay
-                </div>
-                <ChevronRight className="h-4 w-4" />
-              </>
-            ) : selectedPaymentMethod === FiatPaymentMethod.STRIPE ? (
-              <>
-                <div className="flex items-center gap-2">
-                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
-                    <span className="text-xs font-bold text-white">S</span>
-                  </div>
-                  Stripe
-                </div>
-                <ChevronRight className="h-4 w-4" />
-              </>
-            ) : (
-              <>
-                Select payment method
-                <ChevronRight className="h-4 w-4" />
-              </>
-            )}
+            {(() => {
+              const config = selectedPaymentMethod ? FIAT_PAYMENT_METHOD_DISPLAY[selectedPaymentMethod] : null;
+              if (config) {
+                return (
+                  <>
+                    <div className="flex items-center gap-2">
+                      <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
+                        <span className="text-xs font-bold text-white">{config.icon}</span>
+                      </div>
+                      {config.label}
+                    </div>
+                    <ChevronRight className="h-4 w-4" />
+                  </>
+                );
+              }
+              return (
+                <>
+                  Select payment method
+                  <ChevronRight className="h-4 w-4" />
+                </>
+              );
+            })()}
           </button>
         </div>