@b3dotfun/sdk 0.1.68-alpha.2 → 0.1.68-alpha.3

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

@@ -1,10 +1,12 @@
 import { type ReactNode } from "react";
-import { type PaymentMethod } from "./CheckoutPaymentPanel";
-export type { AnySpendCheckoutClasses } from "../types/classes";
+import type { AddressData, CheckoutFormComponentProps, CheckoutFormSchema, DiscountResult, ShippingOption } from "../../../types/forms";
 import type { AnySpendCheckoutClasses } from "../types/classes";
 import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "../types/customization";
-import type { CheckoutFormSchema, CheckoutFormComponentProps, ShippingOption, DiscountResult, AddressData } from "../../../types/forms";
-export type { CheckoutFormSchema, CheckoutFormComponentProps, ShippingOption, DiscountResult, AddressData };
+import { type PaymentMethod } from "./CheckoutPaymentPanel";
+import { type VariablePricingConfig } from "./VariablePricingInput";
+export type { AnySpendCheckoutClasses } from "../types/classes";
+export type { VariablePricingConfig } from "./VariablePricingInput";
+export type { AddressData, CheckoutFormComponentProps, CheckoutFormSchema, DiscountResult, ShippingOption };
 export interface CheckoutItem {
     id?: string;
     name: string;
@@ -33,7 +35,7 @@ export interface AnySpendCheckoutProps {
     destinationTokenAddress: string;
     /** The destination chain ID */
     destinationTokenChainId: number;
-    /** Line items */
+    /** Line items. When `variablePricing.enabled` is true, pass a single placeholder item (e.g. amount "0") — the user-entered amount overrides the total. */
     items: CheckoutItem[];
     /** Override computed total */
     totalAmount?: string;
@@ -113,7 +115,9 @@ export interface AnySpendCheckoutProps {
     onDiscountApplied?: (result: DiscountResult) => void;
     /** Async function to validate a discount code. Returns DiscountResult. */
     validateDiscount?: (code: string) => Promise<DiscountResult>;
+    /** Variable pricing / name your price config. When enabled, user enters amount before payment. */
+    variablePricing?: VariablePricingConfig;
     /** When true, fees are added on top of the amount (payer pays more, receiver gets exact amount) */
     feeOnTop?: boolean;
 }
-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, 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, }: AnySpendCheckoutProps): import("react/jsx-runtime").JSX.Element;

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

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

