@b3dotfun/sdk 0.1.68 → 0.1.69-alpha.0

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { eqci, getChainName, getDefaultToken, getExplorerTxUrl, getHyperliquidUSDCToken, HYPERLIQUID_CHAIN_ID, HYPERLIQUID_USDC_ADDRESS, USDC_BASE, ZERO_ADDRESS, } from "../../../anyspend/index.js";
 import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useGasPrice, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
-import { Button, ShinyButton, StyleRoot, TabsPrimitive, toast, TransitionPanel, useAccountWallet, useB3Config, useModalStore, useProfile, useRouter, useSearchParamsSSR, useTokenBalanceDirect, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
+import { Button, ShinyButton, StyleRoot, TabsPrimitive, toast, TransitionPanel, useAccountWallet, useAuth, useAuthStore, useB3Config, useModalStore, useProfile, useRouter, useSearchParamsSSR, useTokenBalanceDirect, useTokenData, useTokenFromUrl, } from "../../../global-account/react/index.js";
 import BottomNavigation from "../../../global-account/react/components/ManageAccount/BottomNavigation.js";
 import { useAccountWalletImage } from "../../../global-account/react/hooks/useAccountWallet.js";
 import { getThirdwebChain } from "../../../shared/constants/chains/supported.js";
@@ -30,6 +30,8 @@ import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaym
 import { GasIndicator } from "./common/GasIndicator.js";
 import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails.js";
 import { OrderHistory } from "./common/OrderHistory.js";
+import { KycGate } from "./checkout/KycGate.js";
+import { LoginStep } from "../../../global-account/react/components/SignInWithB3/steps/LoginStep.js";
 import { PanelOnramp } from "./common/PanelOnramp.js";
 import { PanelOnrampPayment } from "./common/PanelOnrampPayment.js";
 import { PointsDetailPanel } from "./common/PointsDetailPanel.js";
@@ -50,19 +52,28 @@ export 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 || (PanelView = {}));
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
 export function AnySpend(props) {
     const fingerprintConfig = getFingerprintConfig();
     return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendCustomizationProvider, { slots: props.slots, content: props.content, theme: props.theme, children: _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 } = useAnySpendCustomization();
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
     const { partnerId } = useB3Config();
     const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
     const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+    const { isAuthenticated } = 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 = 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
@@ -72,7 +83,17 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     const animationDirection = useRef(null);
     // Track previous panel for proper back navigation
     const previousPanel = useRef(PanelView.MAIN);
-    const [activeTab, setActiveTab] = useState(defaultActiveTab);
+    const [activeTab, setActiveTab] = useState(() => {
+        if (typeof window !== "undefined") {
+            const stored = sessionStorage.getItem("anyspend_active_tab");
+            if (stored === "crypto" || stored === "fiat")
+                return stored;
+        }
+        return defaultActiveTab;
+    });
+    useEffect(() => {
+        sessionStorage.setItem("anyspend_active_tab", activeTab);
+    }, [activeTab]);
     const [orderId, setOrderId] = useState(loadOrder);
     const [directTransferTxHash, setDirectTransferTxHash] = useState();
     const { orderAndTransactions: oat, getOrderAndTransactionsError } = useAnyspendOrderAndTransactions(orderId);
@@ -93,9 +114,19 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     const [customRecipients, setCustomRecipients] = useState([]);
     // Payment method state with dual-state system (auto + explicit user selection)
     const { cryptoPaymentMethod, setCryptoPaymentMethod, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, resetPaymentMethods, } = useCryptoPaymentMethodState();
-    const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState(FiatPaymentMethod.NONE);
+    const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState(() => {
+        if (typeof window !== "undefined") {
+            const stored = sessionStorage.getItem("anyspend_fiat_method");
+            if (stored && Object.values(FiatPaymentMethod).includes(stored))
+                return stored;
+        }
+        return FiatPaymentMethod.NONE;
+    });
     // const [newRecipientAddress, setNewRecipientAddress] = useState("");
     // const recipientInputRef = useRef<HTMLInputElement>(null);
+    useEffect(() => {
+        sessionStorage.setItem("anyspend_fiat_method", selectedFiatPaymentMethod);
+    }, [selectedFiatPaymentMethod]);
     // Get initial chain IDs from URL or defaults
     const initialSrcChainId = sourceChainId || parseInt(searchParams.get("fromChainId") || "0") || mainnet.id;
     const initialDstChainId = parseInt(searchParams.get("toChainId") || "0") || (isBuyMode ? destinationTokenChainId : base.id);
@@ -112,10 +143,27 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     const [selectedSrcToken, setSelectedSrcToken] = useState(effectiveSrcToken);
     const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
     const [srcAmount, setSrcAmount] = useState(searchParams.get("fromAmount") || "0");
-    // State for onramp amount
-    const [srcAmountOnRamp, setSrcAmountOnRamp] = useState(searchParams.get("fromAmount") || "5");
-    // State for destination chain/token selection
-    const [selectedDstChainId, setSelectedDstChainId] = useState(initialDstChainId);
+    // State for onramp amount — persisted in sessionStorage so it survives Persona KYC roundtrip
+    const [srcAmountOnRamp, setSrcAmountOnRamp] = useState(() => {
+        if (typeof window !== "undefined") {
+            const stored = sessionStorage.getItem("anyspend_fiat_amount");
+            if (stored)
+                return stored;
+        }
+        return searchParams.get("fromAmount") || "5";
+    });
+    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] = 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) => eqci(address, HYPERLIQUID_USDC_ADDRESS) || eqci(address, ZERO_ADDRESS);
     const defaultDstToken = isBuyMode
