@b3dotfun/sdk 0.1.66 → 0.1.68

package/dist/esm/anyspend/react/components/AnySpendTournament.d.ts

@@ -1,4 +1,5 @@
 import { components } from "../../../anyspend/types/api";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 type AnySpendTournamentProps = {
     mode?: "modal" | "page";
     action: "join";
@@ -10,6 +11,11 @@ type AnySpendTournamentProps = {
     tournamentEntryToken: components["schemas"]["Token"];
     tournamentEntryFee: string;
     onSuccess?: () => void;
+    /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
+    senderAddress?: string;
+    slots?: AnySpendSlots;
+    content?: AnySpendContent;
+    theme?: AnySpendTheme;
 } | {
     mode?: "modal" | "page";
     action: "fund";
@@ -20,6 +26,11 @@ type AnySpendTournamentProps = {
     tournamentFundToken: components["schemas"]["Token"];
     tournamentFundAmount: string;
     onSuccess?: () => void;
+    /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
+    senderAddress?: string;
+    slots?: AnySpendSlots;
+    content?: AnySpendContent;
+    theme?: AnySpendTheme;
 };
 export declare function AnySpendTournament(props: AnySpendTournamentProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,7 +4,7 @@ import { formatDisplayNumber, formatTokenAmount } from "../../../shared/utils/nu
 import { AnimatePresence } from "motion/react";
 import { AnySpendCustom } from "./AnySpendCustom.js";
 export function AnySpendTournament(props) {
-    const { mode = "modal", action, loadOrder, tournamentChainId, tournamentContractAddress, tournamentMetadata, onSuccess, } = props;
+    const { mode = "modal", action, loadOrder, tournamentChainId, tournamentContractAddress, tournamentMetadata, onSuccess, senderAddress, slots, content, theme, } = props;
     const dstToken = action === "join" ? props.tournamentEntryToken : props.tournamentFundToken;
     const dstAmount = action === "join" ? props.tournamentEntryFee : props.tournamentFundAmount;
     const header = ({ anyspendPrice, isLoadingAnyspendPrice, }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "z-10 mt-[-100px] flex h-[270px] w-full items-end justify-center", children: _jsx("img", { src: "https://cdn.b3.fun/tournament-play.svg", alt: "Tournament Play", className: "h-[200px] w-[360px] object-cover object-center" }) }), _jsxs("div", { className: "from-b3-react-background to-as-on-surface-1 mt-[-100px] w-full rounded-t-lg bg-gradient-to-t", children: [_jsx("div", { className: "h-[100px] w-full" }), _jsxs("div", { className: "flex w-full flex-col items-center gap-1 p-6 pt-0", children: [_jsxs("span", { className: "font-sf-rounded text-center text-lg font-semibold", children: [action === "join" ? "Pay entry fee to join " : "Pay to fund ", " ", tournamentMetadata.name] }), _jsx("div", { className: "mt-2 flex w-fit items-center gap-1", children: anyspendPrice ? (_jsx(AnimatePresence, { mode: "wait", children: _jsxs("div", { className: cn("text-as-primary group flex items-center text-2xl font-semibold transition-all", {
@@ -13,5 +13,5 @@ export function AnySpendTournament(props) {
     return (_jsx(AnySpendCustom, { loadOrder: loadOrder, mode: mode, recipientAddress: action === "join" ? props.joinFor : undefined, orderType: action === "join" ? "join_tournament" : "fund_tournament", dstChainId: tournamentChainId, dstToken: dstToken, dstAmount: dstAmount, contractAddress: tournamentContractAddress, encodedData: "0x", metadata: {
             type: action === "join" ? "join_tournament" : "fund_tournament",
             tournament: tournamentMetadata,
-        }, header: header, onSuccess: onSuccess, showRecipient: action === "join" }));
+        }, header: header, onSuccess: onSuccess, showRecipient: action === "join", senderAddress: senderAddress, slots: slots, content: content, theme: theme }));
 }

package/dist/esm/anyspend/react/components/AnyspendDepositHype.d.ts

@@ -1,4 +1,5 @@
 import { components } from "../../../anyspend/types/api";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
 export declare const HYPE_TOKEN_DETAILS: {
     SYMBOL: string;
     LOGO_URI: string;
@@ -26,5 +27,10 @@ export interface AnySpendDepositHypeProps {
     returnToHomeUrl?: string;
     /** Custom label for recipient display (e.g., "OBSN Telegram Bot") */
     customRecipientLabel?: string;
+    /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
+    senderAddress?: string;
+    slots?: AnySpendSlots;
+    content?: AnySpendContent;
+    theme?: AnySpendTheme;
 }
-export declare function AnySpendDepositHype({ loadOrder, mode, recipientAddress, paymentType, sourceTokenAddress, sourceTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, }: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AnySpendDepositHype({ loadOrder, mode, recipientAddress, paymentType, sourceTokenAddress, sourceTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, senderAddress, slots, content, theme, }: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -6,7 +6,7 @@ export const HYPE_TOKEN_DETAILS = {
     SYMBOL: "HYPE",
     LOGO_URI: "https://cdn.hypeduel.com/hypes-coin.svg",
 };
-export function AnySpendDepositHype({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, }) {
+export function AnySpendDepositHype({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, senderAddress, slots, content, theme, }) {
     if (!recipientAddress)
         return null;
     const header = () => (_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("div", { children: _jsx("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }));
@@ -19,5 +19,5 @@ export function AnySpendDepositHype({ loadOrder, mode = "modal", recipientAddres
             logoURI: HYPE_TOKEN_DETAILS.LOGO_URI,
         },
     };
-    return (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: hypeToken, destinationChainId: base.id, orderType: "hype_duel", minDestinationAmount: 10, header: header, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa }));
+    return (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: hypeToken, destinationChainId: base.id, orderType: "hype_duel", minDestinationAmount: 10, header: header, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa, senderAddress: senderAddress, slots: slots, content: content, theme: theme }));
 }

package/dist/esm/anyspend/react/components/AnyspendSignatureMint.d.ts

@@ -1,8 +1,12 @@
 import { GenerateSigMintResponse } from "../../types/signatureMint";
-export declare function AnyspendSignatureMint({ loadOrder, mode, signatureData, imageUrl, onSuccess, }: {
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
+export declare function AnyspendSignatureMint({ loadOrder, mode, signatureData, imageUrl, onSuccess, slots, content, theme, }: {
     loadOrder?: string;
     mode?: "modal" | "page";
     signatureData: GenerateSigMintResponse;
     imageUrl?: string;
     onSuccess?: (txHash?: string) => void;
+    slots?: AnySpendSlots;
+    content?: AnySpendContent;
+    theme?: AnySpendTheme;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -35,7 +35,7 @@ function generateEncodedDataForSignatureMint(signatureData) {
     });
     return encodedData;
 }
-export function AnyspendSignatureMint({ loadOrder, mode = "modal", signatureData, imageUrl, onSuccess, }) {
+export function AnyspendSignatureMint({ loadOrder, mode = "modal", signatureData, imageUrl, onSuccess, slots, content, theme, }) {
     // Get token data
     const { data: tokenData, isError: isTokenError, isLoading, } = useTokenData(signatureData.collection.chainId, signatureData.collection.signatureRequestBody?.currency);
     // Convert token data to AnySpend Token type
@@ -68,5 +68,5 @@ export function AnyspendSignatureMint({ loadOrder, mode = "modal", signatureData
     const price = parseEther(signatureData.payload.price?.toString() || "0");
     return (_jsx(AnySpendCustom, { loadOrder: loadOrder, mode: mode, recipientAddress: signatureData.payload.to, orderType: "custom", dstChainId: signatureData.collection.chainId, dstToken: dstToken, dstAmount: price.toString(), contractAddress: signatureData.collection.address || "", encodedData: encodedData, metadata: {
             action: "Signature Mint",
-        }, header: header, onSuccess: onSuccess, showRecipient: true }));
+        }, header: header, onSuccess: onSuccess, showRecipient: true, slots: slots, content: content, theme: theme }));
 }

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

@@ -0,0 +1,9 @@
+import type { AddressData } from "../../../types/forms";
+interface AddressFormProps {
+    value: AddressData;
+    onChange: (address: AddressData) => void;
+    required?: boolean;
+    className?: string;
+}
+export declare function AddressForm({ value, onChange, required, className }: AddressFormProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/cn.js";
+const inputBaseClass = "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 outline-none transition-colors focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-blue-400";
+const labelClass = "mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300";
+export function AddressForm({ value, onChange, required, className }) {
+    const update = (field, val) => {
+        onChange({ ...value, [field]: val });
+    };
+    return (_jsxs("div", { className: cn("anyspend-address-form space-y-3", className), children: [_jsxs("div", { className: "anyspend-address-street", children: [_jsxs("label", { className: cn("anyspend-form-label", labelClass), children: ["Street Address", required && _jsx("span", { className: "ml-0.5 text-red-500", children: "*" })] }), _jsx("input", { type: "text", value: value.street || "", onChange: e => update("street", e.target.value), placeholder: "123 Main Street", required: required, className: cn("anyspend-form-input", inputBaseClass) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "anyspend-address-city", children: [_jsxs("label", { className: cn("anyspend-form-label", labelClass), children: ["City", required && _jsx("span", { className: "ml-0.5 text-red-500", children: "*" })] }), _jsx("input", { type: "text", value: value.city || "", onChange: e => update("city", e.target.value), placeholder: "City", required: required, className: cn("anyspend-form-input", inputBaseClass) })] }), _jsxs("div", { className: "anyspend-address-state", children: [_jsxs("label", { className: cn("anyspend-form-label", labelClass), children: ["State / Province", required && _jsx("span", { className: "ml-0.5 text-red-500", children: "*" })] }), _jsx("input", { type: "text", value: value.state || "", onChange: e => update("state", e.target.value), placeholder: "State", required: required, className: cn("anyspend-form-input", inputBaseClass) })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "anyspend-address-zip", children: [_jsxs("label", { className: cn("anyspend-form-label", labelClass), children: ["Zip / Postal Code", required && _jsx("span", { className: "ml-0.5 text-red-500", children: "*" })] }), _jsx("input", { type: "text", value: value.zip || "", onChange: e => update("zip", e.target.value), placeholder: "12345", required: required, className: cn("anyspend-form-input", inputBaseClass) })] }), _jsxs("div", { className: "anyspend-address-country", children: [_jsxs("label", { className: cn("anyspend-form-label", labelClass), children: ["Country", required && _jsx("span", { className: "ml-0.5 text-red-500", children: "*" })] }), _jsx("input", { type: "text", value: value.country || "", onChange: e => update("country", e.target.value), placeholder: "Country", required: required, className: cn("anyspend-form-input", inputBaseClass) })] })] })] }));
+}

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

@@ -0,0 +1,117 @@
+import { type ReactNode } from "react";
+import { type PaymentMethod } from "./CheckoutPaymentPanel";
+export type { AnySpendCheckoutClasses } from "../types/classes";
+import type { AnySpendCheckoutClasses } from "../types/classes";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "../types/customization";
+import type { CheckoutFormSchema, CheckoutFormComponentProps, ShippingOption, DiscountResult, AddressData } from "../../../types/forms";
+export type { CheckoutFormSchema, CheckoutFormComponentProps, ShippingOption, DiscountResult, AddressData };
+export interface CheckoutItem {
+    id?: string;
+    name: string;
+    description?: string;
+    imageUrl?: string;
+    /** Amount in wei (smallest unit of destination token) */
+    amount: string;
+    quantity: number;
+    /** Custom metadata displayed as label: value pairs (e.g., { "Size": "Large", "Color": "Blue" }) */
+    metadata?: Record<string, string>;
+}
+export interface CheckoutSummaryLine {
+    /** Display label (e.g., "Platform Fee", "Service Charge") */
+    label: string;
+    /** Amount in token's smallest unit (wei). Negative values shown as deductions. */
+    amount: string;
+    /** Optional description or note */
+    description?: string;
+}
+export interface AnySpendCheckoutProps {
+    /** Display mode */
+    mode?: "page" | "embedded";
+    /** The recipient address */
+    recipientAddress: string;
+    /** The destination token address */
+    destinationTokenAddress: string;
+    /** The destination chain ID */
+    destinationTokenChainId: number;
+    /** Line items */
+    items: CheckoutItem[];
+    /** Override computed total */
+    totalAmount?: string;
+    /** Organization name */
+    organizationName?: string;
+    /** Organization logo URL */
+    organizationLogo?: string;
+    /** Theme color (hex) */
+    themeColor?: string;
+    /** Custom button text */
+    buttonText?: string;
+    /** Checkout session ID (used by pay link backend to track sessions) */
+    checkoutSessionId?: string;
+    /** Called on successful payment */
+    onSuccess?: (result: {
+        txHash?: string;
+        orderId?: string;
+    }) => void;
+    /** Called on payment error */
+    onError?: (error: Error) => void;
+    /** URL to redirect to after payment */
+    returnUrl?: string;
+    /** Label for the return button */
+    returnLabel?: string;
+    /** Custom class names */
+    classes?: AnySpendCheckoutClasses;
+    /** Custom footer for the order summary. Pass `null` to hide, or a ReactNode to replace the default. */
+    footer?: ReactNode | null;
+    /** Which payment method to expand initially. Defaults to none (all collapsed). */
+    defaultPaymentMethod?: PaymentMethod;
+    /** Optional sender (payer) address — pre-fills token balances in the crypto panel */
+    senderAddress?: string;
+    /** Render function overrides for replaceable UI elements */
+    slots?: AnySpendSlots;
+    /** String or ReactNode overrides for text/messages */
+    content?: AnySpendContent;
+    /** Structured color/theme configuration */
+    theme?: AnySpendTheme;
+    /** Show the points row in the order status summary. Defaults to false. */
+    showPoints?: boolean;
+    /** Show the order ID row in the order status summary. Defaults to false. */
+    showOrderId?: boolean;
+    /** Shipping cost. String = amount in wei. Object = amount + custom label. */
+    shipping?: string | {
+        amount: string;
+        label?: string;
+    };
+    /** Tax amount. String = amount in wei. Object = amount + custom label + optional rate display. */
+    tax?: string | {
+        amount: string;
+        label?: string;
+        rate?: string;
+    };
+    /** Discount amount (displayed as negative). String = amount in wei. Object = amount + label + optional code. */
+    discount?: string | {
+        amount: string;
+        label?: string;
+        code?: string;
+    };
+    /** Additional summary line items (fees, tips, etc.) */
+    summaryLines?: CheckoutSummaryLine[];
+    /** JSON form schema defining fields to collect from the customer */
+    formSchema?: CheckoutFormSchema | null;
+    /** Custom React component to render as the checkout form */
+    formComponent?: React.ComponentType<CheckoutFormComponentProps>;
+    /** Called when form data changes */
+    onFormSubmit?: (data: Record<string, unknown>) => void;
+    /** Shipping options to display */
+    shippingOptions?: ShippingOption[] | null;
+    /** Whether to collect a shipping address */
+    collectShippingAddress?: boolean;
+    /** Called when shipping option changes */
+    onShippingChange?: (option: ShippingOption) => void;
+    /** Enable discount code input */
+    enableDiscountCode?: boolean;
+    /** Called when discount is applied */
+    onDiscountApplied?: (result: DiscountResult) => void;
+    /** Async function to validate a discount code. Returns DiscountResult. */
+    validateDiscount?: (code: string) => Promise<DiscountResult>;
+}
+export declare function AnySpendCheckout({ mode, recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText, checkoutSessionId, onSuccess, onError, returnUrl, returnLabel, classes, footer, defaultPaymentMethod, senderAddress, slots, content, theme, showPoints, showOrderId, shipping: shippingProp, tax, discount: discountProp, summaryLines, formSchema, formComponent, onFormSubmit, shippingOptions, collectShippingAddress, onShippingChange: onShippingChangeProp, enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount, }: AnySpendCheckoutProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,155 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTokenData } from "../../../../global-account/react/index.js";
+import { USDC_BASE } from "../../../../anyspend/constants/index.js";
+import { formatUnits, safeBigInt } from "../../../../shared/utils/number.js";
+import { useCallback, useMemo, useState } from "react";
+import { useAnyspendQuote } from "../../hooks/useAnyspendQuote.js";
+import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper.js";
+import { CheckoutCartPanel } from "./CheckoutCartPanel.js";
+import { CheckoutFormPanel } from "./CheckoutFormPanel.js";
+import { CheckoutLayout } from "./CheckoutLayout.js";
+import { CheckoutPaymentPanel } from "./CheckoutPaymentPanel.js";
+import { AnySpendCustomizationProvider } from "../context/AnySpendCustomizationContext.js";
+const emptyAddress = { street: "", city: "", state: "", zip: "", country: "" };
+export function AnySpendCheckout({ mode = "page", recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText = "Pay", checkoutSessionId, onSuccess, onError, returnUrl, returnLabel, classes, footer, defaultPaymentMethod, senderAddress, slots, content, theme, showPoints, showOrderId, shipping: shippingProp, tax, discount: discountProp, summaryLines, 
+// New form props
+formSchema, formComponent, onFormSubmit, 
+// New shipping props
+shippingOptions, collectShippingAddress, onShippingChange: onShippingChangeProp, 
+// New discount props
+enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount, }) {
+    // ===== Form state =====
+    const [formData, setFormData] = useState({});
+    const [selectedShipping, setSelectedShipping] = useState(null);
+    const [appliedDiscount, setAppliedDiscount] = useState(null);
+    const [shippingAddress, setShippingAddress] = useState(emptyAddress);
+    const handleFormDataChange = useCallback((data) => {
+        setFormData(data);
+        onFormSubmit?.(data);
+    }, [onFormSubmit]);
+    const handleShippingChange = useCallback((option) => {
+        setSelectedShipping(option);
+        onShippingChangeProp?.(option);
+    }, [onShippingChangeProp]);
+    const handleDiscountApplied = useCallback((result) => {
+        setAppliedDiscount(result);
+        onDiscountAppliedProp?.(result);
+    }, [onDiscountAppliedProp]);
+    const handleDiscountRemoved = useCallback(() => {
+        setAppliedDiscount(null);
+    }, []);
+    // Merge static shipping prop with dynamic shipping selection
+    const effectiveShipping = useMemo(() => {
+        if (selectedShipping) {
+            return { amount: selectedShipping.amount, label: selectedShipping.name };
+        }
+        if (shippingProp) {
+            return typeof shippingProp === "string" ? { amount: shippingProp } : shippingProp;
+        }
+        return undefined;
+    }, [selectedShipping, shippingProp]);
+    // Merge static discount prop with dynamic discount
+    const effectiveDiscount = useMemo(() => {
+        if (appliedDiscount?.valid && appliedDiscount.discount_amount) {
+            return {
+                amount: appliedDiscount.discount_amount,
+                label: appliedDiscount.discount_type === "percentage" ? `${appliedDiscount.discount_value}% off` : "Discount",
+            };
+        }
+        if (discountProp) {
+            return typeof discountProp === "string" ? { amount: discountProp } : discountProp;
+        }
+        return undefined;
+    }, [appliedDiscount, discountProp]);
+    // Compute total from items + adjustments (including dynamic shipping/discount)
+    const computedTotal = useMemo(() => {
+        if (totalAmountOverride)
+            return totalAmountOverride;
+        let total = BigInt(0);
+        for (const item of items) {
+            total += safeBigInt(item.amount) * BigInt(item.quantity);
+        }
+        if (effectiveShipping?.amount)
+            total += safeBigInt(effectiveShipping.amount);
+        const taxAmt = typeof tax === "string" ? tax : tax?.amount;
+        if (taxAmt)
+            total += safeBigInt(taxAmt);
+        if (effectiveDiscount?.amount)
+            total -= safeBigInt(effectiveDiscount.amount);
+        if (summaryLines) {
+            for (const line of summaryLines)
+                total += safeBigInt(line.amount);
+        }
+        if (total < BigInt(0))
+            total = BigInt(0);
+        return total.toString();
+    }, [items, totalAmountOverride, effectiveShipping, tax, effectiveDiscount, summaryLines]);
+    // Get destination token metadata
+    const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
+    const tokenSymbol = tokenData?.symbol || "";
+    const tokenDecimals = tokenData?.decimals || 18;
+    // Resolve USD equivalent for non-stablecoin tokens (shown in cart summary)
+    const isStablecoin = useMemo(() => {
+        return [
+            "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", // USDC Base
+            "0xdAC17F958D2ee523a2206206994597C13D831ec7", // USDT Ethereum
+        ].some(addr => addr.toLowerCase() === destinationTokenAddress.toLowerCase());
+    }, [destinationTokenAddress]);
+    const { anyspendQuote } = useAnyspendQuote({
+        type: "swap",
+        srcChain: 8453,
+        dstChain: destinationTokenChainId,
+        srcTokenAddress: USDC_BASE.address,
+        dstTokenAddress: destinationTokenAddress,
+        tradeType: "EXACT_OUTPUT",
+        amount: computedTotal,
+    });
+    const usdEquivalent = useMemo(() => {
+        if (isStablecoin)
+            return null; // stablecoins already show USD-equivalent amounts
+        if (!anyspendQuote?.data?.currencyIn?.amount)
+            return null;
+        const raw = formatUnits(anyspendQuote.data.currencyIn.amount, USDC_BASE.decimals);
+        return `$${parseFloat(raw).toFixed(2)}`;
+    }, [isStablecoin, anyspendQuote]);
+    const fingerprint = getFingerprintConfig();
+    // Build callbackMetadata to include form data with the order
+    const checkoutFormMetadata = useMemo(() => {
+        const meta = {};
+        if (Object.keys(formData).length > 0)
+            meta.formData = formData;
+        if (selectedShipping)
+            meta.shippingOptionId = selectedShipping.id;
+        if (selectedShipping)
+            meta.shippingAmount = selectedShipping.amount;
+        if (shippingAddress.street)
+            meta.shippingAddress = shippingAddress;
+        if (appliedDiscount?.valid) {
+            meta.discountCode = appliedDiscount.discount_value;
+            meta.discountAmount = appliedDiscount.discount_amount;
+        }
+        // Extract common fields for customer enrichment
+        if (formData.email)
+            meta.customerEmail = formData.email;
+        if (formData.name)
+            meta.customerName = formData.name;
+        if (checkoutSessionId)
+            meta.checkoutSessionId = checkoutSessionId;
+        return Object.keys(meta).length > 0 ? meta : undefined;
+    }, [formData, selectedShipping, shippingAddress, appliedDiscount, checkoutSessionId]);
+    // Check if required form fields are filled
+    const isFormValid = useMemo(() => {
+        if (!formSchema)
+            return true;
+        return formSchema.fields.filter(f => f.required).every(f => formData[f.id] != null && formData[f.id] !== "");
+    }, [formSchema, formData]);
+    // Check if we have a form panel to show
+    const hasFormContent = (formSchema && formSchema.fields.length > 0) ||
+        formComponent ||
+        slots?.checkoutForm ||
+        (shippingOptions && shippingOptions.length > 0) ||
+        collectShippingAddress ||
+        enableDiscountCode;
+    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: _jsx(AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: _jsx(CheckoutLayout, { mode: mode, paymentPanel: _jsxs(_Fragment, { children: [hasFormContent && (_jsxs("div", { className: "mb-6", children: [_jsx(CheckoutFormPanel, { formSchema: formSchema, formComponent: formComponent, shippingOptions: shippingOptions, collectShippingAddress: collectShippingAddress, enableDiscountCode: enableDiscountCode, validateDiscount: validateDiscount, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, classes: classes, formData: formData, onFormDataChange: handleFormDataChange, selectedShipping: selectedShipping, onShippingChange: handleShippingChange, appliedDiscount: appliedDiscount, onDiscountApplied: handleDiscountApplied, onDiscountRemoved: handleDiscountRemoved, shippingAddress: shippingAddress, onShippingAddressChange: setShippingAddress, checkoutFormSlot: slots?.checkoutForm }), _jsx("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), _jsx(CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress, showPoints: showPoints, showOrderId: showOrderId, callbackMetadata: checkoutFormMetadata, isFormValid: isFormValid })] }), cartPanel: _jsx(CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes, footer: footer, shipping: effectiveShipping, tax: typeof tax === "string" ? { amount: tax } : tax, discount: effectiveDiscount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), classes: classes }) }) }));
+}

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

@@ -0,0 +1,81 @@
+import { type ReactNode } from "react";
+import type { AnySpendCheckoutClasses } from "../types/classes";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "../types/customization";
+import type { CheckoutItem, CheckoutSummaryLine } from "./AnySpendCheckout";
+import { type PaymentMethod } from "./CheckoutPaymentPanel";
+export interface AnySpendCheckoutTriggerProps {
+    /** Payment recipient address (hex) */
+    recipientAddress: string;
+    /** Destination token address */
+    destinationTokenAddress: string;
+    /** Destination chain ID */
+    destinationTokenChainId: number;
+    /** Line items to display in the cart (optional — if omitted, only the payment panel is shown) */
+    items?: CheckoutItem[];
+    /** Total amount in wei — required when items are not provided */
+    totalAmount?: string;
+    /** Organization name */
+    organizationName?: string;
+    /** Organization logo URL */
+    organizationLogo?: string;
+    /** Theme color (hex) */
+    themeColor?: string;
+    /** Custom button text */
+    buttonText?: string;
+    /** Workflow ID to trigger on payment */
+    workflowId?: string;
+    /** Organization ID that owns the workflow */
+    orgId?: string;
+    /** Optional callback metadata merged into the order */
+    callbackMetadata?: {
+        /** Passed as trigger result inputs — accessible via {{root.result.inputs.*}} */
+        inputs?: Record<string, unknown>;
+    } & Record<string, unknown>;
+    /** Called on successful payment */
+    onSuccess?: (result: {
+        txHash?: string;
+        orderId?: string;
+    }) => void;
+    /** Called on payment error */
+    onError?: (error: Error) => void;
+    /** URL to redirect to after payment */
+    returnUrl?: string;
+    /** Label for the return button */
+    returnLabel?: string;
+    /** Custom class names */
+    classes?: AnySpendCheckoutClasses;
+    /** Display mode — set automatically when used inside B3DynamicModal */
+    mode?: "modal" | "page";
+    /** Custom footer for the order summary. Pass `null` to hide, or a ReactNode to replace the default. */
+    footer?: ReactNode | null;
+    /** Which payment method to expand initially. Defaults to none (all collapsed). */
+    defaultPaymentMethod?: PaymentMethod;
+    /** Optional sender (payer) address — pre-fills token balances in the crypto panel */
+    senderAddress?: string;
+    /** Render function overrides for replaceable UI elements */
+    slots?: AnySpendSlots;
+    /** String or ReactNode overrides for text/messages */
+    content?: AnySpendContent;
+    /** Structured color/theme configuration */
+    theme?: AnySpendTheme;
+    /** Shipping cost. String = amount in wei. Object = amount + custom label. */
+    shipping?: string | {
+        amount: string;
+        label?: string;
+    };
+    /** Tax amount. String = amount in wei. Object = amount + custom label + optional rate display. */
+    tax?: string | {
+        amount: string;
+        label?: string;
+        rate?: string;
+    };
+    /** Discount amount (displayed as negative). String = amount in wei. Object = amount + label + optional code. */
+    discount?: string | {
+        amount: string;
+        label?: string;
+        code?: string;
+    };
+    /** Additional summary line items (fees, tips, etc.) */
+    summaryLines?: CheckoutSummaryLine[];
+}
+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;

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

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTokenData } from "../../../../global-account/react/index.js";
+import { formatTokenAmount, safeBigInt } from "../../../../shared/utils/number.js";
+import { cn } from "../../../../shared/utils/cn.js";
+import { useMemo } from "react";
+import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper.js";
+import { AnySpendCustomizationProvider } from "../context/AnySpendCustomizationContext.js";
+import { CheckoutCartPanel } from "./CheckoutCartPanel.js";
+import { CheckoutPaymentPanel } from "./CheckoutPaymentPanel.js";
+import { PoweredByBranding } from "./PoweredByBranding.js";
+export function AnySpendCheckoutTrigger({ recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText = "Pay", workflowId, orgId, callbackMetadata, onSuccess, onError, returnUrl, returnLabel, classes, footer, defaultPaymentMethod, senderAddress, slots, content, theme, shipping, tax, discount, summaryLines, }) {
+    // Merge workflowId + orgId into callbackMetadata
+    const mergedMetadata = useMemo(() => {
+        if (!workflowId && !orgId && !callbackMetadata)
+            return undefined;
+        return {
+            ...(workflowId ? { workflowId } : {}),
+            ...(orgId ? { orgId } : {}),
+            ...callbackMetadata,
+        };
+    }, [workflowId, orgId, callbackMetadata]);
+    // Compute total from items + adjustments or use override
+    const computedTotal = useMemo(() => {
+        if (totalAmountOverride)
+            return totalAmountOverride;
+        if (!items || items.length === 0)
+            return "0";
+        let total = BigInt(0);
+        for (const item of items) {
+            total += safeBigInt(item.amount) * BigInt(item.quantity);
+        }
+        const shippingAmt = typeof shipping === "string" ? shipping : shipping?.amount;
+        if (shippingAmt)
+            total += safeBigInt(shippingAmt);
+        const taxAmt = typeof tax === "string" ? tax : tax?.amount;
+        if (taxAmt)
+            total += safeBigInt(taxAmt);
+        const discountAmt = typeof discount === "string" ? discount : discount?.amount;
+        if (discountAmt)
+            total -= safeBigInt(discountAmt);
+        if (summaryLines) {
+            for (const line of summaryLines)
+                total += safeBigInt(line.amount);
+        }
+        if (total < BigInt(0))
+            total = BigInt(0);
+        return total.toString();
+    }, [items, totalAmountOverride, shipping, tax, discount, summaryLines]);
+    // Get destination token metadata
+    const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
+    const tokenSymbol = tokenData?.symbol || "";
+    const tokenDecimals = tokenData?.decimals || 18;
+    const formattedTotal = useMemo(() => formatTokenAmount(BigInt(computedTotal || "0"), tokenDecimals), [computedTotal, tokenDecimals]);
+    const hasItems = items && items.length > 0;
+    const fingerprint = getFingerprintConfig();
+    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: _jsx(AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: _jsxs("div", { className: "anyspend-checkout-trigger flex flex-col", children: [hasItems && (_jsx("div", { className: "border-b border-gray-200 p-5 dark:border-neutral-700", children: _jsx(CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes, footer: footer, shipping: typeof shipping === "string" ? { amount: shipping } : shipping, tax: typeof tax === "string" ? { amount: tax } : tax, discount: typeof discount === "string" ? { amount: discount } : discount, summaryLines: summaryLines }) })), !hasItems && (_jsx("div", { className: "border-b border-gray-200 p-5 dark:border-neutral-700", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: cn("flex items-center justify-between", classes?.cartSummary), children: [_jsx("span", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Total" }), _jsxs("span", { className: cn("text-base font-semibold text-gray-900 dark:text-gray-100", classes?.cartTotal), children: [formattedTotal, " ", tokenSymbol] })] }), footer === undefined ? (_jsx(PoweredByBranding, { organizationName: organizationName, organizationLogo: organizationLogo, classes: classes })) : (footer)] }) })), _jsx("div", { className: "px-2 py-3", children: _jsx(CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, callbackMetadata: mergedMetadata, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress }) })] }) }) }));
+}

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

@@ -0,0 +1,8 @@
+import type { CheckoutItem, AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface CartItemRowProps {
+    item: CheckoutItem;
+    formattedPrice: string;
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function CartItemRow({ item, formattedPrice, classes }: CartItemRowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/anyspend/react/components/checkout/CartItemRow.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 CartItemRow({ item, formattedPrice, classes }) {
+    return (_jsxs("div", { className: cn("flex items-start gap-3 py-3", classes?.cartItemRow), children: [item.imageUrl && (_jsx("div", { className: cn("h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-gray-100", classes?.cartItemImage), children: _jsx("img", { src: item.imageUrl, alt: item.name, className: "h-full w-full object-cover" }) })), _jsxs("div", { className: "flex min-w-0 flex-1 items-start justify-between", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: cn("text-sm font-medium text-gray-900 dark:text-gray-100", classes?.cartItemName), children: item.name }), item.description && (_jsx("p", { className: cn("mt-0.5 line-clamp-2 text-xs text-gray-500 dark:text-gray-400", classes?.cartItemDescription), children: item.description })), item.quantity > 1 && _jsxs("p", { className: "mt-0.5 text-xs text-gray-400 dark:text-gray-500", children: ["Qty: ", item.quantity] }), item.metadata && Object.keys(item.metadata).length > 0 && (_jsx("div", { className: cn("mt-1 flex flex-wrap gap-x-3 gap-y-0.5", classes?.cartItemMetadata), children: Object.entries(item.metadata).map(([key, value]) => (_jsxs("span", { className: cn("text-xs text-gray-400 dark:text-gray-500", classes?.cartItemMetadataLabel), children: [key, ":", " ", _jsx("span", { className: cn("text-gray-600 dark:text-gray-300", classes?.cartItemMetadataValue), children: value })] }, key))) }))] }), _jsx("p", { className: cn("ml-3 text-sm font-medium text-gray-900 dark:text-gray-100", classes?.cartItemPrice), children: formattedPrice })] })] }));
+}

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

@@ -0,0 +1,30 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+import type { CheckoutSummaryLine } from "./AnySpendCheckout";
+interface CartSummaryProps {
+    /** Formatted total (final amount after all adjustments) */
+    total: string;
+    tokenSymbol?: string;
+    classes?: AnySpendCheckoutClasses;
+    /** Formatted subtotal (sum of items only — shown when adjustments exist) */
+    subtotal?: string;
+    tokenDecimals?: number;
+    shipping?: {
+        amount: string;
+        label?: string;
+    };
+    tax?: {
+        amount: string;
+        label?: string;
+        rate?: string;
+    };
+    discount?: {
+        amount: string;
+        label?: string;
+        code?: string;
+    };
+    summaryLines?: CheckoutSummaryLine[];
+    /** Formatted USD equivalent (e.g. "$5.56") — shown for non-stablecoin tokens */
+    usdEquivalent?: string | null;
+}
+export declare function CartSummary({ total, tokenSymbol, classes, subtotal, tokenDecimals, shipping, tax, discount, summaryLines, usdEquivalent, }: CartSummaryProps): import("react/jsx-runtime").JSX.Element;
+export {};