@@ -0,0 +1,17 @@
+export interface VariablePricingConfig {
+    enabled: boolean;
+    minAmount?: string;
+    maxAmount?: string;
+    suggestedAmount?: string;
+    label?: string;
+    currency?: string;
+}
+interface VariablePricingInputProps {
+    config: VariablePricingConfig;
+    tokenDecimals: number;
+    tokenSymbol: string;
+    themeColor?: string;
+    onChange: (amountWei: string) => void;
+}
+export declare function VariablePricingInput({ config, tokenDecimals, tokenSymbol, themeColor, onChange, }: VariablePricingInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,145 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VariablePricingInput = VariablePricingInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+const number_1 = require("../../../../shared/utils/number");
+const react_1 = require("motion/react");
+const react_2 = require("react");
+function VariablePricingInput({ config, tokenDecimals, tokenSymbol, themeColor, onChange, }) {
+    const currency = config.currency || tokenSymbol;
+    // Convert suggested amount from wei to display
+    const initialValue = (0, react_2.useMemo)(() => {
+        if (config.suggestedAmount) {
+            try {
+                return (0, number_1.formatUnits)(config.suggestedAmount, tokenDecimals);
+            }
+            catch {
+                return "";
+            }
+        }
+        return "";
+    }, [config.suggestedAmount, tokenDecimals]);
+    const [displayValue, setDisplayValue] = (0, react_2.useState)(initialValue);
+    const [error, setError] = (0, react_2.useState)(null);
+    // Min/max in display units
+    const minDisplay = (0, react_2.useMemo)(() => {
+        if (!config.minAmount)
+            return null;
+        try {
+            return parseFloat((0, number_1.formatUnits)(config.minAmount, tokenDecimals));
+        }
+        catch {
+            return null;
+        }
+    }, [config.minAmount, tokenDecimals]);
+    const maxDisplay = (0, react_2.useMemo)(() => {
+        if (!config.maxAmount)
+            return null;
+        try {
+            return parseFloat((0, number_1.formatUnits)(config.maxAmount, tokenDecimals));
+        }
+        catch {
+            return null;
+        }
+    }, [config.maxAmount, tokenDecimals]);
+    // Preset amounts
+    const presetAmounts = (0, react_2.useMemo)(() => {
+        const presets = [];
+        if (config.suggestedAmount) {
+            try {
+                const suggested = parseFloat((0, number_1.formatUnits)(config.suggestedAmount, tokenDecimals));
+                const candidates = [suggested / 2, suggested, suggested * 2];
+                for (const val of candidates) {
+                    if (val <= 0)
+                        continue;
+                    if (minDisplay !== null && val < minDisplay)
+                        continue;
+                    if (maxDisplay !== null && val > maxDisplay)
+                        continue;
+                    const display = val % 1 === 0 ? val.toString() : val.toFixed(2);
+                    presets.push({ label: `${display}`, value: display });
+                }
+            }
+            catch {
+                // skip presets
+            }
+        }
+        return presets;
+    }, [config.suggestedAmount, tokenDecimals, minDisplay, maxDisplay]);
+    const validate = (0, react_2.useCallback)((value) => {
+        const parsed = parseFloat(value);
+        if (!value || isNaN(parsed))
+            return "Please enter a valid number";
+        if (parsed <= 0)
+            return "Please enter an amount";
+        if (minDisplay !== null && parsed < minDisplay) {
+            const display = minDisplay % 1 === 0 ? minDisplay.toString() : minDisplay.toFixed(2);
+            return `Minimum amount is ${display} ${currency}`;
+        }
+        if (maxDisplay !== null && parsed > maxDisplay) {
+            const display = maxDisplay % 1 === 0 ? maxDisplay.toString() : maxDisplay.toFixed(2);
+            return `Maximum amount is ${display} ${currency}`;
+        }
+        return null;
+    }, [minDisplay, maxDisplay, currency]);
+    const convertToWei = (0, react_2.useCallback)((value) => {
+        try {
+            const [whole, frac = ""] = value.split(".");
+            const paddedFrac = frac.padEnd(tokenDecimals, "0").slice(0, tokenDecimals);
+            const factor = BigInt(10) ** BigInt(tokenDecimals);
+            return (BigInt(whole || "0") * factor + BigInt(paddedFrac)).toString();
+        }
+        catch {
+            return "0";
+        }
+    }, [tokenDecimals]);
+    const handleChange = (0, react_2.useCallback)((value) => {
+        setDisplayValue(value);
+        const validationError = validate(value);
+        setError(validationError);
+        if (!validationError && value && parseFloat(value) > 0) {
+            onChange(convertToWei(value));
+        }
+        else {
+            onChange("0");
+        }
+    }, [validate, convertToWei, onChange]);
+    const handlePresetClick = (0, react_2.useCallback)((value) => {
+        setDisplayValue(value);
+        setError(null);
+        onChange(convertToWei(value));
+    }, [convertToWei, onChange]);
+    // Notify parent with initial value on mount
+    (0, react_2.useEffect)(() => {
+        if (initialValue && !validate(initialValue)) {
+            onChange(convertToWei(initialValue));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const formatHint = () => {
+        if (minDisplay !== null && maxDisplay !== null) {
+            const minStr = minDisplay % 1 === 0 ? minDisplay.toString() : minDisplay.toFixed(2);
+            const maxStr = maxDisplay % 1 === 0 ? maxDisplay.toString() : maxDisplay.toFixed(2);
+            return `${minStr} – ${maxStr} ${currency}`;
+        }
+        if (minDisplay !== null) {
+            const minStr = minDisplay % 1 === 0 ? minDisplay.toString() : minDisplay.toFixed(2);
+            return `Min: ${minStr} ${currency}`;
+        }
+        if (maxDisplay !== null) {
+            const maxStr = maxDisplay % 1 === 0 ? maxDisplay.toString() : maxDisplay.toFixed(2);
+            return `Max: ${maxStr} ${currency}`;
+        }
+        return null;
+    };
+    const hint = formatHint();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-variable-pricing mb-6", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "variable-pricing-amount", className: "mb-3 block text-lg font-semibold text-gray-900 dark:text-gray-100", children: config.label || "Enter amount" }), presetAmounts.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: presetAmounts.map(preset => ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => handlePresetClick(preset.value), className: (0, cn_1.cn)("rounded-full border px-4 py-2 text-sm font-medium transition-colors", displayValue === preset.value
+                        ? "border-transparent text-white"
+                        : "border-gray-200 text-gray-700 hover:bg-gray-50 dark:border-neutral-600 dark:text-gray-300 dark:hover:bg-neutral-800"), style: displayValue === preset.value ? { backgroundColor: themeColor || "hsl(var(--as-brand))" } : undefined, children: [preset.label, " ", currency] }, preset.value))) })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { id: "variable-pricing-amount", type: "text", inputMode: "decimal", value: displayValue, onChange: e => {
+                            // Normalize comma decimal separators for locale compatibility
+                            const normalized = e.target.value.replace(",", ".");
+                            handleChange(normalized);
+                        }, className: "w-full rounded-xl border border-gray-200 bg-gray-50 px-4 py-3.5 pr-16 text-lg font-semibold text-gray-900 placeholder:text-gray-300 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-neutral-600 dark:bg-neutral-800 dark:text-gray-100 dark:placeholder:text-neutral-600 dark:focus:border-blue-400", placeholder: "0.00" }), (0, jsx_runtime_1.jsx)("span", { className: "absolute right-4 top-1/2 -translate-y-1/2 text-sm font-medium text-gray-400 dark:text-gray-500", children: currency })] }), hint && (0, jsx_runtime_1.jsx)("p", { className: "mt-1.5 text-xs text-gray-500 dark:text-gray-400", children: hint }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: error && ((0, jsx_runtime_1.jsx)(react_1.motion.p, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.15, ease: "easeOut" }, className: "mt-1.5 text-sm text-red-500", children: error }, "variable-price-error")) })] }));
+}

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

