@b3dotfun/sdk 0.1.68 → 0.1.69-alpha.1

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

@@ -37,6 +37,8 @@ const FiatPaymentMethod_1 = require("./common/FiatPaymentMethod");
 const GasIndicator_1 = require("./common/GasIndicator");
 const OrderDetails_1 = require("./common/OrderDetails");
 const OrderHistory_1 = require("./common/OrderHistory");
+const KycGate_1 = require("./checkout/KycGate");
+const LoginStep_1 = require("../../../global-account/react/components/SignInWithB3/steps/LoginStep");
 const PanelOnramp_1 = require("./common/PanelOnramp");
 const PanelOnrampPayment_1 = require("./common/PanelOnrampPayment");
 const PointsDetailPanel_1 = require("./common/PointsDetailPanel");
@@ -57,19 +59,28 @@ var PanelView;
     PanelView[PanelView["POINTS_DETAIL"] = 8] = "POINTS_DETAIL";
     PanelView[PanelView["FEE_DETAIL"] = 9] = "FEE_DETAIL";
     PanelView[PanelView["DIRECT_TRANSFER_SUCCESS"] = 10] = "DIRECT_TRANSFER_SUCCESS";
+    PanelView[PanelView["FIAT_KYC"] = 11] = "FIAT_KYC";
+    PanelView[PanelView["FIAT_AUTH"] = 12] = "FIAT_AUTH";
 })(PanelView || (exports.PanelView = PanelView = {}));
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
 function AnySpend(props) {
     const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
     return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendCustomizationContext_1.AnySpendCustomizationProvider, { slots: props.slots, content: props.content, theme: props.theme, children: (0, jsx_runtime_1.jsx)(AnySpendInner, { ...props }) }) }));
 }
-function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, hideHeader, hideBottomNavigation = false, disableUrlParamManagement = false, returnToHomeUrl, customRecipientLabel, returnHomeLabel, classes, allowDirectTransfer = false, destinationTokenAmount, callbackMetadata, senderAddress, }) {
+function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, hideHeader, hideBottomNavigation = false, disableUrlParamManagement = false, returnToHomeUrl, customRecipientLabel, returnHomeLabel, classes, allowDirectTransfer = false, destinationTokenAmount, callbackMetadata, senderAddress, kycEnabled = false, }) {
     const { slots, content } = (0, AnySpendCustomizationContext_1.useAnySpendCustomization)();
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
     const { partnerId } = (0, react_2.useB3Config)();
     const setB3ModalContentType = (0, react_2.useModalStore)(state => state.setB3ModalContentType);
     const setB3ModalOpen = (0, react_2.useModalStore)(state => state.setB3ModalOpen);
+    const { isAuthenticated } = (0, react_2.useAuth)();
+    // KYC approval is tracked per-session so we only prompt the wallet
+    // signature when the user actually clicks Buy, not on panel mount.
+    // useRef so handleFiatOrder can read the updated value synchronously
+    // in the same frame that onStatusResolved sets it (setState is async).
+    // When kycEnabled is false (default), pre-approve so the KYC gate is skipped.
+    const kycApprovedRef = (0, react_4.useRef)(!kycEnabled);
     // Determine if we're in "buy mode" based on whether destination token props are provided
     const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
     // Add refs to track URL state
@@ -79,7 +90,17 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     const animationDirection = (0, react_4.useRef)(null);
     // Track previous panel for proper back navigation
     const previousPanel = (0, react_4.useRef)(PanelView.MAIN);
-    const [activeTab, setActiveTab] = (0, react_4.useState)(defaultActiveTab);
+    const [activeTab, setActiveTab] = (0, react_4.useState)(() => {
+        if (typeof window !== "undefined") {
+            const stored = sessionStorage.getItem("anyspend_active_tab");
+            if (stored === "crypto" || stored === "fiat")
+                return stored;
+        }
+        return defaultActiveTab;
+    });
+    (0, react_4.useEffect)(() => {
+        sessionStorage.setItem("anyspend_active_tab", activeTab);
+    }, [activeTab]);
     const [orderId, setOrderId] = (0, react_4.useState)(loadOrder);
     const [directTransferTxHash, setDirectTransferTxHash] = (0, react_4.useState)();
     const { orderAndTransactions: oat, getOrderAndTransactionsError } = (0, react_1.useAnyspendOrderAndTransactions)(orderId);
@@ -100,9 +121,19 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     const [customRecipients, setCustomRecipients] = (0, react_4.useState)([]);
     // Payment method state with dual-state system (auto + explicit user selection)
     const { cryptoPaymentMethod, setCryptoPaymentMethod, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, resetPaymentMethods, } = (0, useCryptoPaymentMethodState_1.useCryptoPaymentMethodState)();
-    const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = (0, react_4.useState)(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
+    const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = (0, react_4.useState)(() => {
+        if (typeof window !== "undefined") {
+            const stored = sessionStorage.getItem("anyspend_fiat_method");
+            if (stored && Object.values(FiatPaymentMethod_1.FiatPaymentMethod).includes(stored))
+                return stored;
+        }
+        return FiatPaymentMethod_1.FiatPaymentMethod.NONE;
+    });
     // const [newRecipientAddress, setNewRecipientAddress] = useState("");
     // const recipientInputRef = useRef<HTMLInputElement>(null);
+    (0, react_4.useEffect)(() => {
+        sessionStorage.setItem("anyspend_fiat_method", selectedFiatPaymentMethod);
+    }, [selectedFiatPaymentMethod]);
     // Get initial chain IDs from URL or defaults
     const initialSrcChainId = sourceChainId || parseInt(searchParams.get("fromChainId") || "0") || chains_1.mainnet.id;
     const initialDstChainId = parseInt(searchParams.get("toChainId") || "0") || (isBuyMode ? destinationTokenChainId : chains_1.base.id);
@@ -119,10 +150,27 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     const [selectedSrcToken, setSelectedSrcToken] = (0, react_4.useState)(effectiveSrcToken);
     const { data: srcTokenMetadata } = (0, react_2.useTokenData)(selectedSrcToken?.chainId, selectedSrcToken?.address);
     const [srcAmount, setSrcAmount] = (0, react_4.useState)(searchParams.get("fromAmount") || "0");
-    // State for onramp amount
-    const [srcAmountOnRamp, setSrcAmountOnRamp] = (0, react_4.useState)(searchParams.get("fromAmount") || "5");
-    // State for destination chain/token selection
-    const [selectedDstChainId, setSelectedDstChainId] = (0, react_4.useState)(initialDstChainId);
+    // State for onramp amount — persisted in sessionStorage so it survives Persona KYC roundtrip
+    const [srcAmountOnRamp, setSrcAmountOnRamp] = (0, react_4.useState)(() => {
+        if (typeof window !== "undefined") {
+            const stored = sessionStorage.getItem("anyspend_fiat_amount");
+            if (stored)
+                return stored;
+        }
+        return searchParams.get("fromAmount") || "5";
+    });
+    (0, react_4.useEffect)(() => {
+        sessionStorage.setItem("anyspend_fiat_amount", srcAmountOnRamp);
+    }, [srcAmountOnRamp]);
+    // State for destination chain/token selection (sync effects come after state declarations below) — persisted in sessionStorage for Persona KYC roundtrip
+    const [selectedDstChainId, setSelectedDstChainId] = (0, react_4.useState)(() => {
+        if (!isBuyMode && typeof window !== "undefined") {
+            const stored = sessionStorage.getItem("anyspend_dst_chain_id");
+            if (stored)
+                return parseInt(stored, 10);
+        }
+        return initialDstChainId;
+    });
     // Helper to check if address is Hyperliquid USDC (supports both 34-char and 42-char formats)
     const isHyperliquidUSDCAddress = (address) => (0, anyspend_1.eqci)(address, anyspend_1.HYPERLIQUID_USDC_ADDRESS) || (0, anyspend_1.eqci)(address, anyspend_1.ZERO_ADDRESS);
     const defaultDstToken = isBuyMode
@@ -142,9 +190,29 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
         defaultToken: defaultDstToken,
         prefix: "to",
     });