@@ -135,9 +183,29 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
         defaultToken: defaultDstToken,
         prefix: "to",
     });
-    const [selectedDstToken, setSelectedDstToken] = useState(isBuyMode ? defaultDstToken : dstTokenFromUrl);
+    const [selectedDstToken, setSelectedDstToken] = 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 } = useTokenData(selectedDstToken?.chainId, selectedDstToken?.address);
     const [dstAmount, setDstAmount] = useState(searchParams.get("toAmount") || "");
+    // Sync dst chain/token to sessionStorage so they survive Persona KYC roundtrip
+    useEffect(() => {
+        if (!isBuyMode)
+            sessionStorage.setItem("anyspend_dst_chain_id", selectedDstChainId.toString());
+    }, [selectedDstChainId, isBuyMode]);
+    useEffect(() => {
+        if (!isBuyMode)
+            sessionStorage.setItem("anyspend_dst_token", JSON.stringify(selectedDstToken));
+    }, [selectedDstToken, isBuyMode]);
     const [isSrcInputDirty, setIsSrcInputDirty] = useState(true);
     // Add refs to track if we've applied metadata
     const appliedSrcMetadataRef = useRef(false);
@@ -490,6 +558,16 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     }, [anyspendQuote, isSrcInputDirty, destinationTokenAmount]);
     // Call onSuccess when order is executed
     useOnOrderSuccess({ orderData: oat, orderId, onSuccess });