@@ -1,5 +1,5 @@
 export { AnySpendCheckout } from "./checkout/AnySpendCheckout";
-export type { AnySpendCheckoutProps, CheckoutItem, CheckoutSummaryLine, AnySpendCheckoutClasses, CheckoutFormSchema, CheckoutFormComponentProps, ShippingOption, DiscountResult, AddressData, } from "./checkout/AnySpendCheckout";
+export type { AnySpendCheckoutProps, CheckoutItem, CheckoutSummaryLine, AnySpendCheckoutClasses, CheckoutFormSchema, CheckoutFormComponentProps, ShippingOption, DiscountResult, AddressData, VariablePricingConfig, } from "./checkout/AnySpendCheckout";
 export { AnySpendCheckoutTrigger } from "./checkout/AnySpendCheckoutTrigger";
 export type { AnySpendCheckoutTriggerProps } from "./checkout/AnySpendCheckoutTrigger";
 export type { PaymentMethod } from "./checkout/CheckoutPaymentPanel";

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

@@ -1,10 +1,12 @@
 import { type ReactNode } from "react";
-import { type PaymentMethod } from "./CheckoutPaymentPanel";
-export type { AnySpendCheckoutClasses } from "../types/classes";
+import type { AddressData, CheckoutFormComponentProps, CheckoutFormSchema, DiscountResult, ShippingOption } from "../../../types/forms";
 import type { AnySpendCheckoutClasses } from "../types/classes";
 import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "../types/customization";
-import type { CheckoutFormSchema, CheckoutFormComponentProps, ShippingOption, DiscountResult, AddressData } from "../../../types/forms";
-export type { CheckoutFormSchema, CheckoutFormComponentProps, ShippingOption, DiscountResult, AddressData };
+import { type PaymentMethod } from "./CheckoutPaymentPanel";
+import { type VariablePricingConfig } from "./VariablePricingInput";
+export type { AnySpendCheckoutClasses } from "../types/classes";
+export type { VariablePricingConfig } from "./VariablePricingInput";
+export type { AddressData, CheckoutFormComponentProps, CheckoutFormSchema, DiscountResult, ShippingOption };
 export interface CheckoutItem {
     id?: string;
     name: string;
@@ -33,7 +35,7 @@ export interface AnySpendCheckoutProps {
     destinationTokenAddress: string;
     /** The destination chain ID */
     destinationTokenChainId: number;
-    /** Line items */
+    /** Line items. When `variablePricing.enabled` is true, pass a single placeholder item (e.g. amount "0") — the user-entered amount overrides the total. */
     items: CheckoutItem[];
     /** Override computed total */
     totalAmount?: string;
@@ -113,7 +115,9 @@ export interface AnySpendCheckoutProps {
     onDiscountApplied?: (result: DiscountResult) => void;
     /** Async function to validate a discount code. Returns DiscountResult. */
     validateDiscount?: (code: string) => Promise<DiscountResult>;
+    /** Variable pricing / name your price config. When enabled, user enters amount before payment. */
+    variablePricing?: VariablePricingConfig;
     /** When true, fees are added on top of the amount (payer pays more, receiver gets exact amount) */
     feeOnTop?: boolean;
 }
-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, 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, }: AnySpendCheckoutProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,16 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useTokenData } from "../../../../global-account/react/index.js";
 import { USDC_BASE } from "../../../../anyspend/constants/index.js";