-    const [selectedDstToken, setSelectedDstToken] = (0, react_4.useState)(isBuyMode ? defaultDstToken : dstTokenFromUrl);
+    const [selectedDstToken, setSelectedDstToken] = (0, react_4.useState)(() => {
+        if (!isBuyMode && typeof window !== "undefined") {
+            const stored = sessionStorage.getItem("anyspend_dst_token");
+            if (stored) {
+                try {
+                    return JSON.parse(stored);
+                }
+                catch { }
+            }
+        }
+        return isBuyMode ? defaultDstToken : dstTokenFromUrl;
+    });
     const { data: dstTokenMetadata } = (0, react_2.useTokenData)(selectedDstToken?.chainId, selectedDstToken?.address);
     const [dstAmount, setDstAmount] = (0, react_4.useState)(searchParams.get("toAmount") || "");
+    // Sync dst chain/token to sessionStorage so they survive Persona KYC roundtrip
+    (0, react_4.useEffect)(() => {
+        if (!isBuyMode)
+            sessionStorage.setItem("anyspend_dst_chain_id", selectedDstChainId.toString());
+    }, [selectedDstChainId, isBuyMode]);
+    (0, react_4.useEffect)(() => {
+        if (!isBuyMode)
+            sessionStorage.setItem("anyspend_dst_token", JSON.stringify(selectedDstToken));
+    }, [selectedDstToken, isBuyMode]);
     const [isSrcInputDirty, setIsSrcInputDirty] = (0, react_4.useState)(true);
     // Add refs to track if we've applied metadata
     const appliedSrcMetadataRef = (0, react_4.useRef)(false);
@@ -497,6 +565,16 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     }, [anyspendQuote, isSrcInputDirty, destinationTokenAmount]);
     // Call onSuccess when order is executed
     (0, useOnOrderSuccess_1.useOnOrderSuccess)({ orderData: oat, orderId, onSuccess });
+    // Clear all persisted selection state once an order is submitted — next open starts fresh
+    (0, react_4.useEffect)(() => {
+        if (orderId) {
+            sessionStorage.removeItem("anyspend_fiat_amount");
+            sessionStorage.removeItem("anyspend_active_tab");
+            sessionStorage.removeItem("anyspend_fiat_method");
+            sessionStorage.removeItem("anyspend_dst_chain_id");
+            sessionStorage.removeItem("anyspend_dst_token");
+        }
+    }, [orderId]);
     const { createOrder, isCreatingOrder } = (0, react_1.useAnyspendCreateOrder)({
         onSuccess: data => {
             const orderId = data.data.id;
@@ -577,8 +655,8 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
             if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE) {
                 return { text: "Select payment method", disable: false, error: false, loading: false };
             }
-            // If payment method is selected, show "Buy"
-            return { text: "Buy", disable: false, error: false, loading: false };
+            // If payment method is selected, show "Continue"
+            return { text: "Continue", disable: false, error: false, loading: false };
         }
         if (activeTab === "crypto") {
             // For crypto: check payment method first, then recipient
@@ -599,7 +677,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                 return { text: "Continue to payment", disable: false, error: false, loading: false };
             }
         }