+    // Clear all persisted selection state once an order is submitted — next open starts fresh
+    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 } = useAnyspendCreateOrder({
         onSuccess: data => {
             const orderId = data.data.id;
@@ -570,8 +648,8 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
             if (selectedFiatPaymentMethod === 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
@@ -592,7 +670,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,
@@ -754,7 +832,20 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                 paymentMethodString = "";
             }
             else if (paymentMethod === 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 = 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) {
                     toast.error("Pay with Card not available");
                     return;
@@ -863,8 +954,16 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
             window.removeEventListener("popstate", handlePopState);
         };
     }, [activePanel, navigateBack]);
-    const historyView = (_jsx("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: _jsx(OrderHistory, { mode: mode, onBack: navigateBack, onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full p-5", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsx(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
+    useEffect(() => {
+        if (isAuthenticated && activePanel === PanelView.FIAT_AUTH) {
+            navigateBack();
+            handleFiatOrder(selectedFiatPaymentMethod);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isAuthenticated]);
+    const historyView = (_jsx("div", { className: "mx-auto flex w-full max-w-[560px] flex-col items-center", children: _jsx(OrderHistory, { mode: mode, onBack: navigateBack, onSelectOrder: onSelectOrder }) }));
+    const orderDetailsView = (_jsx("div", { className: "mx-auto w-full max-w-[460px] p-5", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsx(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: () => {
@@ -873,7 +972,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                     // Reset payment methods when going back
                     resetPaymentMethods();
                 }, returnToHomeUrl: returnToHomeUrl, returnHomeLabel: returnHomeLabel, disableUrlParamManagement: disableUrlParamManagement })) }) }));
-    const mainView = (_jsxs("div", { className: classes?.mainContent || "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5", children: [_jsxs("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && !hideHeader && (_jsxs("div", { className: classes?.header || "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _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" }) })), _jsx("div", { children: _jsxs("h1", { className: classes?.headerTitle || "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: tab => {
+    const mainView = (_jsxs("div", { className: classes?.mainContent || "mx-auto flex w-full max-w-[460px] flex-col items-center gap-2 pt-5", children: [_jsxs("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && !hideHeader && (_jsxs("div", { className: classes?.header || "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _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" }) })), _jsx("div", { children: _jsxs("h1", { className: classes?.headerTitle || "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: tab => {
                             setActiveTab(tab);
                             // Reset payment methods when switching tabs
                             resetPaymentMethods();
@@ -990,13 +1089,23 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
         },
         returnUrl: returnToHomeUrl,
         returnLabel: resolvedReturnLabel || undefined,
-    })) : (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-6 p-5", children: [_jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx(AnimatedCheckmark, { className: "h-16 w-16" }), _jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "text-as-primary text-xl font-bold", children: defaultSuccessTitle }), _jsx("p", { className: "text-as-secondary mt-1 text-sm", children: defaultSuccessDesc })] })] }), directTransferTxHash && (_jsx("a", { href: getExplorerTxUrl(selectedSrcChainId, directTransferTxHash), target: "_blank", rel: "noopener noreferrer", className: "text-as-brand hover:text-as-brand/80 text-sm underline", children: "View transaction" })), _jsx("div", { className: "flex w-full flex-col gap-2", children: returnToHomeUrl ? (_jsx(Button, { onClick: () => {
+    })) : (_jsxs("div", { className: "mx-auto flex w-full max-w-[460px] flex-col items-center gap-6 p-5", children: [_jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx(AnimatedCheckmark, { className: "h-16 w-16" }), _jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "text-as-primary text-xl font-bold", children: defaultSuccessTitle }), _jsx("p", { className: "text-as-secondary mt-1 text-sm", children: defaultSuccessDesc })] })] }), directTransferTxHash && (_jsx("a", { href: getExplorerTxUrl(selectedSrcChainId, directTransferTxHash), target: "_blank", rel: "noopener noreferrer", className: "text-as-brand hover:text-as-brand/80 text-sm underline", children: "View transaction" })), _jsx("div", { className: "flex w-full flex-col gap-2", children: returnToHomeUrl ? (_jsx(Button, { onClick: () => {
                         window.location.href = returnToHomeUrl;
                     }, className: "bg-as-brand hover:bg-as-brand/90 w-full text-white", children: resolvedReturnLabel || "Return to Home" })) : (_jsx(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 = (_jsx("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-4 px-5 pt-5", children: _jsx(KycGate, { enabled: activePanel === PanelView.FIAT_KYC, onStatusResolved: approved => {
+                if (approved) {
+                    kycApprovedRef.current = true;
+                    navigateBack();
+                    handleFiatOrder(selectedFiatPaymentMethod);
+                }
+            } }) }));
+    const authView = (_jsx("div", { className: "mx-auto w-full max-w-[460px]", children: _jsx(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 (_jsx(StyleRoot, { children: _jsx("div", { className: classes?.container ||
                 cn("anyspend-container font-inter mx-auto w-full max-w-[460px]", mode === "page" &&
@@ -1030,5 +1139,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                     _jsx("div", { className: cn(mode === "page" && "p-6"), children: pointsDetailView }, "points-detail-view"),
                     _jsx("div", { className: cn(mode === "page" && "p-6"), children: feeDetailView }, "fee-detail-view"),
                     _jsx("div", { className: cn(mode === "page" && "p-6"), children: directTransferSuccessView }, "direct-transfer-success-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: kycView }, "fiat-kyc-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: authView }, "fiat-auth-view"),
                 ] }) }) }));
 }

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

@@ -561,13 +561,13 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                                 }
                                             }, className: "relative w-full", children: isCreatingOrder ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { children: "Loading quote..." })] })) : !recipientAddress ? ("Select recipient") : selectedFiatPaymentMethod === FiatPaymentMethod.NONE ? ("Select payment method") : anyspendQuote ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "Buy" }), _jsx(ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) })] })] }));
     // Recipient selection view
