@b3dotfun/sdk 0.1.66-alpha.1 → 0.1.66-alpha.2

package/dist/esm/anyspend/react/components/checkout/CryptoCheckoutPanel.js

@@ -0,0 +1,313 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAnyspendQuote } from "../../../../anyspend/react/hooks/useAnyspendQuote.js";
+import { useAnyspendCreateOrder } from "../../../../anyspend/react/hooks/useAnyspendCreateOrder.js";
+import { useAnyspendOrderAndTransactions } from "../../../../anyspend/react/hooks/useAnyspendOrderAndTransactions.js";
+import { useAnyspendTokenList } from "../../../../anyspend/react/hooks/useAnyspendTokens.js";
+import { useOnOrderSuccess } from "../../../../anyspend/react/hooks/useOnOrderSuccess.js";
+import { ALL_CHAINS } from "../../../../anyspend/index.js";
+import { EVM_MAINNET } from "../../../../anyspend/utils/chain.js";
+import { useAccountWallet, useB3Config, useModalStore, useSimBalance, useSimTokenBalance, useTokenData, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
+import { thirdwebB3Chain } from "../../../../shared/constants/chains/b3Chain.js";
+import { formatTokenAmount } from "../../../../shared/utils/number.js";
+import { isNativeToken } from "../../../../anyspend/utils/token.js";
+import { cn } from "../../../../shared/utils/cn.js";
+import { TextShimmer } from "../../../../global-account/react/index.js";
+import { useIsMobile } from "../../../../global-account/react/index.js";
+import { Dialog, DialogContent, DialogDescription, DialogTitle, } from "../../../../global-account/react/components/ui/dialog.js";
+import { Drawer, DrawerContent, DrawerDescription, DrawerTitle, } from "../../../../global-account/react/components/ui/drawer.js";
+import { ChevronDown, Loader2, Search } from "lucide-react";
+import { encodeFunctionData, erc20Abi } from "viem";
+import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ChainTokenIcon } from "../common/ChainTokenIcon.js";
+export function CryptoCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText = "Pay", themeColor, onSuccess, onError, callbackMetadata, classes, }) {
+    const [selectedSrcChainId, setSelectedSrcChainId] = useState(destinationTokenChainId);
+    const [selectedSrcToken, setSelectedSrcToken] = useState(null);
+    const [showTokenSelector, setShowTokenSelector] = useState(false);
+    const [tokenSearchQuery, setTokenSearchQuery] = useState("");
+    // Get wallet & modal
+    const { address: walletAddress } = useAccountWallet();
+    const { partnerId } = useB3Config();
+    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+    const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+    // Get destination token data
+    const { data: dstTokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
+    // Get token list for source chain
+    const { data: tokenList, isLoading: isLoadingTokens } = useAnyspendTokenList(selectedSrcChainId, tokenSearchQuery);
+    // Set default source token to destination token (same-chain, no swap needed)
+    useEffect(() => {
+        if (!selectedSrcToken && tokenList && tokenList.length > 0) {
+            // Try to find the destination token in the list
+            const dstToken = tokenList.find((t) => t.address.toLowerCase() === destinationTokenAddress.toLowerCase() && t.chainId === destinationTokenChainId);
+            if (dstToken) {
+                setSelectedSrcToken(dstToken);
+            }
+            else {
+                // Default to first token
+                setSelectedSrcToken(tokenList[0]);
+            }
+        }
+    }, [tokenList, selectedSrcToken, destinationTokenAddress, destinationTokenChainId]);
+    // Compute source amount from destination amount using quote
+    const isSameToken = selectedSrcToken &&
+        selectedSrcToken.address.toLowerCase() === destinationTokenAddress.toLowerCase() &&
+        selectedSrcToken.chainId === destinationTokenChainId;
+    const { anyspendQuote, isLoadingAnyspendQuote } = useAnyspendQuote({
+        type: "swap",
+        srcChain: selectedSrcChainId,
+        dstChain: destinationTokenChainId,
+        srcTokenAddress: selectedSrcToken?.address || "",
+        dstTokenAddress: destinationTokenAddress,
+        tradeType: "EXACT_OUTPUT",
+        amount: totalAmount,
+    });
+    // Get balance
+    const tokenAddress = selectedSrcToken
+        ? isNativeToken(selectedSrcToken.address)
+            ? "native"
+            : selectedSrcToken.address
+        : undefined;
+    const { data: balanceData } = useSimTokenBalance(walletAddress, tokenAddress, selectedSrcChainId);
+    const balance = useMemo(() => {
+        const b = balanceData?.balances?.[0];
+        if (!b?.amount)
+            return { raw: BigInt(0), formatted: "0", decimals: 18 };
+        return {
+            raw: BigInt(b.amount),
+            formatted: formatTokenAmount(BigInt(b.amount), b.decimals),
+            decimals: b.decimals,
+        };
+    }, [balanceData]);
+    // Determine the amount to pay in source token
+    const srcAmount = useMemo(() => {
+        if (isSameToken)
+            return totalAmount;
+        return anyspendQuote?.data?.currencyIn?.amount || "0";
+    }, [isSameToken, totalAmount, anyspendQuote]);
+    const srcAmountFormatted = useMemo(() => {
+        if (!selectedSrcToken)
+            return "0";
+        const decimals = selectedSrcToken.decimals || 18;
+        return formatTokenAmount(BigInt(srcAmount || "0"), decimals);
+    }, [srcAmount, selectedSrcToken]);
+    // Check if user has enough balance
+    const hasEnoughBalance = balance.raw >= BigInt(srcAmount || "0");
+    // Order tracking state
+    const [orderId, setOrderId] = useState();
+    const [isSendingDeposit, setIsSendingDeposit] = useState(false);
+    const depositSentRef = useRef(false);
+    // Wallet transaction execution
+    const { switchChainAndExecute } = useUnifiedChainSwitchAndExecute();
+    // Create order
+    const { createOrder, isCreatingOrder } = useAnyspendCreateOrder({
+        onSuccess: (data) => {
+            const id = data?.data?.id;
+            if (id) {
+                setOrderId(id);
+            }
+        },
+        onError: (error) => {
+            setIsSendingDeposit(false);
+            onError?.(error);
+        },
+    });
+    // Poll order status until executed
+    const { orderAndTransactions: oat } = useAnyspendOrderAndTransactions(orderId);
+    // Send deposit transaction once order is created and ready
+    useEffect(() => {
+        if (!oat?.data?.order || depositSentRef.current)
+            return;
+        const order = oat.data.order;
+        if (order.status !== "scanning_deposit_transaction")
+            return;
+        if (oat.data.depositTxs?.length)
+            return; // Already deposited
+        depositSentRef.current = true;
+        const sendDeposit = async () => {
+            try {
+                setIsSendingDeposit(true);
+                const amount = BigInt(order.srcAmount);
+                if (isNativeToken(order.srcTokenAddress)) {
+                    await switchChainAndExecute(order.srcChain, {
+                        to: order.globalAddress,
+                        value: amount,
+                    });
+                }
+                else {
+                    const data = encodeFunctionData({
+                        abi: erc20Abi,
+                        functionName: "transfer",
+                        args: [order.globalAddress, amount],
+                    });
+                    await switchChainAndExecute(order.srcChain, {
+                        to: order.srcTokenAddress,
+                        data,
+                        value: BigInt(0),
+                    });
+                }
+            }
+            catch (error) {
+                depositSentRef.current = false;
+                onError?.(error instanceof Error ? error : new Error(error?.message || "Transaction rejected"));
+            }
+            finally {
+                setIsSendingDeposit(false);
+            }
+        };
+        sendDeposit();
+    }, [oat, switchChainAndExecute, onError]);
+    // Only call onSuccess when order is actually executed with a real txHash
+    useOnOrderSuccess({
+        orderData: oat,
+        orderId,
+        onSuccess: (txHash) => {
+            onSuccess?.({ orderId, txHash });
+        },
+    });
+    const isWaitingForExecution = !!orderId && oat?.data?.order.status !== "executed";
+    const handlePay = useCallback(() => {
+        if (!selectedSrcToken || !walletAddress)
+            return;
+        depositSentRef.current = false;
+        const dstToken = {
+            address: destinationTokenAddress,
+            chainId: destinationTokenChainId,
+            decimals: dstTokenData?.decimals || 18,
+            symbol: dstTokenData?.symbol || "",
+            name: dstTokenData?.name || "",
+            metadata: {
+                logoURI: dstTokenData?.logoURI || "",
+            },
+        };
+        createOrder({
+            recipientAddress,
+            orderType: "swap",
+            srcChain: selectedSrcChainId,
+            dstChain: destinationTokenChainId,
+            srcToken: selectedSrcToken,
+            dstToken,
+            srcAmount,
+            expectedDstAmount: totalAmount,
+            callbackMetadata,
+        });
+    }, [
+        selectedSrcToken,
+        walletAddress,
+        recipientAddress,
+        selectedSrcChainId,
+        destinationTokenChainId,
+        destinationTokenAddress,
+        dstTokenData,
+        srcAmount,
+        totalAmount,
+        callbackMetadata,
+        createOrder,
+    ]);
+    const handleSelectToken = (token) => {
+        setSelectedSrcToken(token);
+        setSelectedSrcChainId(token.chainId);
+        setShowTokenSelector(false);
+        setTokenSearchQuery("");
+    };
+    const isLoading = isLoadingAnyspendQuote || isLoadingTokens;
+    const isPending = isCreatingOrder || isSendingDeposit || isWaitingForExecution;
+    const canPay = walletAddress && selectedSrcToken && hasEnoughBalance && !isLoading && !isPending;
+    return (_jsxs("div", { className: cn("anyspend-crypto-panel flex flex-col gap-4", classes?.cryptoPanel), children: [_jsxs("div", { className: "anyspend-token-selector", children: [_jsx("label", { className: "anyspend-token-label mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Pay with" }), _jsxs("button", { onClick: () => setShowTokenSelector(true), className: cn("anyspend-token-btn flex w-full items-center justify-between rounded-xl border border-gray-200 bg-white px-4 py-3 transition-colors hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-gray-600", classes?.tokenSelector), children: [selectedSrcToken ? (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[selectedSrcToken.chainId]?.logoUrl || "", tokenUrl: selectedSrcToken.metadata?.logoURI, className: "h-8 w-8" }), _jsxs("div", { className: "text-left", children: [_jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: selectedSrcToken.symbol }), _jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: ["Balance: ", balance.formatted] })] })] })) : (_jsx("span", { className: "text-sm text-gray-400", children: "Select token" })), _jsx(ChevronDown, { className: "h-4 w-4 text-gray-400" })] })] }), _jsx(TokenSelectorModal, { open: showTokenSelector, onClose: () => {
+                    setShowTokenSelector(false);
+                    setTokenSearchQuery("");
+                }, tokenList: tokenList, isLoadingTokens: isLoadingTokens, tokenSearchQuery: tokenSearchQuery, onSearchChange: setTokenSearchQuery, onSelectToken: handleSelectToken, selectedToken: selectedSrcToken, walletAddress: walletAddress, chainId: selectedSrcChainId, onChainChange: chainId => {
+                    setSelectedSrcChainId(chainId);
+                    setSelectedSrcToken(null);
+                    setTokenSearchQuery("");
+                } }), _jsx(motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: cn("anyspend-quote-display rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800/50", classes?.quoteDisplay), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "You pay" }), _jsx(AnimatePresence, { mode: "wait", children: isLoadingAnyspendQuote ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: _jsx(TextShimmer, { duration: 1, className: "text-sm", children: "Fetching quote..." }) }, "quote-loading")) : (_jsxs(motion.span, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: [srcAmountFormatted, " ", selectedSrcToken?.symbol || ""] }, "quote-amount")) })] }) }), _jsx(AnimatePresence, { children: walletAddress && selectedSrcToken && !hasEnoughBalance && !isLoading && (_jsxs(motion.p, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.2, ease: "easeOut" }, className: "anyspend-balance-warning text-center text-sm text-red-500", children: ["Insufficient ", selectedSrcToken.symbol, " balance"] }, "balance-warning")) }), !walletAddress ? (_jsx("button", { onClick: () => {
+                    setB3ModalContentType({ type: "signInWithB3", showBackButton: false, chain: thirdwebB3Chain, partnerId });
+                    setB3ModalOpen(true);
+                }, className: cn("anyspend-crypto-pay-btn w-full rounded-xl px-4 py-3.5 text-sm font-semibold text-white transition-all", "bg-blue-600 hover:bg-blue-700 active:scale-[0.98]", classes?.payButton), style: themeColor ? { backgroundColor: themeColor } : undefined, children: "Connect Wallet to Pay" })) : (_jsx("button", { onClick: handlePay, disabled: !canPay, className: cn("anyspend-crypto-pay-btn w-full rounded-xl px-4 py-3.5 text-sm font-semibold text-white transition-all", canPay ? "bg-blue-600 hover:bg-blue-700 active:scale-[0.98]" : "cursor-not-allowed bg-blue-600 opacity-50", classes?.payButton), style: !canPay ? undefined : themeColor ? { backgroundColor: themeColor } : undefined, children: isPending ? (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), isCreatingOrder
+                            ? "Creating order..."
+                            : isSendingDeposit
+                                ? "Confirm in wallet..."
+                                : "Confirming transaction..."] })) : (buttonText) }))] }));
+}
+const SOURCE_CHAINS = Object.values(EVM_MAINNET).map(c => ({ id: c.id, name: c.name, logoUrl: c.logoUrl }));
+export function TokenSelectorModal({ open, onClose, tokenList, isLoadingTokens, tokenSearchQuery, onSearchChange, onSelectToken, selectedToken, walletAddress, chainId, onChainChange, }) {
+    const isMobile = useIsMobile();
+    const searchInputRef = useRef(null);
+    // Fetch all balances for the wallet on this chain
+    const { data: balanceData } = useSimBalance(walletAddress, [chainId]);
+    // Build a lookup map: lowercase token address -> balance info
+    const balanceMap = useMemo(() => {
+        const map = new Map();
+        if (!balanceData?.balances)
+            return map;
+        for (const b of balanceData.balances) {
+            if (b.amount && BigInt(b.amount) > BigInt(0)) {
+                map.set(b.address.toLowerCase(), {
+                    raw: BigInt(b.amount),
+                    formatted: formatTokenAmount(BigInt(b.amount), b.decimals),
+                    decimals: b.decimals,
+                });
+            }
+        }
+        return map;
+    }, [balanceData]);
+    // Sort tokens: tokens with balance first (sorted by balance desc), then the rest
+    const sortedTokenList = useMemo(() => {
+        if (!tokenList)
+            return undefined;
+        const withBalance = [];
+        const withoutBalance = [];
+        for (const token of tokenList) {
+            const bal = balanceMap.get(token.address.toLowerCase());
+            if (bal) {
+                withBalance.push(token);
+            }
+            else {
+                withoutBalance.push(token);
+            }
+        }
+        withBalance.sort((a, b) => {
+            const balA = balanceMap.get(a.address.toLowerCase())?.raw || BigInt(0);
+            const balB = balanceMap.get(b.address.toLowerCase())?.raw || BigInt(0);
+            if (balB > balA)
+                return 1;
+            if (balB < balA)
+                return -1;
+            return 0;
+        });
+        return [...withBalance, ...withoutBalance];
+    }, [tokenList, balanceMap]);
+    // Keep showing the previous list while new chain tokens are loading
+    const prevListRef = useRef(undefined);
+    if (sortedTokenList && sortedTokenList.length > 0) {
+        prevListRef.current = sortedTokenList;
+    }
+    const displayList = sortedTokenList && sortedTokenList.length > 0
+        ? sortedTokenList
+        : isLoadingTokens
+            ? prevListRef.current
+            : sortedTokenList;
+    // Focus search input when modal opens
+    useEffect(() => {
+        if (open) {
+            const timer = setTimeout(() => searchInputRef.current?.focus(), 100);
+            return () => clearTimeout(timer);
+        }
+    }, [open]);
+    const ModalComponent = isMobile ? Drawer : Dialog;
+    const ModalContent = isMobile ? DrawerContent : DialogContent;
+    const ModalTitle = isMobile ? DrawerTitle : DialogTitle;
+    const ModalDescription = isMobile ? DrawerDescription : DialogDescription;
+    return (_jsxs(ModalComponent, { open: open, onOpenChange: (v) => {
+            if (!v)
+                onClose();
+        }, children: [_jsx("style", { dangerouslySetInnerHTML: {
+                    __html: `.anyspend-token-modal .b3-modal-ga-branding { display: none; } .anyspend-token-modal .modal-inner-content { margin-bottom: 0; }`,
+                } }), _jsxs(ModalContent, { className: "anyspend-token-modal flex max-h-[80dvh] flex-col overflow-hidden rounded-2xl bg-white p-0 shadow-xl sm:max-h-[70dvh] dark:bg-gray-900", children: [_jsx(ModalTitle, { className: "sr-only", children: "Select token" }), _jsx(ModalDescription, { className: "sr-only", children: "Choose a token to pay with" }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsx("div", { className: "flex items-center justify-between px-5 py-4", children: _jsx("h3", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Select token" }) }), _jsx("div", { className: "anyspend-chain-selector flex items-center gap-2 px-5 pb-3", children: SOURCE_CHAINS.map(chain => (_jsxs("button", { onClick: () => onChainChange(chain.id), title: chain.name, className: "relative shrink-0 rounded-full transition-opacity", style: { opacity: chain.id === chainId ? 1 : 0.4 }, children: [_jsx("img", { src: chain.logoUrl, alt: chain.name, className: "h-7 w-7 rounded-full" }), chain.id === chainId && (_jsx("div", { className: "absolute inset-0 rounded-full", style: { boxShadow: "0 0 0 2px #3b82f6" } }))] }, chain.id))) }), _jsxs("div", { className: "anyspend-token-search flex items-center gap-2 border-b border-gray-100 px-5 py-2.5 dark:border-gray-800", children: [_jsx(Search, { className: "h-4 w-4 shrink-0 text-gray-400" }), _jsx("input", { ref: searchInputRef, type: "text", value: tokenSearchQuery, onChange: e => onSearchChange(e.target.value), placeholder: "Search tokens...", className: "anyspend-token-search-input w-full bg-transparent text-sm outline-none placeholder:text-gray-400 dark:text-gray-100" })] }), _jsxs("div", { className: "anyspend-token-list relative flex-1 overflow-y-auto", style: { minHeight: 300 }, children: [displayList?.map((token) => {
+                                        const isSelected = selectedToken &&
+                                            selectedToken.address.toLowerCase() === token.address.toLowerCase() &&
+                                            selectedToken.chainId === token.chainId;
+                                        const tokenBalance = balanceMap.get(token.address.toLowerCase());
+                                        return (_jsxs("button", { onClick: () => onSelectToken(token), className: cn("anyspend-token-option flex w-full items-center gap-3 px-5 py-3 text-left transition-colors hover:bg-gray-50 dark:hover:bg-gray-800", isSelected && "bg-blue-50 dark:bg-blue-900/20"), children: [_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[token.chainId]?.logoUrl || "", tokenUrl: token.metadata?.logoURI, className: "h-8 w-8" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: token.symbol }), _jsx("p", { className: "truncate text-xs text-gray-500 dark:text-gray-400", children: token.name })] }), _jsxs("div", { className: "flex items-center gap-2", children: [tokenBalance && (_jsx("span", { className: "text-xs font-medium text-gray-600 dark:text-gray-300", children: tokenBalance.formatted })), isSelected && _jsx("div", { className: "h-2 w-2 rounded-full bg-blue-600" })] })] }, `${token.chainId}-${token.address}`));
+                                    }), !isLoadingTokens && displayList && displayList.length === 0 && (_jsx("div", { className: "px-5 py-8 text-center text-sm text-gray-400", children: "No tokens found" }))] })] })] })] }));
+}

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