-        return { text: "Buy", disable: false, error: false, loading: false };
+        return { text: "Continue", disable: false, error: false, loading: false };
     }, [
         activeInputAmountInWei,
         isSameChainSameToken,
@@ -761,7 +839,20 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                 paymentMethodString = "";
             }
             else if (paymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE_WEB2) {
-                // Stripe embedded payment form
+                // Stripe embedded payment form requires authentication + KYC
+                // Read from store directly to avoid stale closure when called from onLoginSuccess callback
+                const currentlyAuthenticated = react_2.useAuthStore.getState().isAuthenticated;
+                if (!currentlyAuthenticated) {
+                    navigateToPanel(PanelView.FIAT_AUTH, "forward");
+                    return;
+                }
+                if (!kycApprovedRef.current) {
+                    // Navigate to KYC gate. KycGate shows an explicit "Continue to Verify"
+                    // CTA and pre-signs from that user-gesture context before enabling
+                    // the useKycStatus query — so no surprise signature popup here.
+                    navigateToPanel(PanelView.FIAT_KYC, "forward");
+                    return;
+                }
                 if (!stripeWeb2Support.isSupport) {
                     react_2.toast.error("Pay with Card not available");
                     return;
@@ -870,8 +961,16 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
             window.removeEventListener("popstate", handlePopState);
         };
     }, [activePanel, navigateBack]);
-    const historyView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: navigateBack, onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full p-5", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: method => {
+    // When auth completes while on the FIAT_AUTH panel, navigate back and retry the order
+    (0, react_4.useEffect)(() => {
+        if (isAuthenticated && activePanel === PanelView.FIAT_AUTH) {
+            navigateBack();
+            handleFiatOrder(selectedFiatPaymentMethod);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isAuthenticated]);
+    const historyView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-full max-w-[560px] flex-col items-center", children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: navigateBack, onSelectOrder: onSelectOrder }) }));
+    const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-full max-w-[460px] p-5", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: method => {
                     // When user explicitly changes payment method, set it as selected
                     setSelectedCryptoPaymentMethod(method);
                 }, points: oat.data.points || undefined, onBack: () => {
@@ -880,7 +979,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                     // Reset payment methods when going back
                     resetPaymentMethods();
                 }, returnToHomeUrl: returnToHomeUrl, returnHomeLabel: returnHomeLabel, disableUrlParamManagement: disableUrlParamManagement })) }) }));
-    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: classes?.mainContent || "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && !hideHeader && ((0, jsx_runtime_1.jsxs)("div", { className: classes?.header || "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: classes?.headerLogo || "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: classes?.headerTitle || "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: tab => {
+    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: classes?.mainContent || "mx-auto flex w-full max-w-[460px] flex-col items-center gap-2 pt-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && !hideHeader && ((0, jsx_runtime_1.jsxs)("div", { className: classes?.header || "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: classes?.headerLogo || "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: classes?.headerTitle || "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: tab => {
                             setActiveTab(tab);
                             // Reset payment methods when switching tabs
                             resetPaymentMethods();
@@ -997,13 +1096,23 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
         },
         returnUrl: returnToHomeUrl,
         returnLabel: resolvedReturnLabel || undefined,
-    })) : ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-6 p-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [(0, jsx_runtime_1.jsx)(AnimatedCheckmark_1.AnimatedCheckmark, { className: "h-16 w-16" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-bold", children: defaultSuccessTitle }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary mt-1 text-sm", children: defaultSuccessDesc })] })] }), directTransferTxHash && ((0, jsx_runtime_1.jsx)("a", { href: (0, anyspend_1.getExplorerTxUrl)(selectedSrcChainId, directTransferTxHash), target: "_blank", rel: "noopener noreferrer", className: "text-as-brand hover:text-as-brand/80 text-sm underline", children: "View transaction" })), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-2", children: returnToHomeUrl ? ((0, jsx_runtime_1.jsx)(react_2.Button, { onClick: () => {
+    })) : ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-[460px] flex-col items-center gap-6 p-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [(0, jsx_runtime_1.jsx)(AnimatedCheckmark_1.AnimatedCheckmark, { className: "h-16 w-16" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-bold", children: defaultSuccessTitle }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary mt-1 text-sm", children: defaultSuccessDesc })] })] }), directTransferTxHash && ((0, jsx_runtime_1.jsx)("a", { href: (0, anyspend_1.getExplorerTxUrl)(selectedSrcChainId, directTransferTxHash), target: "_blank", rel: "noopener noreferrer", className: "text-as-brand hover:text-as-brand/80 text-sm underline", children: "View transaction" })), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-2", children: returnToHomeUrl ? ((0, jsx_runtime_1.jsx)(react_2.Button, { onClick: () => {
                         window.location.href = returnToHomeUrl;
                     }, className: "bg-as-brand hover:bg-as-brand/90 w-full text-white", children: resolvedReturnLabel || "Return to Home" })) : ((0, jsx_runtime_1.jsx)(react_2.Button, { onClick: () => {
                         onSuccess?.(directTransferTxHash);
                         setDirectTransferTxHash(undefined);
                         setB3ModalOpen(false);
                     }, className: "bg-as-brand hover:bg-as-brand/90 w-full text-white", children: resolvedReturnLabel || "Done" })) })] }));
+    const kycView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-4 px-5 pt-5", children: (0, jsx_runtime_1.jsx)(KycGate_1.KycGate, { enabled: activePanel === PanelView.FIAT_KYC, onStatusResolved: approved => {
+                if (approved) {
+                    kycApprovedRef.current = true;
+                    navigateBack();
+                    handleFiatOrder(selectedFiatPaymentMethod);
+                }
+            } }) }));
+    const authView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-full max-w-[460px]", children: (0, jsx_runtime_1.jsx)(LoginStep_1.LoginStep, { chain: baseChain, onSuccess: async () => {
+                // isAuthenticated will be true at this point — the useEffect below handles navigation
+            } }) }));
     // Add tabs to the main component when no order is loaded
     return ((0, jsx_runtime_1.jsx)(react_2.StyleRoot, { children: (0, jsx_runtime_1.jsx)("div", { className: classes?.container ||
                 (0, cn_1.cn)("anyspend-container font-inter mx-auto w-full max-w-[460px]", mode === "page" &&
@@ -1037,5 +1146,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                     (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: pointsDetailView }, "points-detail-view"),
                     (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: feeDetailView }, "fee-detail-view"),
                     (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: directTransferSuccessView }, "direct-transfer-success-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: kycView }, "fiat-kyc-view"),
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: authView }, "fiat-auth-view"),
                 ] }) }) }));
 }

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