-    const recipientSelectionView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(RecipientSelection, { initialValue: recipientAddress || "", title: "Add recipient address or ENS", description: "Send tokens to another address", onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onConfirm: address => {
+    const recipientSelectionView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-full max-w-[460px] rounded-xl p-4"), children: _jsx(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 = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(CryptoPaymentMethod, { selectedPaymentMethod: effectiveCryptoPaymentMethod, setSelectedPaymentMethod: method => {
+    const cryptoPaymentMethodView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-full max-w-[460px] rounded-xl p-4"), children: _jsx(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) => {
@@ -585,9 +585,9 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         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: handleBackToConfirmOrder, onSelectPaymentMethod: handleFiatPaymentMethodSelect, srcAmountOnRamp: srcFiatAmount }) }));
+    const fiatPaymentMethodView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-full max-w-[460px] 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) }) }));
+    const pointsDetailView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-full max-w-[460px] rounded-xl p-4"), children: _jsx(PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER) }) }));
     // Return the TransitionPanel with all views
     return (_jsx(StyleRoot, { children: _jsx(TransitionPanel, { activeIndex: orderId
                 ? oat

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

@@ -226,7 +226,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
     };
     const headerContent = header ? (header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote })) : (_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsxs("div", { children: [_jsx("h1", { className: "text-as-primary text-xl font-bold", children: actionLabel }), _jsx("p", { className: "text-as-secondary text-sm", children: "Pay from any token to execute a custom exact-in transaction." })] }) }));
     const mainView = (_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, _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : (_jsx(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: _jsx(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: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues, customRecipientLabel: customRecipientLabel }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(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, _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : (_jsx(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: _jsx(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: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues, customRecipientLabel: customRecipientLabel }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(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: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: false, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => setActivePanel(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);
@@ -393,7 +393,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             toast.error("Failed to create order: " + err.message);
         }
     };
-    const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsx(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" ? CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
+    const orderDetailsView = (_jsx("div", { className: "mx-auto w-full max-w-[460px]", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsx(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" ? CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
                     setOrderId(undefined);
                     setActivePanel(PanelView.MAIN);
                 }, disableUrlParamManagement: true, points: oat.data.points || undefined, returnToHomeUrl: returnToHomeUrl, returnHomeLabel: returnHomeLabel })) }) }));

package/dist/esm/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/esm/anyspend/react/components/checkout/AnySpendCheckout.js

@@ -1,16 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useTokenData } from "../../../../global-account/react/index.js";
 import { USDC_BASE } from "../../../../anyspend/constants/index.js";
+import { useTokenData } from "../../../../global-account/react/index.js";
 import { formatUnits, safeBigInt } from "../../../../shared/utils/number.js";
 import { useCallback, useMemo, useState } from "react";
 import { useAnyspendQuote } from "../../hooks/useAnyspendQuote.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper.js";
+import { AnySpendCustomizationProvider } from "../context/AnySpendCustomizationContext.js";
 import { CheckoutCartPanel } from "./CheckoutCartPanel.js";
 import { CheckoutFormPanel } from "./CheckoutFormPanel.js";
 import { CheckoutLayout } from "./CheckoutLayout.js";
 import { CheckoutPaymentPanel } from "./CheckoutPaymentPanel.js";
-import { AnySpendCustomizationProvider } from "../context/AnySpendCustomizationContext.js";
+import { VariablePricingInput } from "./VariablePricingInput.js";
 const emptyAddress = { street: "", city: "", state: "", zip: "", country: "" };
 export 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
@@ -18,7 +19,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] = useState("0");
+    const isVariablePricingActive = variablePricing?.enabled === true;
+    const isVariablePricingValid = isVariablePricingActive ? variablePricingAmount !== "0" : true;
     // ===== Form state =====
     const [formData, setFormData] = useState({});
     const [selectedShipping, setSelectedShipping] = useState(null);