+import { useTokenData } from "../../../../global-account/react/index.js";
 import { formatUnits, safeBigInt } from "../../../../shared/utils/number.js";
 import { useCallback, useMemo, useState } from "react";
 import { useAnyspendQuote } from "../../hooks/useAnyspendQuote.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper.js";
+import { AnySpendCustomizationProvider } from "../context/AnySpendCustomizationContext.js";
 import { CheckoutCartPanel } from "./CheckoutCartPanel.js";
 import { CheckoutFormPanel } from "./CheckoutFormPanel.js";
 import { CheckoutLayout } from "./CheckoutLayout.js";
 import { CheckoutPaymentPanel } from "./CheckoutPaymentPanel.js";
-import { AnySpendCustomizationProvider } from "../context/AnySpendCustomizationContext.js";
+import { VariablePricingInput } from "./VariablePricingInput.js";
 const emptyAddress = { street: "", city: "", state: "", zip: "", country: "" };
 export function AnySpendCheckout({ mode = "page", recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText = "Pay", checkoutSessionId, onSuccess, onError, returnUrl, returnLabel, classes, footer, defaultPaymentMethod, senderAddress, slots, content, theme, showPoints, showOrderId, shipping: shippingProp, tax, discount: discountProp, summaryLines, 
 // New form props
@@ -18,7 +19,13 @@ formSchema, formComponent, onFormSubmit,
 // New shipping props
 shippingOptions, collectShippingAddress, onShippingChange: onShippingChangeProp, 
 // New discount props
-enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount, feeOnTop, }) {
+enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount, 
+// Variable pricing
+variablePricing, feeOnTop, }) {
+    // ===== Variable pricing state =====
+    const [variablePricingAmount, setVariablePricingAmount] = useState("0");
+    const isVariablePricingActive = variablePricing?.enabled === true;
+    const isVariablePricingValid = isVariablePricingActive ? variablePricingAmount !== "0" : true;
     // ===== Form state =====
     const [formData, setFormData] = useState({});
     const [selectedShipping, setSelectedShipping] = useState(null);
@@ -63,7 +70,25 @@ enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount,
         return undefined;
     }, [appliedDiscount, discountProp]);
     // Compute total from items + adjustments (including dynamic shipping/discount)
+    // Variable pricing overrides the total when active
     const computedTotal = useMemo(() => {
+        if (isVariablePricingActive && variablePricingAmount !== "0") {
+            let total = safeBigInt(variablePricingAmount);
+            if (effectiveShipping?.amount)
+                total += safeBigInt(effectiveShipping.amount);
+            const taxAmt = typeof tax === "string" ? tax : tax?.amount;
+            if (taxAmt)
+                total += safeBigInt(taxAmt);
+            if (effectiveDiscount?.amount)
+                total -= safeBigInt(effectiveDiscount.amount);
+            if (summaryLines) {
+                for (const line of summaryLines)
+                    total += safeBigInt(line.amount);
+            }
+            if (total < BigInt(0))
+                total = BigInt(0);
+            return total.toString();
+        }
         if (totalAmountOverride)
             return totalAmountOverride;
         let total = BigInt(0);
@@ -84,7 +109,16 @@ enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount,
         if (total < BigInt(0))
             total = BigInt(0);
         return total.toString();
-    }, [items, totalAmountOverride, effectiveShipping, tax, effectiveDiscount, summaryLines]);
+    }, [
+        items,
+        totalAmountOverride,
+        effectiveShipping,
+        tax,
+        effectiveDiscount,
+        summaryLines,
+        isVariablePricingActive,
+        variablePricingAmount,
+    ]);
     // Get destination token metadata
     const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
     const tokenSymbol = tokenData?.symbol || "";
@@ -136,14 +170,27 @@ enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount,
             meta.customerName = formData.name;
         if (checkoutSessionId)
             meta.checkoutSessionId = checkoutSessionId;
+        if (isVariablePricingActive && variablePricingAmount !== "0") {
+            meta.variablePricingAmount = variablePricingAmount;
+        }
         return Object.keys(meta).length > 0 ? meta : undefined;