@@ -567,13 +567,13 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 }
                                             }, className: "relative w-full", children: isCreatingOrder ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Loading quote..." })] })) : !recipientAddress ? ("Select recipient") : selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.NONE ? ("Select payment method") : anyspendQuote ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Buy" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) })] })] }));
     // Recipient selection view
-    const recipientSelectionView = ((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)(RecipientSelection_1.RecipientSelection, { initialValue: recipientAddress || "", title: "Add recipient address or ENS", description: "Send tokens to another address", onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onConfirm: address => {
+    const recipientSelectionView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-full max-w-[460px] rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(RecipientSelection_1.RecipientSelection, { initialValue: recipientAddress || "", title: "Add recipient address or ENS", description: "Send tokens to another address", onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onConfirm: address => {
                 // User manually selected a recipient
                 setSelectedRecipientAddress(address);
                 setActivePanel(PanelView.CONFIRM_ORDER);
             } }) }));
     // Crypto payment method view
-    const cryptoPaymentMethodView = ((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)(CryptoPaymentMethod_1.CryptoPaymentMethod, { selectedPaymentMethod: effectiveCryptoPaymentMethod, setSelectedPaymentMethod: method => {
+    const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-full max-w-[460px] rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { selectedPaymentMethod: effectiveCryptoPaymentMethod, setSelectedPaymentMethod: method => {
                 // When user explicitly selects a payment method, save it
                 setSelectedCryptoPaymentMethod(method);
             }, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onSelectPaymentMethod: (method) => {
@@ -591,9 +591,9 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         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: handleBackToConfirmOrder, onSelectPaymentMethod: handleFiatPaymentMethodSelect, srcAmountOnRamp: srcFiatAmount }) }));
+    const fiatPaymentMethodView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-full max-w-[460px] 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) }) }));
+    const pointsDetailView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-full max-w-[460px] 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
     return ((0, jsx_runtime_1.jsx)(react_2.StyleRoot, { children: (0, jsx_runtime_1.jsx)(react_2.TransitionPanel, { activeIndex: orderId
                 ? oat

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

@@ -232,7 +232,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
     };
     const headerContent = header ? (header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: actionLabel }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-sm", children: "Pay from any token to execute a custom exact-in transaction." })] }) }));
     const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: classes?.container ||
-            "anyspend-custom-exact-in-container mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues, customRecipientLabel: customRecipientLabel }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: classes?.swapDirectionButton ||
+            "anyspend-custom-exact-in-container mx-auto flex w-full max-w-[460px] flex-col items-center gap-2", children: [headerContent, (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues, customRecipientLabel: customRecipientLabel }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: classes?.swapDirectionButton ||
                                     "swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: false, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: isSrcInputDirty && !destinationTokenAmount ? dstAmount : dstAmountInput, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
                                 setIsSrcInputDirty(false);
                                 setDstAmountInput(value);
@@ -399,7 +399,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             react_2.toast.error("Failed to create order: " + err.message);
         }
     };
-    const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: paymentType === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
+    const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-full max-w-[460px]", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: paymentType === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
                     setOrderId(undefined);
                     setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
                 }, disableUrlParamManagement: true, points: oat.data.points || undefined, returnToHomeUrl: returnToHomeUrl, returnHomeLabel: returnHomeLabel })) }) }));

package/dist/cjs/anyspend/react/components/checkout/AnySpendCheckout.d.ts

@@ -1,10 +1,12 @@
 import { type ReactNode } from "react";
-import { type PaymentMethod } from "./CheckoutPaymentPanel";
-export type { AnySpendCheckoutClasses } from "../types/classes";
+import type { AddressData, CheckoutFormComponentProps, CheckoutFormSchema, DiscountResult, ShippingOption } from "../../../types/forms";
 import type { AnySpendCheckoutClasses } from "../types/classes";
 import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "../types/customization";