@@ -63,7 +70,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 = useMemo(() => {
+        if (isVariablePricingActive && variablePricingAmount !== "0") {
+            let total = safeBigInt(variablePricingAmount);
+            if (effectiveShipping?.amount)
+                total += safeBigInt(effectiveShipping.amount);
+            const taxAmt = typeof tax === "string" ? tax : tax?.amount;
+            if (taxAmt)
+                total += safeBigInt(taxAmt);
+            if (effectiveDiscount?.amount)
+                total -= safeBigInt(effectiveDiscount.amount);
+            if (summaryLines) {
+                for (const line of summaryLines)
+                    total += safeBigInt(line.amount);
+            }
+            if (total < BigInt(0))
+                total = BigInt(0);
+            return total.toString();
+        }
         if (totalAmountOverride)
             return totalAmountOverride;
         let total = BigInt(0);
@@ -84,7 +109,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 } = useTokenData(destinationTokenChainId, destinationTokenAddress);
     const tokenSymbol = tokenData?.symbol || "";
@@ -136,14 +170,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 = 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 ||
@@ -151,5 +198,5 @@ enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount,
         (shippingOptions && shippingOptions.length > 0) ||
         collectShippingAddress ||
         enableDiscountCode;
-    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: _jsx(AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: _jsx(CheckoutLayout, { mode: mode, paymentPanel: _jsxs(_Fragment, { children: [hasFormContent && (_jsxs("div", { className: "mb-6", children: [_jsx(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 }), _jsx("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), _jsx(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: _jsx(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 (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: _jsx(AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: _jsx(CheckoutLayout, { mode: mode, paymentPanel: _jsxs(_Fragment, { children: [isVariablePricingActive && tokenData && variablePricing && (_jsx(VariablePricingInput, { config: variablePricing, tokenDecimals: tokenDecimals, tokenSymbol: tokenSymbol, themeColor: themeColor, onChange: setVariablePricingAmount })), hasFormContent && (_jsxs("div", { className: "mb-6", children: [_jsx(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 }), _jsx("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), _jsx(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: _jsx(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/esm/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/esm/anyspend/react/components/checkout/AnySpendCheckoutTrigger.js

@@ -9,7 +9,7 @@ import { AnySpendCustomizationProvider } from "../context/AnySpendCustomizationC
 import { CheckoutCartPanel } from "./CheckoutCartPanel.js";
 import { CheckoutPaymentPanel } from "./CheckoutPaymentPanel.js";
 import { PoweredByBranding } from "./PoweredByBranding.js";
-export 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, }) {
+export 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 = useMemo(() => {
         if (!workflowId && !orgId && !callbackMetadata)
@@ -54,5 +54,5 @@ export function AnySpendCheckoutTrigger({ recipientAddress, destinationTokenAddr
     const formattedTotal = useMemo(() => formatTokenAmount(BigInt(computedTotal || "0"), tokenDecimals), [computedTotal, tokenDecimals]);
     const hasItems = items && items.length > 0;
     const fingerprint = getFingerprintConfig();
-    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: _jsx(AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: _jsxs("div", { className: "anyspend-checkout-trigger flex flex-col", children: [hasItems && (_jsx("div", { className: "border-b border-gray-200 p-5 dark:border-neutral-700", children: _jsx(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 && (_jsx("div", { className: "border-b border-gray-200 p-5 dark:border-neutral-700", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: cn("flex items-center justify-between", classes?.cartSummary), children: [_jsx("span", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Total" }), _jsxs("span", { className: cn("text-base font-semibold text-gray-900 dark:text-gray-100", classes?.cartTotal), children: [formattedTotal, " ", tokenSymbol] })] }), footer === undefined ? (_jsx(PoweredByBranding, { organizationName: organizationName, organizationLogo: organizationLogo, classes: classes })) : (footer)] }) })), _jsx("div", { className: "px-2 py-3", children: _jsx(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 (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: _jsx(AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: _jsxs("div", { className: "anyspend-checkout-trigger flex flex-col", children: [hasItems && (_jsx("div", { className: "border-b border-gray-200 p-5 dark:border-neutral-700", children: _jsx(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 && (_jsx("div", { className: "border-b border-gray-200 p-5 dark:border-neutral-700", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: cn("flex items-center justify-between", classes?.cartSummary), children: [_jsx("span", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Total" }), _jsxs("span", { className: cn("text-base font-semibold text-gray-900 dark:text-gray-100", classes?.cartTotal), children: [formattedTotal, " ", tokenSymbol] })] }), footer === undefined ? (_jsx(PoweredByBranding, { organizationName: organizationName, organizationLogo: organizationLogo, classes: classes })) : (footer)] }) })), _jsx("div", { className: "px-2 py-3", children: _jsx(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/esm/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/esm/anyspend/react/components/checkout/CheckoutPaymentPanel.js

@@ -26,7 +26,7 @@ function AmexLogo() {
 function CoinbaseLogo() {
     return (_jsxs("svg", { viewBox: "0 0 24 24", style: { width: 20, height: 20 }, "aria-label": "Coinbase", children: [_jsx("circle", { cx: "12", cy: "12", r: "12", fill: "#0052FF" }), _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" })] }));
 }
-export function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText, themeColor, returnUrl, returnLabel, onSuccess, onError, callbackMetadata, classes, defaultPaymentMethod, senderAddress, showPoints, showOrderId, isFormValid = true, }) {
+export 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] = useState(defaultPaymentMethod ?? null);
     // Restore activeOrderId from sessionStorage (handles page refresh / Coinbase return)
     const [activeOrderId, setActiveOrderId] = useState(() => {
@@ -57,5 +57,5 @@ export function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress
         ? "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 = 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 (_jsxs("div", { className: cn("anyspend-payment-panel flex flex-col gap-5", classes?.paymentPanel), children: [_jsx("h2", { className: cn("anyspend-payment-title text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.paymentTitle), children: "Payment" }), !isFormValid && (_jsx("p", { className: "text-sm text-amber-600 dark:text-amber-400", children: "Please complete the required fields above before proceeding to payment." })), _jsxs("div", { className: 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: [_jsxs("div", { className: "anyspend-method-crypto", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "crypto" ? null : "crypto"), className: accordionButtonClass(paymentMethod === "crypto"), children: [_jsx(RadioCircle, { selected: paymentMethod === "crypto", themeColor: themeColor }), _jsx(Wallet, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Pay with crypto" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "crypto" && (_jsx(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: _jsx("div", { className: expandedPanelClass, children: _jsx(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")) })] }), _jsxs("div", { className: "anyspend-method-card", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "card" ? null : "card"), className: accordionButtonClass(paymentMethod === "card"), children: [_jsx(RadioCircle, { selected: paymentMethod === "card", themeColor: themeColor }), _jsx(CreditCard, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Credit or debit card" }), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [_jsx(VisaLogo, {}), _jsx(MastercardLogo, {}), _jsx(AmexLogo, {})] })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "card" && (_jsx(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: _jsx("div", { className: expandedPanelClass, children: _jsx(FiatCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "card-panel")) })] }), _jsxs("div", { className: "anyspend-method-coinbase", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "coinbase" ? null : "coinbase"), className: accordionButtonClass(paymentMethod === "coinbase"), children: [_jsx(RadioCircle, { selected: paymentMethod === "coinbase", themeColor: themeColor }), _jsx(CoinbaseLogo, {}), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Coinbase Pay" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "coinbase" && (_jsx(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: _jsx("div", { className: expandedPanelClass, children: _jsx(CoinbaseCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "coinbase-panel")) })] })] })] }));
+    return (_jsxs("div", { className: cn("anyspend-payment-panel flex flex-col gap-5", classes?.paymentPanel), children: [_jsx("h2", { className: cn("anyspend-payment-title text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.paymentTitle), children: "Payment" }), !isFormValid && (_jsx("p", { className: "text-sm text-amber-600 dark:text-amber-400", children: "Please complete the required fields above before proceeding to payment." })), _jsxs("div", { className: 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: [_jsxs("div", { className: "anyspend-method-crypto", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "crypto" ? null : "crypto"), className: accordionButtonClass(paymentMethod === "crypto"), children: [_jsx(RadioCircle, { selected: paymentMethod === "crypto", themeColor: themeColor }), _jsx(Wallet, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Pay with crypto" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "crypto" && (_jsx(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: _jsx("div", { className: expandedPanelClass, children: _jsx(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")) })] }), _jsxs("div", { className: "anyspend-method-card", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "card" ? null : "card"), className: accordionButtonClass(paymentMethod === "card"), children: [_jsx(RadioCircle, { selected: paymentMethod === "card", themeColor: themeColor }), _jsx(CreditCard, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Credit or debit card" }), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [_jsx(VisaLogo, {}), _jsx(MastercardLogo, {}), _jsx(AmexLogo, {})] })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "card" && (_jsx(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: _jsx("div", { className: expandedPanelClass, children: _jsx(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")) })] }), _jsxs("div", { className: "anyspend-method-coinbase", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "coinbase" ? null : "coinbase"), className: accordionButtonClass(paymentMethod === "coinbase"), children: [_jsx(RadioCircle, { selected: paymentMethod === "coinbase", themeColor: themeColor }), _jsx(CoinbaseLogo, {}), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Coinbase Pay" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "coinbase" && (_jsx(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: _jsx("div", { className: expandedPanelClass, children: _jsx(CoinbaseCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "coinbase-panel")) })] })] })] }));
 }