@b3dotfun/sdk 0.1.68-alpha.4 → 0.1.68-alpha.6

package/dist/cjs/anyspend/react/components/AnySpend.d.ts

@@ -18,7 +18,9 @@ export declare enum PanelView {
     FIAT_PAYMENT_METHOD = 7,
     POINTS_DETAIL = 8,
     FEE_DETAIL = 9,
-    DIRECT_TRANSFER_SUCCESS = 10
+    DIRECT_TRANSFER_SUCCESS = 10,
+    FIAT_KYC = 11,
+    FIAT_AUTH = 12
 }
 export declare function AnySpend(props: {
     mode?: "page" | "modal";

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

@@ -37,6 +37,9 @@ 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 useKycStatus_1 = require("../hooks/useKycStatus");
+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,6 +60,8 @@ 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) {
@@ -70,6 +75,16 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     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).
+    const kycApprovedRef = (0, react_4.useRef)(false);
+    // Pre-warm wallet auth headers inside user-gesture context (button click)
+    // so the signing prompt fires before we navigate away — browsers block
+    // wallet popups triggered from async/non-gesture contexts (React Query queryFn).
+    const { getHeaders: getKycHeaders } = (0, useKycStatus_1.useWalletAuthHeaders)();
     // 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 +94,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 +125,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 +154,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 +194,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 +569,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 +659,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 +681,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 +843,22 @@ 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) {
+                    // Pre-sign the KYC auth message NOW (user-gesture context) so the
+                    // result is cached before useKycStatus fires its queryFn inside the
+                    // FIAT_KYC panel. Wallets/browsers block signing prompts from async
+                    // (non-gesture) contexts, which is exactly what React Query uses.
+                    await getKycHeaders().catch(() => { });
+                    navigateToPanel(PanelView.FIAT_KYC, "forward");
+                    return;
+                }
                 if (!stripeWeb2Support.isSupport) {
                     react_2.toast.error("Pay with Card not available");
                     return;
@@ -870,6 +967,14 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
             window.removeEventListener("popstate", handlePopState);
         };
     }, [activePanel, navigateBack]);
+    // 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-[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 user explicitly changes payment method, set it as selected
@@ -1004,6 +1109,16 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                         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 +1152,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/checkout/AnySpendCheckout.d.ts

@@ -119,5 +119,7 @@ export interface AnySpendCheckoutProps {
     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, variablePricing, feeOnTop, }: 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

@@ -24,7 +24,7 @@ shippingOptions, collectShippingAddress, onShippingChange: onShippingChangeProp,
 // New discount props
 enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount, 
 // Variable pricing
-variablePricing, feeOnTop, }) {
+variablePricing, feeOnTop, kycEnabled = false, }) {
     // ===== Variable pricing state =====
     const [variablePricingAmount, setVariablePricingAmount] = (0, react_2.useState)("0");
     const isVariablePricingActive = variablePricing?.enabled === true;
@@ -201,5 +201,5 @@ variablePricing, feeOnTop, }) {
         (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: [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 })] }), 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

@@ -28,6 +28,8 @@ interface CheckoutPaymentPanelProps {
     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, feeOnTop, }: 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, feeOnTop, }) {
+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, feeOnTop: feeOnTop }) }) }, "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")) })] })] })] }));
 }

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

@@ -17,6 +17,8 @@ interface FiatCheckoutPanelProps {
     classes?: AnySpendCheckoutClasses;
     /** When true, fees are added on top (payer pays more, receiver gets exact amount) */
     feeOnTop?: boolean;
+    /** When true, identity verification is required before card payment. Defaults to false. */
+    kycEnabled?: boolean;
 }
-export declare function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, feeOnTop, }: FiatCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, feeOnTop, kycEnabled, }: FiatCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -13,7 +13,8 @@ const react_stripe_js_1 = require("@stripe/react-stripe-js");
 const lucide_react_1 = require("lucide-react");
 const react_3 = require("motion/react");
 const react_4 = require("react");