-import type { CheckoutFormSchema, CheckoutFormComponentProps, ShippingOption, DiscountResult, AddressData } from "../../../types/forms";
-export type { CheckoutFormSchema, CheckoutFormComponentProps, ShippingOption, DiscountResult, AddressData };
+import { type PaymentMethod } from "./CheckoutPaymentPanel";
+import { type VariablePricingConfig } from "./VariablePricingInput";
+export type { AnySpendCheckoutClasses } from "../types/classes";
+export type { VariablePricingConfig } from "./VariablePricingInput";
+export type { AddressData, CheckoutFormComponentProps, CheckoutFormSchema, DiscountResult, ShippingOption };
 export interface CheckoutItem {
     id?: string;
     name: string;
@@ -33,7 +35,7 @@ export interface AnySpendCheckoutProps {
     destinationTokenAddress: string;
     /** The destination chain ID */
     destinationTokenChainId: number;
-    /** Line items */
+    /** Line items. When `variablePricing.enabled` is true, pass a single placeholder item (e.g. amount "0") — the user-entered amount overrides the total. */
     items: CheckoutItem[];
     /** Override computed total */
     totalAmount?: string;
@@ -113,5 +115,11 @@ export interface AnySpendCheckoutProps {
     onDiscountApplied?: (result: DiscountResult) => void;
     /** Async function to validate a discount code. Returns DiscountResult. */
     validateDiscount?: (code: string) => Promise<DiscountResult>;
+    /** Variable pricing / name your price config. When enabled, user enters amount before payment. */
+    variablePricing?: VariablePricingConfig;
+    /** When true, fees are added on top of the amount (payer pays more, receiver gets exact amount) */
+    feeOnTop?: boolean;
+    /** When true, identity verification (KYC) is required before card payment. Defaults to false. */
+    kycEnabled?: boolean;
 }
-export declare function AnySpendCheckout({ mode, recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText, checkoutSessionId, onSuccess, onError, returnUrl, returnLabel, classes, footer, defaultPaymentMethod, senderAddress, slots, content, theme, showPoints, showOrderId, shipping: shippingProp, tax, discount: discountProp, summaryLines, formSchema, formComponent, onFormSubmit, shippingOptions, collectShippingAddress, onShippingChange: onShippingChangeProp, enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount, }: AnySpendCheckoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnySpendCheckout({ mode, recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText, checkoutSessionId, onSuccess, onError, returnUrl, returnLabel, classes, footer, defaultPaymentMethod, senderAddress, slots, content, theme, showPoints, showOrderId, shipping: shippingProp, tax, discount: discountProp, summaryLines, formSchema, formComponent, onFormSubmit, shippingOptions, collectShippingAddress, onShippingChange: onShippingChangeProp, enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount, variablePricing, feeOnTop, kycEnabled, }: AnySpendCheckoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/anyspend/react/components/checkout/AnySpendCheckout.js

@@ -3,17 +3,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnySpendCheckout = AnySpendCheckout;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("../../../../global-account/react");
 const constants_1 = require("../../../../anyspend/constants");
+const react_1 = require("../../../../global-account/react");
 const number_1 = require("../../../../shared/utils/number");
 const react_2 = require("react");
 const useAnyspendQuote_1 = require("../../hooks/useAnyspendQuote");
 const AnySpendFingerprintWrapper_1 = require("../AnySpendFingerprintWrapper");
+const AnySpendCustomizationContext_1 = require("../context/AnySpendCustomizationContext");
 const CheckoutCartPanel_1 = require("./CheckoutCartPanel");
 const CheckoutFormPanel_1 = require("./CheckoutFormPanel");
 const CheckoutLayout_1 = require("./CheckoutLayout");
 const CheckoutPaymentPanel_1 = require("./CheckoutPaymentPanel");
-const AnySpendCustomizationContext_1 = require("../context/AnySpendCustomizationContext");
+const VariablePricingInput_1 = require("./VariablePricingInput");
 const emptyAddress = { street: "", city: "", state: "", zip: "", country: "" };
 function AnySpendCheckout({ mode = "page", recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText = "Pay", checkoutSessionId, onSuccess, onError, returnUrl, returnLabel, classes, footer, defaultPaymentMethod, senderAddress, slots, content, theme, showPoints, showOrderId, shipping: shippingProp, tax, discount: discountProp, summaryLines, 
 // New form props
@@ -21,7 +22,13 @@ formSchema, formComponent, onFormSubmit,
 // New shipping props
 shippingOptions, collectShippingAddress, onShippingChange: onShippingChangeProp, 
 // New discount props
-enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount, }) {
+enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount, 
+// Variable pricing
+variablePricing, feeOnTop, kycEnabled = false, }) {
+    // ===== Variable pricing state =====
+    const [variablePricingAmount, setVariablePricingAmount] = (0, react_2.useState)("0");
+    const isVariablePricingActive = variablePricing?.enabled === true;
+    const isVariablePricingValid = isVariablePricingActive ? variablePricingAmount !== "0" : true;
     // ===== Form state =====
     const [formData, setFormData] = (0, react_2.useState)({});
     const [selectedShipping, setSelectedShipping] = (0, react_2.useState)(null);
@@ -66,7 +73,25 @@ enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount,
         return undefined;
     }, [appliedDiscount, discountProp]);
     // Compute total from items + adjustments (including dynamic shipping/discount)
+    // Variable pricing overrides the total when active
     const computedTotal = (0, react_2.useMemo)(() => {
+        if (isVariablePricingActive && variablePricingAmount !== "0") {
+            let total = (0, number_1.safeBigInt)(variablePricingAmount);
+            if (effectiveShipping?.amount)
+                total += (0, number_1.safeBigInt)(effectiveShipping.amount);
+            const taxAmt = typeof tax === "string" ? tax : tax?.amount;
+            if (taxAmt)
+                total += (0, number_1.safeBigInt)(taxAmt);
+            if (effectiveDiscount?.amount)
+                total -= (0, number_1.safeBigInt)(effectiveDiscount.amount);
+            if (summaryLines) {
+                for (const line of summaryLines)
+                    total += (0, number_1.safeBigInt)(line.amount);
+            }
+            if (total < BigInt(0))
+                total = BigInt(0);
+            return total.toString();
+        }
         if (totalAmountOverride)
             return totalAmountOverride;
         let total = BigInt(0);
@@ -87,7 +112,16 @@ enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount,
         if (total < BigInt(0))
             total = BigInt(0);
         return total.toString();
-    }, [items, totalAmountOverride, effectiveShipping, tax, effectiveDiscount, summaryLines]);
+    }, [
+        items,
+        totalAmountOverride,
+        effectiveShipping,
+        tax,
+        effectiveDiscount,
+        summaryLines,
+        isVariablePricingActive,
+        variablePricingAmount,
+    ]);
     // Get destination token metadata
     const { data: tokenData } = (0, react_1.useTokenData)(destinationTokenChainId, destinationTokenAddress);
     const tokenSymbol = tokenData?.symbol || "";