@@ -0,0 +1,16 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface FiatCheckoutPanelProps {
+    recipientAddress: string;
+    destinationTokenAddress: string;
+    destinationTokenChainId: number;
+    totalAmount: string;
+    themeColor?: string;
+    onSuccess?: (result: {
+        txHash?: string;
+        orderId?: string;
+    }) => void;
+    onError?: (error: Error) => void;
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, classes, }: FiatCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,230 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useAnyspendCreateOnrampOrder, useGeoOnrampOptions, useStripeClientSecret } from "../../../../anyspend/react/index.js";
+import { USDC_BASE } from "../../../../anyspend/constants/index.js";
+import { cn } from "../../../../shared/utils/cn.js";
+import { formatTokenAmount } from "../../../../shared/utils/number.js";
+import { getStripePromise } from "../../../../shared/utils/payment.utils.js";
+import { TextShimmer, useB3Config, useTokenData } from "../../../../global-account/react/index.js";
+import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { Loader2, Lock } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, classes, }) {
+    const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
+    const { theme, stripePublishableKey } = useB3Config();
+    const formattedAmount = useMemo(() => {
+        const decimals = tokenData?.decimals || 18;
+        return formatTokenAmount(BigInt(totalAmount), decimals);
+    }, [totalAmount, tokenData]);
+    const { geoData, stripeOnrampSupport, stripeWeb2Support, isLoading: isLoadingGeo, } = useGeoOnrampOptions(formattedAmount);
+    // Detect if destination token is the same as the onramp source (USDC on Base)
+    // In this case, onramp order creation would fail with "Cannot swap same token on same chain"
+    const isSameAsOnrampSource = useMemo(() => {
+        return (destinationTokenChainId === USDC_BASE.chainId &&
+            destinationTokenAddress.toLowerCase() === USDC_BASE.address.toLowerCase());
+    }, [destinationTokenAddress, destinationTokenChainId]);
+    // Order state
+    const [orderId, setOrderId] = useState(null);
+    const [stripePaymentIntentId, setStripePaymentIntentId] = useState(null);
+    const [orderError, setOrderError] = useState(null);
+    const orderCreatedRef = useRef(false);
+    const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
+        onSuccess: (data) => {
+            const id = data?.data?.id;
+            const intentId = data?.data?.stripePaymentIntentId;
+            if (id && intentId) {
+                setOrderId(id);
+                setStripePaymentIntentId(intentId);
+            }
+            else {
+                setOrderError("Failed to initialize payment. Please try again.");
+            }
+        },
+        onError: (error) => {
+            setOrderError(error.message || "Failed to create payment order.");
+            onError?.(error);
+        },
+    });
+    // Auto-create onramp order when Stripe Web2 is supported and all data is ready
+    // Skip auto-creation when destination is same as source (USDC on Base)
+    useEffect(() => {
+        if (!isLoadingGeo &&
+            stripeWeb2Support?.isSupport &&
+            !isSameAsOnrampSource &&
+            !orderCreatedRef.current &&
+            !orderId &&
+            !isCreatingOrder &&
+            !orderError &&
+            tokenData &&
+            recipientAddress) {
+            orderCreatedRef.current = true;
+            const dstToken = {
+                address: destinationTokenAddress,
+                chainId: destinationTokenChainId,
+                decimals: tokenData.decimals || 18,
+                symbol: tokenData.symbol || "",
+                name: tokenData.name || "",
+                metadata: {
+                    logoURI: tokenData.logoURI || "",
+                },
+            };
+            createOrder({
+                recipientAddress,
+                orderType: "swap",
+                dstChain: destinationTokenChainId,
+                dstToken,
+                srcFiatAmount: formattedAmount,
+                onramp: {
+                    vendor: "stripe-web2",
+                    paymentMethod: "",
+                    country: geoData?.country || "US",
+                    redirectUrl: window.location.origin,
+                },
+                expectedDstAmount: totalAmount,
+            });
+        }
+    }, [
+        isLoadingGeo,
+        stripeWeb2Support,
+        isSameAsOnrampSource,
+        orderId,
+        isCreatingOrder,
+        orderError,
+        tokenData,
+        recipientAddress,
+        destinationTokenAddress,
+        destinationTokenChainId,
+        formattedAmount,
+        totalAmount,
+        geoData,
+        createOrder,
+    ]);
+    // Loading geo/stripe support check
+    if (isLoadingGeo) {
+        return (_jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, ease: "easeOut" }, className: cn("anyspend-fiat-loading flex flex-col items-center gap-3 py-6", classes?.fiatPanel), children: [_jsx(Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), _jsx(TextShimmer, { duration: 1.5, className: "text-sm", children: "Loading payment form..." })] }));
+    }
+    const hasStripeWeb2 = stripeWeb2Support && stripeWeb2Support.isSupport;
+    const hasStripeRedirect = !!stripeOnrampSupport;
+    // Not available in region
+    if (!hasStripeWeb2 && !hasStripeRedirect) {
+        return (_jsx(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: cn("anyspend-fiat-unavailable py-4 text-center", classes?.fiatPanel), children: _jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Card payments are not available in your region for this amount." }) }));
+    }
+    // Order creation error - show with retry
+    if (orderError) {
+        return (_jsxs(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: cn("anyspend-fiat-error flex flex-col items-center gap-3 py-4", classes?.fiatPanel), children: [_jsx("p", { className: "text-sm text-red-500", children: orderError }), _jsx("button", { onClick: () => {
+                        setOrderError(null);
+                        orderCreatedRef.current = false;
+                    }, className: "anyspend-fiat-retry text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400", children: "Try again" })] }));
+    }
+    // Same-token fallback: USDC on Base uses Stripe redirect instead of embedded
+    if (isSameAsOnrampSource && hasStripeRedirect) {
+        return (_jsxs("div", { className: cn("anyspend-fiat-redirect flex flex-col gap-3 py-2", classes?.fiatPanel), children: [_jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "You'll be redirected to Stripe to complete your payment securely." }), _jsxs("button", { className: cn("anyspend-fiat-redirect-btn flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3.5 text-sm font-semibold text-white transition-all active:scale-[0.98]", "bg-blue-600 hover:bg-blue-700"), style: themeColor ? { backgroundColor: themeColor } : undefined, children: [_jsx(Lock, { className: "h-3.5 w-3.5" }), "Pay with Card"] }), _jsxs("p", { className: "anyspend-fiat-secured flex items-center justify-center gap-1 text-xs text-gray-400", children: [_jsx(Lock, { className: "h-3 w-3" }), "Secured by Stripe"] })] }));
+    }
+    // Same-token without redirect support
+    if (isSameAsOnrampSource) {
+        return (_jsx("div", { className: cn("anyspend-fiat-unavailable py-4 text-center", classes?.fiatPanel), children: _jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Card payments are not available for this token configuration." }) }));
+    }
+    // Creating order / waiting for PaymentIntent
+    if (hasStripeWeb2 && (isCreatingOrder || !stripePaymentIntentId)) {
+        return (_jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, ease: "easeOut" }, className: cn("anyspend-fiat-initializing flex flex-col items-center gap-3 py-6", classes?.fiatPanel), children: [_jsx(Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), _jsx(TextShimmer, { duration: 1.5, className: "text-sm", children: "Initializing secure payment..." })] }));
+    }
+    // Stripe Web2 embedded form
+    if (hasStripeWeb2 && stripePaymentIntentId && orderId) {
+        return (_jsx(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, ease: "easeOut" }, className: cn("anyspend-fiat-stripe", classes?.fiatPanel), children: _jsx(StripeCheckout, { stripePaymentIntentId: stripePaymentIntentId, stripePublishableKey: stripePublishableKey, theme: theme, themeColor: themeColor, orderId: orderId, onSuccess: onSuccess, onError: onError, classes: classes }) }));
+    }
+    // Fallback: Stripe redirect flow (only if web2 not available but redirect is)
+    return (_jsxs("div", { className: cn("anyspend-fiat-redirect flex flex-col gap-3 py-2", classes?.fiatPanel), children: [_jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "You'll be redirected to Stripe to complete your payment securely." }), _jsxs("button", { className: cn("anyspend-fiat-redirect-btn flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3.5 text-sm font-semibold text-white transition-all active:scale-[0.98]", "bg-blue-600 hover:bg-blue-700"), style: themeColor ? { backgroundColor: themeColor } : undefined, children: [_jsx(Lock, { className: "h-3.5 w-3.5" }), "Pay with Card"] }), _jsxs("p", { className: "anyspend-fiat-secured flex items-center justify-center gap-1 text-xs text-gray-400", children: [_jsx(Lock, { className: "h-3 w-3" }), "Secured by Stripe"] })] }));
+}
+function StripeCheckout({ stripePaymentIntentId, stripePublishableKey, theme, themeColor, orderId, onSuccess, onError, classes, }) {
+    const { clientSecret, isLoadingStripeClientSecret, stripeClientSecretError } = useStripeClientSecret(stripePaymentIntentId);
+    if (isLoadingStripeClientSecret) {
+        return (_jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, ease: "easeOut" }, className: "anyspend-stripe-loading flex flex-col items-center gap-3 py-6", children: [_jsx(Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), _jsx(TextShimmer, { duration: 1.5, className: "text-sm", children: "Loading payment form..." })] }));
+    }
+    if (stripeClientSecretError || !clientSecret) {
+        return (_jsx(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: "anyspend-stripe-error py-4 text-center", children: _jsx("p", { className: "text-sm text-red-500", children: stripeClientSecretError?.message || "Failed to load payment form. Please try again." }) }));
+    }
+    return (_jsx(Elements, { stripe: getStripePromise(stripePublishableKey), options: {
+            clientSecret,
+            appearance: {
+                theme: theme === "light" ? "stripe" : "night",
+                variables: {
+                    borderRadius: "8px",
+                },
+            },
+        }, children: _jsx(StripeCheckoutForm, { themeColor: themeColor, orderId: orderId, onSuccess: onSuccess, onError: onError, classes: classes }) }));
+}
+function StripeCheckoutForm({ themeColor, orderId, onSuccess, onError, classes }) {
+    const stripe = useStripe();
+    const elements = useElements();
+    const [loading, setLoading] = useState(false);
+    const [message, setMessage] = useState(null);
+    const [stripeReady, setStripeReady] = useState(false);
+    const [showAddressElement, setShowAddressElement] = useState(false);
+    useEffect(() => {
+        if (stripe && elements) {
+            setStripeReady(true);
+        }
+    }, [stripe, elements]);
+    const handlePaymentElementChange = useCallback((event) => {
+        setShowAddressElement(event.value?.type === "card");
+    }, []);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!stripe || !elements) {
+            setMessage("Payment system is not ready. Please wait.");
+            return;
+        }
+        setLoading(true);
+        setMessage(null);
+        try {
+            const result = (await stripe.confirmPayment({
+                elements,
+                redirect: "if_required",
+            }));
+            if (result.error) {
+                setMessage(result.error.message || "Payment failed. Please try again.");
+                return;
+            }
+            // Payment succeeded
+            onSuccess?.({ orderId, txHash: undefined });
+        }
+        catch (error) {
+            const errorMessage = error?.message || "Payment failed. Please try again.";
+            setMessage(errorMessage);
+            onError?.(error instanceof Error ? error : new Error(errorMessage));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const stripeElementOptions = {
+        layout: "tabs",
+        fields: {
+            billingDetails: "auto",
+        },
+        wallets: {
+            applePay: "auto",
+            googlePay: "auto",
+        },
+    };
+    if (!stripeReady) {
+        return (_jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, ease: "easeOut" }, className: "anyspend-stripe-loading flex flex-col items-center gap-3 py-6", children: [_jsx(Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }), _jsx(TextShimmer, { duration: 1.5, className: "text-sm", children: "Loading payment form..." })] }));
+    }
+    return (_jsxs(motion.form, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, ease: "easeOut" }, onSubmit: handleSubmit, className: "anyspend-stripe-form flex flex-col gap-4", children: [_jsx("div", { className: "anyspend-stripe-payment-element", children: _jsx(PaymentElement, { onChange: handlePaymentElementChange, options: stripeElementOptions }) }), _jsx(AnimatePresence, { initial: false, children: showAddressElement && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.25, ease: "easeOut" }, style: { overflow: "hidden" }, className: "anyspend-stripe-address-element", children: _jsx(AddressElement, { options: {
+                            mode: "billing",
+                            fields: {
+                                phone: "always",
+                            },
+                            display: {
+                                name: "split",
+                            },
+                            validation: {
+                                phone: {
+                                    required: "always",
+                                },
+                            },
+                        } }) }, "address-element")) }), _jsx(AnimatePresence, { initial: false, children: message && (_jsx(motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, className: "anyspend-stripe-error rounded-lg border border-red-200 bg-red-50 px-3 py-2 dark:border-red-800 dark:bg-red-900/20", children: _jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) }, "stripe-error")) }), _jsx("button", { type: "submit", disabled: !stripe || !elements || loading, className: cn("anyspend-stripe-submit flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3.5 text-sm font-semibold text-white transition-all", !stripe || !elements || loading
+                    ? "cursor-not-allowed bg-gray-300 dark:bg-gray-600"
+                    : "bg-blue-600 hover:bg-blue-700 active:scale-[0.98]", classes?.payButton), style: themeColor && !loading ? { backgroundColor: themeColor } : undefined, children: loading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "Processing..."] })) : (_jsxs(_Fragment, { children: [_jsx(Lock, { className: "h-3.5 w-3.5" }), "Complete Payment"] })) }), _jsxs("p", { className: "anyspend-fiat-secured flex items-center justify-center gap-1 text-xs text-gray-400", children: [_jsx(Lock, { className: "h-3 w-3" }), "Secured by Stripe"] })] }));
+}