-function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, feeOnTop, }) {
+const KycGate_1 = require("./KycGate");
+function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, feeOnTop, kycEnabled = false, }) {
     // Stable refs for callback props to avoid re-triggering effects
     const onErrorRef = (0, react_4.useRef)(onError);
     onErrorRef.current = onError;
@@ -51,18 +52,12 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
         const raw = (0, number_1.formatUnits)(anyspendQuote.data.currencyIn.amount, constants_1.USDC_BASE.decimals);
         return parseFloat(raw).toFixed(2);
     }, [isStablecoin, formattedAmount, anyspendQuote]);
-    // Debug: log computed values for Stripe flow diagnostics
-    (0, react_4.useEffect)(() => {
-        console.log("@@fiat-checkout:debug", {
-            totalAmount,
-            formattedAmount,
-            isStablecoin,
-            isLoadingAnyspendQuote,
-            quoteAmount: anyspendQuote?.data?.currencyIn?.amount,
-            usdAmount,
-        });
-    }, [totalAmount, formattedAmount, isStablecoin, isLoadingAnyspendQuote, anyspendQuote, usdAmount]);
     const { geoData, stripeOnrampSupport, stripeWeb2Support, isLoading: isLoadingGeo, } = (0, react_1.useGeoOnrampOptions)(usdAmount || "0");
+    // KYC state — pre-approved when kycEnabled is false (feature flag off)
+    const [kycApproved, setKycApproved] = (0, react_4.useState)(() => !kycEnabled);
+    const handleKycResolved = (0, react_4.useCallback)((approved) => {
+        setKycApproved(approved);
+    }, []);
     // Order state
     const [orderId, setOrderId] = (0, react_4.useState)(null);
     const [stripePaymentIntentId, setStripePaymentIntentId] = (0, react_4.useState)(null);
@@ -85,13 +80,14 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
             onErrorRef.current?.(error);
         },
     });
-    // Auto-create onramp order when Stripe Web2 is supported and all data is ready
+    // Auto-create onramp order when Stripe Web2 is supported, KYC approved, and all data is ready
     (0, react_4.useEffect)(() => {
         if (!isLoadingGeo &&
             (!isStablecoin ? !isLoadingAnyspendQuote : true) &&
             usdAmount &&
             parseFloat(usdAmount) > 0 &&
             stripeWeb2Support?.isSupport &&
+            kycApproved &&
             !orderCreatedRef.current &&
             !orderId &&
             !isCreatingOrder &&
@@ -132,6 +128,7 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
         isLoadingAnyspendQuote,
         usdAmount,
         stripeWeb2Support,
+        kycApproved,
         orderId,
         isCreatingOrder,
         orderError,
@@ -155,6 +152,10 @@ function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinat
     if (!hasStripeWeb2 && !hasStripeRedirect) {
         return ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-fiat-unavailable py-4 text-center", classes?.fiatPanel), children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Card payments are not available in your region for this amount." }) }));
     }
+    // KYC gate — shown before order creation when verification is needed
+    if (!kycApproved) {
+        return (0, jsx_runtime_1.jsx)(KycGate_1.KycGate, { themeColor: themeColor, classes: classes, enabled: true, onStatusResolved: handleKycResolved });
+    }
     // Order creation error - show with retry
     if (orderError) {
         return ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-fiat-error flex flex-col items-center gap-3 py-4", classes?.fiatPanel), children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-red-500", children: orderError }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {

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

@@ -0,0 +1,11 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface KycGateProps {
+    themeColor?: string;
+    classes?: AnySpendCheckoutClasses;
+    /** Only fetch KYC status (and prompt wallet signature) when true. */
+    enabled?: boolean;
+    /** Called when KYC status is resolved (approved or not required) */
+    onStatusResolved: (approved: boolean) => void;
+}
+export declare function KycGate({ themeColor, classes, enabled, onStatusResolved }: KycGateProps): import("react/jsx-runtime").JSX.Element | null;
+export {};