@@ -139,14 +173,27 @@ enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount,
             meta.customerName = formData.name;
         if (checkoutSessionId)
             meta.checkoutSessionId = checkoutSessionId;
+        if (isVariablePricingActive && variablePricingAmount !== "0") {
+            meta.variablePricingAmount = variablePricingAmount;
+        }
         return Object.keys(meta).length > 0 ? meta : undefined;
-    }, [formData, selectedShipping, shippingAddress, appliedDiscount, checkoutSessionId]);
-    // Check if required form fields are filled
+    }, [
+        formData,
+        selectedShipping,
+        shippingAddress,
+        appliedDiscount,
+        checkoutSessionId,
+        isVariablePricingActive,
+        variablePricingAmount,
+    ]);
+    // Check if required form fields are filled and variable pricing is valid
     const isFormValid = (0, react_2.useMemo)(() => {
+        if (!isVariablePricingValid)
+            return false;
         if (!formSchema)
             return true;
         return formSchema.fields.filter(f => f.required).every(f => formData[f.id] != null && formData[f.id] !== "");
-    }, [formSchema, formData]);
+    }, [formSchema, formData, isVariablePricingValid]);
     // Check if we have a form panel to show
     const hasFormContent = (formSchema && formSchema.fields.length > 0) ||
         formComponent ||
@@ -154,5 +201,5 @@ enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount,
         (shippingOptions && shippingOptions.length > 0) ||
         collectShippingAddress ||
         enableDiscountCode;