package/dist/esm/anyspend/react/components/checkout/PoweredByBranding.d.ts

@@ -0,0 +1,8 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface PoweredByBrandingProps {
+    organizationName?: string;
+    organizationLogo?: string;
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function PoweredByBranding({ organizationName, organizationLogo, classes }: PoweredByBrandingProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/anyspend/react/components/checkout/PoweredByBranding.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/cn.js";
+export function PoweredByBranding({ organizationName, organizationLogo, classes }) {
+    return (_jsxs("div", { className: cn("flex items-center justify-between pt-4", classes?.poweredBy), children: [organizationLogo || organizationName ? (_jsxs("div", { className: "flex items-center gap-2", children: [organizationLogo && (_jsx("img", { src: organizationLogo, alt: organizationName || "Organization", className: "h-5 w-5 rounded-full" })), organizationName && (_jsx("span", { className: "text-xs font-medium text-gray-600 dark:text-gray-400", children: organizationName }))] })) : (_jsx("div", {})), _jsxs("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: ["powered by ", _jsx("span", { className: "font-medium text-gray-500 dark:text-gray-400", children: "anyspend" })] })] }));
+}

package/dist/esm/anyspend/react/components/checkout/QRCheckoutPanel.d.ts

@@ -0,0 +1,17 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface QRCheckoutPanelProps {
+    recipientAddress: string;
+    destinationTokenAddress: string;
+    destinationTokenChainId: number;
+    totalAmount: string;
+    themeColor?: string;
+    onSuccess?: (result: {
+        txHash?: string;
+        orderId?: string;
+    }) => void;
+    onError?: (error: Error) => void;
+    callbackMetadata?: Record<string, unknown>;
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function QRCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata: _callbackMetadata, classes, }: QRCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};