-    }, [formData, selectedShipping, shippingAddress, appliedDiscount, checkoutSessionId]);
-    // Check if required form fields are filled
+    }, [
+        formData,
+        selectedShipping,
+        shippingAddress,
+        appliedDiscount,
+        checkoutSessionId,
+        isVariablePricingActive,
+        variablePricingAmount,
+    ]);
+    // Check if required form fields are filled and variable pricing is valid
     const isFormValid = useMemo(() => {
+        if (!isVariablePricingValid)
+            return false;
         if (!formSchema)
             return true;
         return formSchema.fields.filter(f => f.required).every(f => formData[f.id] != null && formData[f.id] !== "");
-    }, [formSchema, formData]);
+    }, [formSchema, formData, isVariablePricingValid]);
     // Check if we have a form panel to show
     const hasFormContent = (formSchema && formSchema.fields.length > 0) ||
         formComponent ||
@@ -151,5 +198,5 @@ enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount,
         (shippingOptions && shippingOptions.length > 0) ||
         collectShippingAddress ||
         enableDiscountCode;
-    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: _jsx(AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: _jsx(CheckoutLayout, { mode: mode, paymentPanel: _jsxs(_Fragment, { children: [hasFormContent && (_jsxs("div", { className: "mb-6", children: [_jsx(CheckoutFormPanel, { formSchema: formSchema, formComponent: formComponent, shippingOptions: shippingOptions, collectShippingAddress: collectShippingAddress, enableDiscountCode: enableDiscountCode, validateDiscount: validateDiscount, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, classes: classes, formData: formData, onFormDataChange: handleFormDataChange, selectedShipping: selectedShipping, onShippingChange: handleShippingChange, appliedDiscount: appliedDiscount, onDiscountApplied: handleDiscountApplied, onDiscountRemoved: handleDiscountRemoved, shippingAddress: shippingAddress, onShippingAddressChange: setShippingAddress, checkoutFormSlot: slots?.checkoutForm }), _jsx("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), _jsx(CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress, showPoints: showPoints, showOrderId: showOrderId, callbackMetadata: checkoutFormMetadata, isFormValid: isFormValid, feeOnTop: feeOnTop })] }), cartPanel: _jsx(CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes, footer: footer, shipping: effectiveShipping, tax: typeof tax === "string" ? { amount: tax } : tax, discount: effectiveDiscount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), classes: classes }) }) }));
+    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: _jsx(AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: _jsx(CheckoutLayout, { mode: mode, paymentPanel: _jsxs(_Fragment, { children: [isVariablePricingActive && tokenData && variablePricing && (_jsx(VariablePricingInput, { config: variablePricing, tokenDecimals: tokenDecimals, tokenSymbol: tokenSymbol, themeColor: themeColor, onChange: setVariablePricingAmount })), hasFormContent && (_jsxs("div", { className: "mb-6", children: [_jsx(CheckoutFormPanel, { formSchema: formSchema, formComponent: formComponent, shippingOptions: shippingOptions, collectShippingAddress: collectShippingAddress, enableDiscountCode: enableDiscountCode, validateDiscount: validateDiscount, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, classes: classes, formData: formData, onFormDataChange: handleFormDataChange, selectedShipping: selectedShipping, onShippingChange: handleShippingChange, appliedDiscount: appliedDiscount, onDiscountApplied: handleDiscountApplied, onDiscountRemoved: handleDiscountRemoved, shippingAddress: shippingAddress, onShippingAddressChange: setShippingAddress, checkoutFormSlot: slots?.checkoutForm }), _jsx("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), _jsx(CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress, showPoints: showPoints, showOrderId: showOrderId, callbackMetadata: checkoutFormMetadata, isFormValid: isFormValid, feeOnTop: feeOnTop })] }), 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/VariablePricingInput.d.ts

@@ -0,0 +1,17 @@
+export interface VariablePricingConfig {
+    enabled: boolean;
+    minAmount?: string;
+    maxAmount?: string;
+    suggestedAmount?: string;
+    label?: string;
+    currency?: string;
+}
+interface VariablePricingInputProps {
+    config: VariablePricingConfig;
+    tokenDecimals: number;
+    tokenSymbol: string;
+    themeColor?: string;
+    onChange: (amountWei: string) => void;
+}
+export declare function VariablePricingInput({ config, tokenDecimals, tokenSymbol, themeColor, onChange, }: VariablePricingInputProps): import("react/jsx-runtime").JSX.Element;
+export {};