-    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: (0, jsx_runtime_1.jsx)(AnySpendCustomizationContext_1.AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: (0, jsx_runtime_1.jsx)(CheckoutLayout_1.CheckoutLayout, { mode: mode, paymentPanel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasFormContent && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsx)(CheckoutFormPanel_1.CheckoutFormPanel, { formSchema: formSchema, formComponent: formComponent, shippingOptions: shippingOptions, collectShippingAddress: collectShippingAddress, enableDiscountCode: enableDiscountCode, validateDiscount: validateDiscount, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, classes: classes, formData: formData, onFormDataChange: handleFormDataChange, selectedShipping: selectedShipping, onShippingChange: handleShippingChange, appliedDiscount: appliedDiscount, onDiscountApplied: handleDiscountApplied, onDiscountRemoved: handleDiscountRemoved, shippingAddress: shippingAddress, onShippingAddressChange: setShippingAddress, checkoutFormSlot: slots?.checkoutForm }), (0, jsx_runtime_1.jsx)("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), (0, jsx_runtime_1.jsx)(CheckoutPaymentPanel_1.CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress, showPoints: showPoints, showOrderId: showOrderId, callbackMetadata: checkoutFormMetadata, isFormValid: isFormValid })] }), cartPanel: (0, jsx_runtime_1.jsx)(CheckoutCartPanel_1.CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes, footer: footer, shipping: effectiveShipping, tax: typeof tax === "string" ? { amount: tax } : tax, discount: effectiveDiscount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), classes: classes }) }) }));
+    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: (0, jsx_runtime_1.jsx)(AnySpendCustomizationContext_1.AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: (0, jsx_runtime_1.jsx)(CheckoutLayout_1.CheckoutLayout, { mode: mode, paymentPanel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isVariablePricingActive && tokenData && variablePricing && ((0, jsx_runtime_1.jsx)(VariablePricingInput_1.VariablePricingInput, { config: variablePricing, tokenDecimals: tokenDecimals, tokenSymbol: tokenSymbol, themeColor: themeColor, onChange: setVariablePricingAmount })), hasFormContent && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsx)(CheckoutFormPanel_1.CheckoutFormPanel, { formSchema: formSchema, formComponent: formComponent, shippingOptions: shippingOptions, collectShippingAddress: collectShippingAddress, enableDiscountCode: enableDiscountCode, validateDiscount: validateDiscount, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, classes: classes, formData: formData, onFormDataChange: handleFormDataChange, selectedShipping: selectedShipping, onShippingChange: handleShippingChange, appliedDiscount: appliedDiscount, onDiscountApplied: handleDiscountApplied, onDiscountRemoved: handleDiscountRemoved, shippingAddress: shippingAddress, onShippingAddressChange: setShippingAddress, checkoutFormSlot: slots?.checkoutForm }), (0, jsx_runtime_1.jsx)("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), (0, jsx_runtime_1.jsx)(CheckoutPaymentPanel_1.CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress, showPoints: showPoints, showOrderId: showOrderId, callbackMetadata: checkoutFormMetadata, isFormValid: isFormValid, feeOnTop: feeOnTop, kycEnabled: kycEnabled })] }), cartPanel: (0, jsx_runtime_1.jsx)(CheckoutCartPanel_1.CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes, footer: footer, shipping: effectiveShipping, tax: typeof tax === "string" ? { amount: tax } : tax, discount: effectiveDiscount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), classes: classes }) }) }));
 }

package/dist/cjs/anyspend/react/components/checkout/AnySpendCheckoutTrigger.d.ts

@@ -77,5 +77,7 @@ export interface AnySpendCheckoutTriggerProps {
     };
     /** Additional summary line items (fees, tips, etc.) */
     summaryLines?: CheckoutSummaryLine[];
+    /** When true, identity verification (KYC) is required before card payment. Defaults to false. */
+    kycEnabled?: boolean;
 }
-export declare function AnySpendCheckoutTrigger({ recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText, workflowId, orgId, callbackMetadata, onSuccess, onError, returnUrl, returnLabel, classes, footer, defaultPaymentMethod, senderAddress, slots, content, theme, shipping, tax, discount, summaryLines, }: AnySpendCheckoutTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnySpendCheckoutTrigger({ recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText, workflowId, orgId, callbackMetadata, onSuccess, onError, returnUrl, returnLabel, classes, footer, defaultPaymentMethod, senderAddress, slots, content, theme, shipping, tax, discount, summaryLines, kycEnabled, }: AnySpendCheckoutTriggerProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/anyspend/react/components/checkout/AnySpendCheckoutTrigger.js

@@ -12,7 +12,7 @@ const AnySpendCustomizationContext_1 = require("../context/AnySpendCustomization
 const CheckoutCartPanel_1 = require("./CheckoutCartPanel");
 const CheckoutPaymentPanel_1 = require("./CheckoutPaymentPanel");
 const PoweredByBranding_1 = require("./PoweredByBranding");
-function AnySpendCheckoutTrigger({ recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText = "Pay", workflowId, orgId, callbackMetadata, onSuccess, onError, returnUrl, returnLabel, classes, footer, defaultPaymentMethod, senderAddress, slots, content, theme, shipping, tax, discount, summaryLines, }) {
+function AnySpendCheckoutTrigger({ recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText = "Pay", workflowId, orgId, callbackMetadata, onSuccess, onError, returnUrl, returnLabel, classes, footer, defaultPaymentMethod, senderAddress, slots, content, theme, shipping, tax, discount, summaryLines, kycEnabled = false, }) {
     // Merge workflowId + orgId into callbackMetadata
     const mergedMetadata = (0, react_2.useMemo)(() => {
         if (!workflowId && !orgId && !callbackMetadata)
@@ -57,5 +57,5 @@ function AnySpendCheckoutTrigger({ recipientAddress, destinationTokenAddress, de
     const formattedTotal = (0, react_2.useMemo)(() => (0, number_1.formatTokenAmount)(BigInt(computedTotal || "0"), tokenDecimals), [computedTotal, tokenDecimals]);
     const hasItems = items && items.length > 0;
     const fingerprint = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
-    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: (0, jsx_runtime_1.jsx)(AnySpendCustomizationContext_1.AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-checkout-trigger flex flex-col", children: [hasItems && ((0, jsx_runtime_1.jsx)("div", { className: "border-b border-gray-200 p-5 dark:border-neutral-700", children: (0, jsx_runtime_1.jsx)(CheckoutCartPanel_1.CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes, footer: footer, shipping: typeof shipping === "string" ? { amount: shipping } : shipping, tax: typeof tax === "string" ? { amount: tax } : tax, discount: typeof discount === "string" ? { amount: discount } : discount, summaryLines: summaryLines }) })), !hasItems && ((0, jsx_runtime_1.jsx)("div", { className: "border-b border-gray-200 p-5 dark:border-neutral-700", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between", classes?.cartSummary), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Total" }), (0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-base font-semibold text-gray-900 dark:text-gray-100", classes?.cartTotal), children: [formattedTotal, " ", tokenSymbol] })] }), footer === undefined ? ((0, jsx_runtime_1.jsx)(PoweredByBranding_1.PoweredByBranding, { organizationName: organizationName, organizationLogo: organizationLogo, classes: classes })) : (footer)] }) })), (0, jsx_runtime_1.jsx)("div", { className: "px-2 py-3", children: (0, jsx_runtime_1.jsx)(CheckoutPaymentPanel_1.CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, callbackMetadata: mergedMetadata, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress }) })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: (0, jsx_runtime_1.jsx)(AnySpendCustomizationContext_1.AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-checkout-trigger flex flex-col", children: [hasItems && ((0, jsx_runtime_1.jsx)("div", { className: "border-b border-gray-200 p-5 dark:border-neutral-700", children: (0, jsx_runtime_1.jsx)(CheckoutCartPanel_1.CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes, footer: footer, shipping: typeof shipping === "string" ? { amount: shipping } : shipping, tax: typeof tax === "string" ? { amount: tax } : tax, discount: typeof discount === "string" ? { amount: discount } : discount, summaryLines: summaryLines }) })), !hasItems && ((0, jsx_runtime_1.jsx)("div", { className: "border-b border-gray-200 p-5 dark:border-neutral-700", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between", classes?.cartSummary), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Total" }), (0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-base font-semibold text-gray-900 dark:text-gray-100", classes?.cartTotal), children: [formattedTotal, " ", tokenSymbol] })] }), footer === undefined ? ((0, jsx_runtime_1.jsx)(PoweredByBranding_1.PoweredByBranding, { organizationName: organizationName, organizationLogo: organizationLogo, classes: classes })) : (footer)] }) })), (0, jsx_runtime_1.jsx)("div", { className: "px-2 py-3", children: (0, jsx_runtime_1.jsx)(CheckoutPaymentPanel_1.CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, callbackMetadata: mergedMetadata, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress, kycEnabled: kycEnabled }) })] }) }) }));
 }

package/dist/cjs/anyspend/react/components/checkout/CheckoutPaymentPanel.d.ts

@@ -26,6 +26,10 @@ interface CheckoutPaymentPanelProps {
     showOrderId?: boolean;
     /** Whether the checkout form is valid. When false, payment methods are disabled. */
     isFormValid?: boolean;
+    /** When true, fees are added on top (payer pays more, receiver gets exact amount) */
+    feeOnTop?: boolean;
+    /** When true, identity verification (KYC) is required before card payment. Defaults to false. */
+    kycEnabled?: boolean;
 }
-export declare function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText, themeColor, returnUrl, returnLabel, onSuccess, onError, callbackMetadata, classes, defaultPaymentMethod, senderAddress, showPoints, showOrderId, isFormValid, }: CheckoutPaymentPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText, themeColor, returnUrl, returnLabel, onSuccess, onError, callbackMetadata, classes, defaultPaymentMethod, senderAddress, showPoints, showOrderId, isFormValid, feeOnTop, kycEnabled, }: CheckoutPaymentPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/anyspend/react/components/checkout/CheckoutPaymentPanel.js

@@ -29,7 +29,7 @@ function AmexLogo() {
 function CoinbaseLogo() {
     return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 24 24", style: { width: 20, height: 20 }, "aria-label": "Coinbase", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "12", fill: "#0052FF" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 4.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm-1.8 4.8h3.6c.33 0 .6.27.6.6v4.2c0 .33-.27.6-.6.6h-3.6a.6.6 0 0 1-.6-.6V9.9c0-.33.27-.6.6-.6z", fill: "white" })] }));
 }
-function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText, themeColor, returnUrl, returnLabel, onSuccess, onError, callbackMetadata, classes, defaultPaymentMethod, senderAddress, showPoints, showOrderId, isFormValid = true, }) {
+function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText, themeColor, returnUrl, returnLabel, onSuccess, onError, callbackMetadata, classes, defaultPaymentMethod, senderAddress, showPoints, showOrderId, isFormValid = true, feeOnTop, kycEnabled = false, }) {
     const [paymentMethod, setPaymentMethod] = (0, react_2.useState)(defaultPaymentMethod ?? null);
     // Restore activeOrderId from sessionStorage (handles page refresh / Coinbase return)
     const [activeOrderId, setActiveOrderId] = (0, react_2.useState)(() => {
@@ -60,5 +60,5 @@ function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress, desti
         ? "bg-white dark:bg-neutral-900"
         : "bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800", classes?.paymentMethodButton);
     const expandedPanelClass = (0, cn_1.cn)("anyspend-payment-method-panel border-t border-gray-100 bg-white px-4 py-4 dark:border-neutral-800 dark:bg-neutral-900");
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-payment-panel flex flex-col gap-5", classes?.paymentPanel), children: [(0, jsx_runtime_1.jsx)("h2", { className: (0, cn_1.cn)("anyspend-payment-title text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.paymentTitle), children: "Payment" }), !isFormValid && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-amber-600 dark:text-amber-400", children: "Please complete the required fields above before proceeding to payment." })), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-payment-methods divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 dark:divide-neutral-700 dark:border-neutral-700", !isFormValid && "pointer-events-none opacity-50", classes?.paymentMethodSelector), children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-crypto", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod(paymentMethod === "crypto" ? null : "crypto"), className: accordionButtonClass(paymentMethod === "crypto"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "crypto", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Pay with crypto" })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "crypto" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(CryptoPayPanel_1.CryptoPayPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, buttonText: buttonText, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes, senderAddress: senderAddress }) }) }, "crypto-panel")) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-card", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod(paymentMethod === "card" ? null : "card"), className: accordionButtonClass(paymentMethod === "card"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "card", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(lucide_react_1.CreditCard, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Credit or debit card" }), (0, jsx_runtime_1.jsxs)("div", { className: "ml-auto flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(VisaLogo, {}), (0, jsx_runtime_1.jsx)(MastercardLogo, {}), (0, jsx_runtime_1.jsx)(AmexLogo, {})] })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "card" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(FiatCheckoutPanel_1.FiatCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "card-panel")) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-coinbase", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod(paymentMethod === "coinbase" ? null : "coinbase"), className: accordionButtonClass(paymentMethod === "coinbase"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "coinbase", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(CoinbaseLogo, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Coinbase Pay" })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "coinbase" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(CoinbaseCheckoutPanel_1.CoinbaseCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "coinbase-panel")) })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-payment-panel flex flex-col gap-5", classes?.paymentPanel), children: [(0, jsx_runtime_1.jsx)("h2", { className: (0, cn_1.cn)("anyspend-payment-title text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.paymentTitle), children: "Payment" }), !isFormValid && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-amber-600 dark:text-amber-400", children: "Please complete the required fields above before proceeding to payment." })), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-payment-methods divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 dark:divide-neutral-700 dark:border-neutral-700", !isFormValid && "pointer-events-none opacity-50", classes?.paymentMethodSelector), children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-crypto", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod(paymentMethod === "crypto" ? null : "crypto"), className: accordionButtonClass(paymentMethod === "crypto"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "crypto", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Pay with crypto" })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "crypto" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(CryptoPayPanel_1.CryptoPayPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, buttonText: buttonText, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes, senderAddress: senderAddress }) }) }, "crypto-panel")) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-card", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod(paymentMethod === "card" ? null : "card"), className: accordionButtonClass(paymentMethod === "card"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "card", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(lucide_react_1.CreditCard, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Credit or debit card" }), (0, jsx_runtime_1.jsxs)("div", { className: "ml-auto flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(VisaLogo, {}), (0, jsx_runtime_1.jsx)(MastercardLogo, {}), (0, jsx_runtime_1.jsx)(AmexLogo, {})] })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "card" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(FiatCheckoutPanel_1.FiatCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes, feeOnTop: feeOnTop, kycEnabled: kycEnabled }) }) }, "card-panel")) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-method-coinbase", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPaymentMethod(paymentMethod === "coinbase" ? null : "coinbase"), className: accordionButtonClass(paymentMethod === "coinbase"), children: [(0, jsx_runtime_1.jsx)(RadioCircle, { selected: paymentMethod === "coinbase", themeColor: themeColor }), (0, jsx_runtime_1.jsx)(CoinbaseLogo, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Coinbase Pay" })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: paymentMethod === "coinbase" && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: (0, jsx_runtime_1.jsx)("div", { className: expandedPanelClass, children: (0, jsx_runtime_1.jsx)(CoinbaseCheckoutPanel_1.CoinbaseCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "coinbase-panel")) })] })] })] }));
 }