@b3dotfun/sdk 0.1.69-alpha.20 → 0.1.69-alpha.21

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

@@ -122,10 +122,11 @@ variablePricing, feeOnTop, kycEnabled = false, callbackMetadata: callbackMetadat
         isVariablePricingActive,
         variablePricingAmount,
     ]);
-    // Get destination token metadata
-    const { data: tokenData } = (0, react_1.useTokenData)(destinationTokenChainId, destinationTokenAddress);
-    const tokenSymbol = tokenData?.symbol || "";
-    const tokenDecimals = tokenData?.decimals || 18;
+    // Get destination token metadata. While loading, skip price-dependent UI
+    // since the 18-decimal fallback is wrong for non-18 tokens (e.g. USDC).
+    const { data: tokenData, isLoading: isTokenDataLoading } = (0, react_1.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 = (0, react_2.useMemo)(() => {
         return [
@@ -209,5 +210,5 @@ variablePricing, feeOnTop, kycEnabled = false, callbackMetadata: callbackMetadat
                 successTitle: "Payment Successful",
                 successDescription: "Your payment has been processed successfully.",
                 ...content,
-            }, theme: theme, children: (0, jsx_runtime_1.jsx)(CheckoutLayout_1.CheckoutLayout, { mode: mode, paymentPanel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isVariablePricingActive && tokenData && variablePricing && ((0, jsx_runtime_1.jsx)(VariablePricingInput_1.VariablePricingInput, { config: variablePricing, tokenDecimals: tokenDecimals, tokenSymbol: tokenSymbol, themeColor: themeColor, onChange: setVariablePricingAmount })), hasFormContent && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsx)(CheckoutFormPanel_1.CheckoutFormPanel, { formSchema: formSchema, formComponent: formComponent, shippingOptions: shippingOptions, collectShippingAddress: collectShippingAddress, enableDiscountCode: enableDiscountCode, validateDiscount: validateDiscount, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, classes: classes, formData: formData, onFormDataChange: handleFormDataChange, selectedShipping: selectedShipping, onShippingChange: handleShippingChange, appliedDiscount: appliedDiscount, onDiscountApplied: handleDiscountApplied, onDiscountRemoved: handleDiscountRemoved, shippingAddress: shippingAddress, onShippingAddressChange: setShippingAddress, checkoutFormSlot: slots?.checkoutForm }), (0, jsx_runtime_1.jsx)("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), (0, jsx_runtime_1.jsx)(CheckoutPaymentPanel_1.CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress, showPoints: showPoints, showOrderId: showOrderId, callbackMetadata: checkoutFormMetadata, isFormValid: isFormValid, feeOnTop: feeOnTop, kycEnabled: kycEnabled })] }), cartPanel: (0, jsx_runtime_1.jsx)(CheckoutCartPanel_1.CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes, footer: footer, shipping: effectiveShipping, tax: typeof tax === "string" ? { amount: tax } : tax, discount: effectiveDiscount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), classes: classes }) }) }));
+            }, 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, pricesLoading: isTokenDataLoading, classes: classes, formData: formData, onFormDataChange: handleFormDataChange, selectedShipping: selectedShipping, onShippingChange: handleShippingChange, appliedDiscount: appliedDiscount, onDiscountApplied: handleDiscountApplied, onDiscountRemoved: handleDiscountRemoved, shippingAddress: shippingAddress, onShippingAddressChange: setShippingAddress, checkoutFormSlot: slots?.checkoutForm }), (0, jsx_runtime_1.jsx)("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), (0, jsx_runtime_1.jsx)(CheckoutPaymentPanel_1.CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress, showPoints: showPoints, showOrderId: showOrderId, callbackMetadata: checkoutFormMetadata, isFormValid: isFormValid, feeOnTop: feeOnTop, kycEnabled: kycEnabled })] }), cartPanel: (0, jsx_runtime_1.jsx)(CheckoutCartPanel_1.CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, pricesLoading: isTokenDataLoading, 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/CartItemRow.d.ts

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

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

@@ -1,8 +1,8 @@
-import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
-import type { CheckoutSummaryLine } from "./AnySpendCheckout";
+import { type ReactNode } from "react";
+import type { AnySpendCheckoutClasses, CheckoutSummaryLine } from "./AnySpendCheckout";
 interface CartSummaryProps {
     /** Formatted total (final amount after all adjustments) */
-    total: string;
+    total: ReactNode;
     tokenSymbol?: string;
     classes?: AnySpendCheckoutClasses;
     /** Formatted subtotal (sum of items only — shown when adjustments exist) */
@@ -25,6 +25,8 @@ interface CartSummaryProps {
     summaryLines?: CheckoutSummaryLine[];
     /** Formatted USD equivalent (e.g. "$5.56") — shown for non-stablecoin tokens */
     usdEquivalent?: string | null;
+    /** When true, hide adjustment rows and USD equivalent (caller passes a skeleton as `total`). */
+    pricesLoading?: boolean;
 }
-export declare function CartSummary({ total, tokenSymbol, classes, subtotal, tokenDecimals, shipping, tax, discount, summaryLines, usdEquivalent, }: CartSummaryProps): import("react/jsx-runtime").JSX.Element;
+export declare function CartSummary({ total, tokenSymbol, classes, subtotal, tokenDecimals, shipping, tax, discount, summaryLines, usdEquivalent, pricesLoading, }: CartSummaryProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,15 +6,17 @@ 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("react");
-function CartSummary({ total, tokenSymbol, classes, subtotal, tokenDecimals = 18, shipping, tax, discount, summaryLines, usdEquivalent, }) {
-    const hasAdjustments = !!shipping?.amount || !!tax?.amount || !!discount?.amount || (summaryLines && summaryLines.length > 0);
-    const formattedShipping = (0, react_1.useMemo)(() => (shipping?.amount ? (0, number_1.formatTokenAmount)((0, number_1.safeBigInt)(shipping.amount), tokenDecimals) : null), [shipping?.amount, tokenDecimals]);
-    const formattedTax = (0, react_1.useMemo)(() => (tax?.amount ? (0, number_1.formatTokenAmount)((0, number_1.safeBigInt)(tax.amount), tokenDecimals) : null), [tax?.amount, tokenDecimals]);
-    const formattedDiscount = (0, react_1.useMemo)(() => (discount?.amount ? (0, number_1.formatTokenAmount)((0, number_1.safeBigInt)(discount.amount), tokenDecimals) : null), [discount?.amount, tokenDecimals]);
-    const formattedSummaryLines = (0, react_1.useMemo)(() => summaryLines?.map(line => ({
-        ...line,
-        formattedAmount: (0, number_1.formatTokenAmount)((0, number_1.safeBigInt)(line.amount), tokenDecimals),
-        isNegative: (0, number_1.safeBigInt)(line.amount) < BigInt(0),
-    })), [summaryLines, tokenDecimals]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("border-t border-gray-200 pt-3 dark:border-neutral-700", classes?.cartSummary), children: [hasAdjustments && subtotal && ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between py-1", classes?.cartSubtotal), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Subtotal" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [subtotal, " ", tokenSymbol] })] })), formattedShipping && ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [(0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: shipping?.label || "Shipping" }), (0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [formattedShipping, " ", tokenSymbol] })] })), formattedTax && ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [(0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: [tax?.label || "Tax", tax?.rate && (0, jsx_runtime_1.jsxs)("span", { className: "ml-1 text-xs text-gray-400 dark:text-gray-500", children: ["(", tax.rate, ")"] })] }), (0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [formattedTax, " ", tokenSymbol] })] })), formattedDiscount && ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between py-1", classes?.cartDiscount), children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [discount?.label || "Discount", discount?.code && ((0, jsx_runtime_1.jsx)("span", { className: "ml-1 rounded bg-green-50 px-1.5 py-0.5 text-xs font-medium text-green-600 dark:bg-green-900/20 dark:text-green-400", children: discount.code }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm font-medium text-green-600 dark:text-green-400", children: ["-", formattedDiscount, " ", tokenSymbol] })] })), formattedSummaryLines?.map(line => ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [(0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: [line.label, line.description && ((0, jsx_runtime_1.jsxs)("span", { className: "ml-1 text-xs text-gray-400 dark:text-gray-500", children: ["(", line.description, ")"] }))] }), (0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-sm", line.isNegative ? "font-medium text-green-600 dark:text-green-400" : "text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [line.formattedAmount, " ", tokenSymbol] })] }, line.label))), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-col", hasAdjustments && "mt-1 border-t border-gray-100 pt-2 dark:border-neutral-800"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Total" }), (0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-base font-semibold text-gray-900 dark:text-gray-100", classes?.cartTotal), children: [total, " ", tokenSymbol] })] }), usdEquivalent && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-end", children: (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: ["~", usdEquivalent, " USD"] }) }))] })] }));
+function CartSummary({ total, tokenSymbol, classes, subtotal, tokenDecimals = 18, shipping, tax, discount, summaryLines, usdEquivalent, pricesLoading = false, }) {
+    const formattedShipping = (0, react_1.useMemo)(() => (!pricesLoading && shipping?.amount ? (0, number_1.formatTokenAmount)((0, number_1.safeBigInt)(shipping.amount), tokenDecimals) : null), [pricesLoading, shipping?.amount, tokenDecimals]);
+    const formattedTax = (0, react_1.useMemo)(() => (!pricesLoading && tax?.amount ? (0, number_1.formatTokenAmount)((0, number_1.safeBigInt)(tax.amount), tokenDecimals) : null), [pricesLoading, tax?.amount, tokenDecimals]);
+    const formattedDiscount = (0, react_1.useMemo)(() => (!pricesLoading && discount?.amount ? (0, number_1.formatTokenAmount)((0, number_1.safeBigInt)(discount.amount), tokenDecimals) : null), [pricesLoading, discount?.amount, tokenDecimals]);
+    const formattedSummaryLines = (0, react_1.useMemo)(() => pricesLoading
+        ? undefined
+        : summaryLines?.map(line => ({
+            ...line,
+            formattedAmount: (0, number_1.formatTokenAmount)((0, number_1.safeBigInt)(line.amount), tokenDecimals),
+            isNegative: (0, number_1.safeBigInt)(line.amount) < BigInt(0),
+        })), [pricesLoading, summaryLines, tokenDecimals]);
+    const hasAdjustments = !!formattedShipping || !!formattedTax || !!formattedDiscount || !!formattedSummaryLines?.length;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("border-t border-gray-200 pt-3 dark:border-neutral-700", classes?.cartSummary), children: [hasAdjustments && subtotal && ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between py-1", classes?.cartSubtotal), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Subtotal" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [subtotal, " ", tokenSymbol] })] })), formattedShipping && ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [(0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: shipping?.label || "Shipping" }), (0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [formattedShipping, " ", tokenSymbol] })] })), formattedTax && ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [(0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: [tax?.label || "Tax", tax?.rate && (0, jsx_runtime_1.jsxs)("span", { className: "ml-1 text-xs text-gray-400 dark:text-gray-500", children: ["(", tax.rate, ")"] })] }), (0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [formattedTax, " ", tokenSymbol] })] })), formattedDiscount && ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between py-1", classes?.cartDiscount), children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [discount?.label || "Discount", discount?.code && ((0, jsx_runtime_1.jsx)("span", { className: "ml-1 rounded bg-green-50 px-1.5 py-0.5 text-xs font-medium text-green-600 dark:bg-green-900/20 dark:text-green-400", children: discount.code }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm font-medium text-green-600 dark:text-green-400", children: ["-", formattedDiscount, " ", tokenSymbol] })] })), formattedSummaryLines?.map(line => ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [(0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: [line.label, line.description && ((0, jsx_runtime_1.jsxs)("span", { className: "ml-1 text-xs text-gray-400 dark:text-gray-500", children: ["(", line.description, ")"] }))] }), (0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-sm", line.isNegative ? "font-medium text-green-600 dark:text-green-400" : "text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [line.formattedAmount, " ", tokenSymbol] })] }, line.label))), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-col", hasAdjustments && "mt-1 border-t border-gray-100 pt-2 dark:border-neutral-800"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Total" }), (0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-base font-semibold text-gray-900 dark:text-gray-100", classes?.cartTotal), children: [total, " ", tokenSymbol] })] }), !pricesLoading && usdEquivalent && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-end", children: (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: ["~", usdEquivalent, " USD"] }) }))] })] }));
 }

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

@@ -5,6 +5,8 @@ interface CheckoutCartPanelProps {
     totalAmount: string;
     tokenSymbol?: string;
     tokenDecimals?: number;
+    /** True while token decimals/symbol are still loading — prevents rendering mis-decimalized prices. */
+    pricesLoading?: boolean;
     organizationName?: string;
     organizationLogo?: string;
     classes?: AnySpendCheckoutClasses;
@@ -28,5 +30,5 @@ interface CheckoutCartPanelProps {
     /** Formatted USD equivalent (e.g. "$5.56") — shown for non-stablecoin tokens */
     usdEquivalent?: string | null;
 }
-export declare function CheckoutCartPanel({ items, totalAmount, tokenSymbol, tokenDecimals, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }: CheckoutCartPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckoutCartPanel({ items, totalAmount, tokenSymbol, tokenDecimals, pricesLoading, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }: CheckoutCartPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -9,7 +9,8 @@ const react_1 = require("react");
 const CartItemRow_1 = require("./CartItemRow");
 const CartSummary_1 = require("./CartSummary");
 const PoweredByBranding_1 = require("./PoweredByBranding");
-function CheckoutCartPanel({ items, totalAmount, tokenSymbol = "", tokenDecimals = 18, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }) {
+const PriceSkeleton_1 = require("./PriceSkeleton");
+function CheckoutCartPanel({ items, totalAmount, tokenSymbol = "", tokenDecimals = 18, pricesLoading = false, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }) {
     const formattedTotal = (0, react_1.useMemo)(() => (0, number_1.formatTokenAmount)((0, number_1.safeBigInt)(totalAmount), tokenDecimals), [totalAmount, tokenDecimals]);
     // Compute subtotal from items only (before adjustments)
     const formattedSubtotal = (0, react_1.useMemo)(() => {
@@ -19,9 +20,9 @@ function CheckoutCartPanel({ items, totalAmount, tokenSymbol = "", tokenDecimals
         }
         return (0, number_1.formatTokenAmount)(subtotal, tokenDecimals);
     }, [items, tokenDecimals]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-cart-panel flex flex-col", classes?.cartPanel), children: [(0, jsx_runtime_1.jsx)("h2", { className: (0, cn_1.cn)("anyspend-cart-title mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.cartTitle), children: "Order Summary" }), (0, jsx_runtime_1.jsx)("div", { className: "anyspend-cart-items divide-y divide-gray-100 dark:divide-gray-800", children: items.map((item, index) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-cart-panel flex flex-col", classes?.cartPanel), "aria-busy": pricesLoading || undefined, children: [(0, jsx_runtime_1.jsx)("h2", { className: (0, cn_1.cn)("anyspend-cart-title mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.cartTitle), children: "Order Summary" }), (0, jsx_runtime_1.jsx)("div", { className: "anyspend-cart-items divide-y divide-gray-100 dark:divide-gray-800", children: items.map((item, index) => {
                     const itemTotal = (0, number_1.safeBigInt)(item.amount) * BigInt(item.quantity);
-                    const formattedPrice = `${(0, number_1.formatTokenAmount)(itemTotal, tokenDecimals)} ${tokenSymbol}`;
+                    const formattedPrice = pricesLoading ? ((0, jsx_runtime_1.jsx)(PriceSkeleton_1.PriceSkeleton, {})) : (`${(0, number_1.formatTokenAmount)(itemTotal, tokenDecimals)} ${tokenSymbol}`);
                     return (0, jsx_runtime_1.jsx)(CartItemRow_1.CartItemRow, { item: item, formattedPrice: formattedPrice, classes: classes }, item.id || index);
-                }) }), (0, jsx_runtime_1.jsx)(CartSummary_1.CartSummary, { total: formattedTotal, tokenSymbol: tokenSymbol, classes: classes, subtotal: formattedSubtotal, tokenDecimals: tokenDecimals, shipping: shipping, tax: tax, discount: discount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), footer === undefined ? ((0, jsx_runtime_1.jsx)(PoweredByBranding_1.PoweredByBranding, { organizationName: organizationName, organizationLogo: organizationLogo, classes: classes })) : (footer)] }));
+                }) }), (0, jsx_runtime_1.jsx)(CartSummary_1.CartSummary, { total: pricesLoading ? (0, jsx_runtime_1.jsx)(PriceSkeleton_1.PriceSkeleton, { className: "w-20" }) : formattedTotal, tokenSymbol: tokenSymbol, classes: classes, subtotal: formattedSubtotal, tokenDecimals: tokenDecimals, shipping: shipping, tax: tax, discount: discount, summaryLines: summaryLines, usdEquivalent: usdEquivalent, pricesLoading: pricesLoading }), footer === undefined ? ((0, jsx_runtime_1.jsx)(PoweredByBranding_1.PoweredByBranding, { organizationName: organizationName, organizationLogo: organizationLogo, classes: classes })) : (footer)] }));
 }

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

@@ -16,6 +16,8 @@ interface CheckoutFormPanelProps {
     /** Token info for display */
     tokenSymbol?: string;
     tokenDecimals?: number;
+    /** True while token decimals/symbol are still loading — prevents rendering mis-decimalized prices. */
+    pricesLoading?: boolean;
     /** CSS class overrides */
     classes?: AnySpendCheckoutClasses;
     /** Current form data (lifted state) */
@@ -35,5 +37,5 @@ interface CheckoutFormPanelProps {
     /** Slot overrides */
     checkoutFormSlot?: (props: CheckoutFormComponentProps) => React.ReactNode;
 }
-export declare function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingOptions, collectShippingAddress, enableDiscountCode, validateDiscount, tokenSymbol, tokenDecimals, classes, formData, onFormDataChange, selectedShipping, onShippingChange, appliedDiscount, onDiscountApplied, onDiscountRemoved, shippingAddress, onShippingAddressChange, checkoutFormSlot, }: CheckoutFormPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingOptions, collectShippingAddress, enableDiscountCode, validateDiscount, tokenSymbol, tokenDecimals, pricesLoading, classes, formData, onFormDataChange, selectedShipping, onShippingChange, appliedDiscount, onDiscountApplied, onDiscountRemoved, shippingAddress, onShippingAddressChange, checkoutFormSlot, }: CheckoutFormPanelProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -10,7 +10,7 @@ const AddressForm_1 = require("./AddressForm");
 const ShippingSelector_1 = require("./ShippingSelector");
 const DiscountCodeInput_1 = require("./DiscountCodeInput");
 const emptyAddress = { street: "", city: "", state: "", zip: "", country: "" };
-function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingOptions, collectShippingAddress, enableDiscountCode, validateDiscount, tokenSymbol, tokenDecimals, classes, formData, onFormDataChange, selectedShipping, onShippingChange, appliedDiscount, onDiscountApplied, onDiscountRemoved, shippingAddress, onShippingAddressChange, checkoutFormSlot, }) {
+function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingOptions, collectShippingAddress, enableDiscountCode, validateDiscount, tokenSymbol, tokenDecimals, pricesLoading = false, classes, formData, onFormDataChange, selectedShipping, onShippingChange, appliedDiscount, onDiscountApplied, onDiscountRemoved, shippingAddress, onShippingAddressChange, checkoutFormSlot, }) {
     const [errors, setErrors] = (0, react_1.useState)({});
     const hasFormFields = formSchema && formSchema.fields.length > 0;
     const hasShipping = shippingOptions && shippingOptions.length > 0;
@@ -56,7 +56,7 @@ function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingO
     if (!hasAnyContent)
         return null;
     // Shared shipping + discount section
-    const shippingAndDiscount = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasShipping && shippingOptions && ((0, jsx_runtime_1.jsx)(ShippingSelector_1.ShippingSelector, { options: shippingOptions, selectedId: selectedShipping?.id || null, onSelect: onShippingChange, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals })), enableDiscountCode && validateDiscount && ((0, jsx_runtime_1.jsx)(DiscountCodeInput_1.DiscountCodeInput, { onApply: handleDiscountApply, appliedDiscount: appliedDiscount, onRemove: onDiscountRemoved, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals }))] }));
+    const shippingAndDiscount = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasShipping && shippingOptions && ((0, jsx_runtime_1.jsx)(ShippingSelector_1.ShippingSelector, { options: shippingOptions, selectedId: selectedShipping?.id || null, onSelect: onShippingChange, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, pricesLoading: pricesLoading })), enableDiscountCode && validateDiscount && ((0, jsx_runtime_1.jsx)(DiscountCodeInput_1.DiscountCodeInput, { onApply: handleDiscountApply, appliedDiscount: appliedDiscount, onRemove: onDiscountRemoved, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, pricesLoading: pricesLoading }))] }));
     // Render custom form slot if provided
     if (checkoutFormSlot) {
         return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-form-panel space-y-4", classes?.formPanel), children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-form-slot", children: checkoutFormSlot({

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

@@ -6,7 +6,9 @@ interface DiscountCodeInputProps {
     loading?: boolean;
     tokenSymbol?: string;
     tokenDecimals?: number;
+    /** True while token decimals/symbol are still loading — renders applied amount as skeleton. */
+    pricesLoading?: boolean;
     className?: string;
 }
-export declare function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading, tokenSymbol, tokenDecimals, className, }: DiscountCodeInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading, tokenSymbol, tokenDecimals, pricesLoading, className, }: DiscountCodeInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -7,13 +7,14 @@ const cn_1 = require("../../../../shared/utils/cn");
 const number_1 = require("../../../../shared/utils/number");
 const lucide_react_1 = require("lucide-react");
 const react_1 = require("react");
+const PriceSkeleton_1 = require("./PriceSkeleton");
 function formatAmount(amount, decimals, symbol) {
     const bi = (0, number_1.safeBigInt)(amount);
     if (bi === BigInt(0))
         return "Free";
     return `${(0, number_1.formatTokenAmount)(bi, decimals)} ${symbol}`;
 }
-function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading = false, tokenSymbol = "", tokenDecimals = 6, className, }) {
+function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading = false, tokenSymbol = "", tokenDecimals = 6, pricesLoading = false, className, }) {
     const [code, setCode] = (0, react_1.useState)("");
     const [error, setError] = (0, react_1.useState)(null);
     const [isValidating, setIsValidating] = (0, react_1.useState)(false);
@@ -44,11 +45,7 @@ function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading = false
     };
     // Show applied discount state
     if (appliedDiscount?.valid) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-discount anyspend-discount-applied space-y-2", className), children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-discount-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Discount" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-discount-badge flex items-center justify-between rounded-lg border border-green-200 bg-green-50 px-3 py-2 dark:border-green-800 dark:bg-green-900/20", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-4 w-4 text-green-600 dark:text-green-400" }), (0, jsx_runtime_1.jsx)("span", { className: "anyspend-discount-value text-sm font-medium text-green-700 dark:text-green-300", children: appliedDiscount.discount_type === "percentage"
-                                        ? `${appliedDiscount.discount_value}% off`
-                                        : appliedDiscount.discount_amount
-                                            ? `-${formatAmount(appliedDiscount.discount_amount, tokenDecimals, tokenSymbol)}`
-                                            : "Discount applied" })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleRemove, className: "anyspend-discount-remove rounded p-1 text-gray-400 hover:bg-gray-200 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-3.5 w-3.5" }) })] })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-discount anyspend-discount-applied space-y-2", className), children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-discount-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Discount" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-discount-badge flex items-center justify-between rounded-lg border border-green-200 bg-green-50 px-3 py-2 dark:border-green-800 dark:bg-green-900/20", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-4 w-4 text-green-600 dark:text-green-400" }), (0, jsx_runtime_1.jsx)("span", { className: "anyspend-discount-value text-sm font-medium text-green-700 dark:text-green-300", children: appliedDiscount.discount_type === "percentage" ? (`${appliedDiscount.discount_value}% off`) : appliedDiscount.discount_amount ? (pricesLoading ? ((0, jsx_runtime_1.jsx)(PriceSkeleton_1.PriceSkeleton, {})) : (`-${formatAmount(appliedDiscount.discount_amount, tokenDecimals, tokenSymbol)}`)) : ("Discount applied") })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleRemove, className: "anyspend-discount-remove rounded p-1 text-gray-400 hover:bg-gray-200 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-3.5 w-3.5" }) })] })] }));
     }
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-discount space-y-2", className), children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-discount-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Discount Code" }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-discount-input-row flex gap-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: code, onChange: e => {
                             setCode(e.target.value.toUpperCase());

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

@@ -0,0 +1,5 @@
+interface PriceSkeletonProps {
+    className?: string;
+}
+export declare function PriceSkeleton({ className }: PriceSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,9 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PriceSkeleton = PriceSkeleton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+function PriceSkeleton({ className }) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("animate-pulse-fade bg-b3-react-background inline-block h-4 w-16 rounded-md align-middle", className), "aria-hidden": "true" }));
+}

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

@@ -5,7 +5,9 @@ interface ShippingSelectorProps {
     onSelect: (option: ShippingOption) => void;
     tokenSymbol?: string;
     tokenDecimals?: number;
+    /** True while token decimals/symbol are still loading — renders price as skeleton. */
+    pricesLoading?: boolean;
     className?: string;
 }
-export declare function ShippingSelector({ options, selectedId, onSelect, tokenSymbol, tokenDecimals, className, }: ShippingSelectorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ShippingSelector({ options, selectedId, onSelect, tokenSymbol, tokenDecimals, pricesLoading, className, }: ShippingSelectorProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -5,16 +5,17 @@ exports.ShippingSelector = ShippingSelector;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const cn_1 = require("../../../../shared/utils/cn");
 const number_1 = require("../../../../shared/utils/number");
+const PriceSkeleton_1 = require("./PriceSkeleton");
 function formatAmount(amount, decimals, symbol) {
     const bi = (0, number_1.safeBigInt)(amount);
     if (bi === BigInt(0))
         return "Free";
     return `${(0, number_1.formatTokenAmount)(bi, decimals)} ${symbol}`;
 }
-function ShippingSelector({ options, selectedId, onSelect, tokenSymbol = "", tokenDecimals = 6, className, }) {
+function ShippingSelector({ options, selectedId, onSelect, tokenSymbol = "", tokenDecimals = 6, pricesLoading = false, className, }) {
     if (options.length === 0)
         return null;
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-shipping-selector space-y-2", className), children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-shipping-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Shipping" }), (0, jsx_runtime_1.jsx)("div", { className: "anyspend-shipping-options space-y-2", children: options.map(option => ((0, jsx_runtime_1.jsxs)("label", { className: (0, cn_1.cn)("anyspend-shipping-option flex cursor-pointer items-center justify-between rounded-lg border p-3 transition-colors", selectedId === option.id
                         ? "anyspend-shipping-option-selected border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-blue-900/20"
-                        : "border-gray-200 bg-white hover:border-gray-300 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:border-neutral-500"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", name: "shipping", checked: selectedId === option.id, onChange: () => onSelect(option), className: "h-4 w-4 border-gray-300 text-blue-500 focus:ring-blue-500" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-shipping-option-name text-sm font-medium text-gray-900 dark:text-gray-100", children: option.name }), (option.description || option.estimated_days) && ((0, jsx_runtime_1.jsx)("div", { className: "anyspend-shipping-option-detail text-xs text-gray-500 dark:text-gray-400", children: option.description || (option.estimated_days && `${option.estimated_days}`) }))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "anyspend-shipping-option-price text-sm font-medium text-gray-900 dark:text-gray-100", children: formatAmount(option.amount, tokenDecimals, tokenSymbol) })] }, option.id))) })] }));
+                        : "border-gray-200 bg-white hover:border-gray-300 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:border-neutral-500"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", name: "shipping", checked: selectedId === option.id, onChange: () => onSelect(option), className: "h-4 w-4 border-gray-300 text-blue-500 focus:ring-blue-500" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-shipping-option-name text-sm font-medium text-gray-900 dark:text-gray-100", children: option.name }), (option.description || option.estimated_days) && ((0, jsx_runtime_1.jsx)("div", { className: "anyspend-shipping-option-detail text-xs text-gray-500 dark:text-gray-400", children: option.description || (option.estimated_days && `${option.estimated_days}`) }))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "anyspend-shipping-option-price text-sm font-medium text-gray-900 dark:text-gray-100", children: pricesLoading ? (0, jsx_runtime_1.jsx)(PriceSkeleton_1.PriceSkeleton, {}) : formatAmount(option.amount, tokenDecimals, tokenSymbol) })] }, option.id))) })] }));
 }

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

@@ -119,10 +119,11 @@ variablePricing, feeOnTop, kycEnabled = false, callbackMetadata: callbackMetadat
         isVariablePricingActive,
         variablePricingAmount,
     ]);
-    // Get destination token metadata
-    const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
-    const tokenSymbol = tokenData?.symbol || "";
-    const tokenDecimals = tokenData?.decimals || 18;
+    // Get destination token metadata. While loading, skip price-dependent UI
+    // since the 18-decimal fallback is wrong for non-18 tokens (e.g. USDC).
+    const { data: tokenData, isLoading: isTokenDataLoading } = 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 [
@@ -206,5 +207,5 @@ variablePricing, feeOnTop, kycEnabled = false, callbackMetadata: callbackMetadat
                 successTitle: "Payment Successful",
                 successDescription: "Your payment has been processed successfully.",
                 ...content,
-            }, theme: theme, children: _jsx(CheckoutLayout, { mode: mode, paymentPanel: _jsxs(_Fragment, { children: [isVariablePricingActive && tokenData && variablePricing && (_jsx(VariablePricingInput, { config: variablePricing, tokenDecimals: tokenDecimals, tokenSymbol: tokenSymbol, themeColor: themeColor, onChange: setVariablePricingAmount })), hasFormContent && (_jsxs("div", { className: "mb-6", children: [_jsx(CheckoutFormPanel, { formSchema: formSchema, formComponent: formComponent, shippingOptions: shippingOptions, collectShippingAddress: collectShippingAddress, enableDiscountCode: enableDiscountCode, validateDiscount: validateDiscount, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, classes: classes, formData: formData, onFormDataChange: handleFormDataChange, selectedShipping: selectedShipping, onShippingChange: handleShippingChange, appliedDiscount: appliedDiscount, onDiscountApplied: handleDiscountApplied, onDiscountRemoved: handleDiscountRemoved, shippingAddress: shippingAddress, onShippingAddressChange: setShippingAddress, checkoutFormSlot: slots?.checkoutForm }), _jsx("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), _jsx(CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress, showPoints: showPoints, showOrderId: showOrderId, callbackMetadata: checkoutFormMetadata, isFormValid: isFormValid, feeOnTop: feeOnTop, kycEnabled: kycEnabled })] }), cartPanel: _jsx(CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes, footer: footer, shipping: effectiveShipping, tax: typeof tax === "string" ? { amount: tax } : tax, discount: effectiveDiscount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), classes: classes }) }) }));
+            }, 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, pricesLoading: isTokenDataLoading, classes: classes, formData: formData, onFormDataChange: handleFormDataChange, selectedShipping: selectedShipping, onShippingChange: handleShippingChange, appliedDiscount: appliedDiscount, onDiscountApplied: handleDiscountApplied, onDiscountRemoved: handleDiscountRemoved, shippingAddress: shippingAddress, onShippingAddressChange: setShippingAddress, checkoutFormSlot: slots?.checkoutForm }), _jsx("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), _jsx(CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress, showPoints: showPoints, showOrderId: showOrderId, callbackMetadata: checkoutFormMetadata, isFormValid: isFormValid, feeOnTop: feeOnTop, kycEnabled: kycEnabled })] }), cartPanel: _jsx(CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, pricesLoading: isTokenDataLoading, 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/CartItemRow.d.ts

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

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

@@ -1,8 +1,8 @@
-import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
-import type { CheckoutSummaryLine } from "./AnySpendCheckout";
+import { type ReactNode } from "react";
+import type { AnySpendCheckoutClasses, CheckoutSummaryLine } from "./AnySpendCheckout";
 interface CartSummaryProps {
     /** Formatted total (final amount after all adjustments) */
-    total: string;
+    total: ReactNode;
     tokenSymbol?: string;
     classes?: AnySpendCheckoutClasses;
     /** Formatted subtotal (sum of items only — shown when adjustments exist) */
@@ -25,6 +25,8 @@ interface CartSummaryProps {
     summaryLines?: CheckoutSummaryLine[];
     /** Formatted USD equivalent (e.g. "$5.56") — shown for non-stablecoin tokens */
     usdEquivalent?: string | null;
+    /** When true, hide adjustment rows and USD equivalent (caller passes a skeleton as `total`). */
+    pricesLoading?: boolean;
 }
-export declare function CartSummary({ total, tokenSymbol, classes, subtotal, tokenDecimals, shipping, tax, discount, summaryLines, usdEquivalent, }: CartSummaryProps): import("react/jsx-runtime").JSX.Element;
+export declare function CartSummary({ total, tokenSymbol, classes, subtotal, tokenDecimals, shipping, tax, discount, summaryLines, usdEquivalent, pricesLoading, }: CartSummaryProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,15 +3,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../shared/utils/cn.js";
 import { formatTokenAmount, safeBigInt } from "../../../../shared/utils/number.js";
 import { useMemo } from "react";
-export function CartSummary({ total, tokenSymbol, classes, subtotal, tokenDecimals = 18, shipping, tax, discount, summaryLines, usdEquivalent, }) {
-    const hasAdjustments = !!shipping?.amount || !!tax?.amount || !!discount?.amount || (summaryLines && summaryLines.length > 0);
-    const formattedShipping = useMemo(() => (shipping?.amount ? formatTokenAmount(safeBigInt(shipping.amount), tokenDecimals) : null), [shipping?.amount, tokenDecimals]);
-    const formattedTax = useMemo(() => (tax?.amount ? formatTokenAmount(safeBigInt(tax.amount), tokenDecimals) : null), [tax?.amount, tokenDecimals]);
-    const formattedDiscount = useMemo(() => (discount?.amount ? formatTokenAmount(safeBigInt(discount.amount), tokenDecimals) : null), [discount?.amount, tokenDecimals]);
-    const formattedSummaryLines = useMemo(() => summaryLines?.map(line => ({
-        ...line,
-        formattedAmount: formatTokenAmount(safeBigInt(line.amount), tokenDecimals),
-        isNegative: safeBigInt(line.amount) < BigInt(0),
-    })), [summaryLines, tokenDecimals]);
-    return (_jsxs("div", { className: cn("border-t border-gray-200 pt-3 dark:border-neutral-700", classes?.cartSummary), children: [hasAdjustments && subtotal && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSubtotal), children: [_jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Subtotal" }), _jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [subtotal, " ", tokenSymbol] })] })), formattedShipping && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [_jsx("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: shipping?.label || "Shipping" }), _jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [formattedShipping, " ", tokenSymbol] })] })), formattedTax && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [_jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: [tax?.label || "Tax", tax?.rate && _jsxs("span", { className: "ml-1 text-xs text-gray-400 dark:text-gray-500", children: ["(", tax.rate, ")"] })] }), _jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [formattedTax, " ", tokenSymbol] })] })), formattedDiscount && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartDiscount), children: [_jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [discount?.label || "Discount", discount?.code && (_jsx("span", { className: "ml-1 rounded bg-green-50 px-1.5 py-0.5 text-xs font-medium text-green-600 dark:bg-green-900/20 dark:text-green-400", children: discount.code }))] }), _jsxs("span", { className: "text-sm font-medium text-green-600 dark:text-green-400", children: ["-", formattedDiscount, " ", tokenSymbol] })] })), formattedSummaryLines?.map(line => (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [_jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: [line.label, line.description && (_jsxs("span", { className: "ml-1 text-xs text-gray-400 dark:text-gray-500", children: ["(", line.description, ")"] }))] }), _jsxs("span", { className: cn("text-sm", line.isNegative ? "font-medium text-green-600 dark:text-green-400" : "text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [line.formattedAmount, " ", tokenSymbol] })] }, line.label))), _jsxs("div", { className: cn("flex flex-col", hasAdjustments && "mt-1 border-t border-gray-100 pt-2 dark:border-neutral-800"), children: [_jsxs("div", { className: "flex items-center justify-between", 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: [total, " ", tokenSymbol] })] }), usdEquivalent && (_jsx("div", { className: "flex justify-end", children: _jsxs("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: ["~", usdEquivalent, " USD"] }) }))] })] }));
+export function CartSummary({ total, tokenSymbol, classes, subtotal, tokenDecimals = 18, shipping, tax, discount, summaryLines, usdEquivalent, pricesLoading = false, }) {
+    const formattedShipping = useMemo(() => (!pricesLoading && shipping?.amount ? formatTokenAmount(safeBigInt(shipping.amount), tokenDecimals) : null), [pricesLoading, shipping?.amount, tokenDecimals]);
+    const formattedTax = useMemo(() => (!pricesLoading && tax?.amount ? formatTokenAmount(safeBigInt(tax.amount), tokenDecimals) : null), [pricesLoading, tax?.amount, tokenDecimals]);
+    const formattedDiscount = useMemo(() => (!pricesLoading && discount?.amount ? formatTokenAmount(safeBigInt(discount.amount), tokenDecimals) : null), [pricesLoading, discount?.amount, tokenDecimals]);
+    const formattedSummaryLines = useMemo(() => pricesLoading
+        ? undefined
+        : summaryLines?.map(line => ({
+            ...line,
+            formattedAmount: formatTokenAmount(safeBigInt(line.amount), tokenDecimals),
+            isNegative: safeBigInt(line.amount) < BigInt(0),
+        })), [pricesLoading, summaryLines, tokenDecimals]);
+    const hasAdjustments = !!formattedShipping || !!formattedTax || !!formattedDiscount || !!formattedSummaryLines?.length;
+    return (_jsxs("div", { className: cn("border-t border-gray-200 pt-3 dark:border-neutral-700", classes?.cartSummary), children: [hasAdjustments && subtotal && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSubtotal), children: [_jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Subtotal" }), _jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [subtotal, " ", tokenSymbol] })] })), formattedShipping && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [_jsx("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: shipping?.label || "Shipping" }), _jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [formattedShipping, " ", tokenSymbol] })] })), formattedTax && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [_jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: [tax?.label || "Tax", tax?.rate && _jsxs("span", { className: "ml-1 text-xs text-gray-400 dark:text-gray-500", children: ["(", tax.rate, ")"] })] }), _jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [formattedTax, " ", tokenSymbol] })] })), formattedDiscount && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartDiscount), children: [_jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [discount?.label || "Discount", discount?.code && (_jsx("span", { className: "ml-1 rounded bg-green-50 px-1.5 py-0.5 text-xs font-medium text-green-600 dark:bg-green-900/20 dark:text-green-400", children: discount.code }))] }), _jsxs("span", { className: "text-sm font-medium text-green-600 dark:text-green-400", children: ["-", formattedDiscount, " ", tokenSymbol] })] })), formattedSummaryLines?.map(line => (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [_jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: [line.label, line.description && (_jsxs("span", { className: "ml-1 text-xs text-gray-400 dark:text-gray-500", children: ["(", line.description, ")"] }))] }), _jsxs("span", { className: cn("text-sm", line.isNegative ? "font-medium text-green-600 dark:text-green-400" : "text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [line.formattedAmount, " ", tokenSymbol] })] }, line.label))), _jsxs("div", { className: cn("flex flex-col", hasAdjustments && "mt-1 border-t border-gray-100 pt-2 dark:border-neutral-800"), children: [_jsxs("div", { className: "flex items-center justify-between", 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: [total, " ", tokenSymbol] })] }), !pricesLoading && usdEquivalent && (_jsx("div", { className: "flex justify-end", children: _jsxs("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: ["~", usdEquivalent, " USD"] }) }))] })] }));
 }

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

@@ -5,6 +5,8 @@ interface CheckoutCartPanelProps {
     totalAmount: string;
     tokenSymbol?: string;
     tokenDecimals?: number;
+    /** True while token decimals/symbol are still loading — prevents rendering mis-decimalized prices. */
+    pricesLoading?: boolean;
     organizationName?: string;
     organizationLogo?: string;
     classes?: AnySpendCheckoutClasses;
@@ -28,5 +30,5 @@ interface CheckoutCartPanelProps {
     /** Formatted USD equivalent (e.g. "$5.56") — shown for non-stablecoin tokens */
     usdEquivalent?: string | null;
 }
-export declare function CheckoutCartPanel({ items, totalAmount, tokenSymbol, tokenDecimals, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }: CheckoutCartPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckoutCartPanel({ items, totalAmount, tokenSymbol, tokenDecimals, pricesLoading, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }: CheckoutCartPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,7 +6,8 @@ import { useMemo } from "react";
 import { CartItemRow } from "./CartItemRow.js";
 import { CartSummary } from "./CartSummary.js";
 import { PoweredByBranding } from "./PoweredByBranding.js";
-export function CheckoutCartPanel({ items, totalAmount, tokenSymbol = "", tokenDecimals = 18, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }) {
+import { PriceSkeleton } from "./PriceSkeleton.js";
+export function CheckoutCartPanel({ items, totalAmount, tokenSymbol = "", tokenDecimals = 18, pricesLoading = false, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }) {
     const formattedTotal = useMemo(() => formatTokenAmount(safeBigInt(totalAmount), tokenDecimals), [totalAmount, tokenDecimals]);
     // Compute subtotal from items only (before adjustments)
     const formattedSubtotal = useMemo(() => {
@@ -16,9 +17,9 @@ export function CheckoutCartPanel({ items, totalAmount, tokenSymbol = "", tokenD
         }
         return formatTokenAmount(subtotal, tokenDecimals);
     }, [items, tokenDecimals]);
-    return (_jsxs("div", { className: cn("anyspend-cart-panel flex flex-col", classes?.cartPanel), children: [_jsx("h2", { className: cn("anyspend-cart-title mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.cartTitle), children: "Order Summary" }), _jsx("div", { className: "anyspend-cart-items divide-y divide-gray-100 dark:divide-gray-800", children: items.map((item, index) => {
+    return (_jsxs("div", { className: cn("anyspend-cart-panel flex flex-col", classes?.cartPanel), "aria-busy": pricesLoading || undefined, children: [_jsx("h2", { className: cn("anyspend-cart-title mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.cartTitle), children: "Order Summary" }), _jsx("div", { className: "anyspend-cart-items divide-y divide-gray-100 dark:divide-gray-800", children: items.map((item, index) => {
                     const itemTotal = safeBigInt(item.amount) * BigInt(item.quantity);
-                    const formattedPrice = `${formatTokenAmount(itemTotal, tokenDecimals)} ${tokenSymbol}`;
+                    const formattedPrice = pricesLoading ? (_jsx(PriceSkeleton, {})) : (`${formatTokenAmount(itemTotal, tokenDecimals)} ${tokenSymbol}`);
                     return _jsx(CartItemRow, { item: item, formattedPrice: formattedPrice, classes: classes }, item.id || index);
-                }) }), _jsx(CartSummary, { total: formattedTotal, tokenSymbol: tokenSymbol, classes: classes, subtotal: formattedSubtotal, tokenDecimals: tokenDecimals, shipping: shipping, tax: tax, discount: discount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), footer === undefined ? (_jsx(PoweredByBranding, { organizationName: organizationName, organizationLogo: organizationLogo, classes: classes })) : (footer)] }));
+                }) }), _jsx(CartSummary, { total: pricesLoading ? _jsx(PriceSkeleton, { className: "w-20" }) : formattedTotal, tokenSymbol: tokenSymbol, classes: classes, subtotal: formattedSubtotal, tokenDecimals: tokenDecimals, shipping: shipping, tax: tax, discount: discount, summaryLines: summaryLines, usdEquivalent: usdEquivalent, pricesLoading: pricesLoading }), footer === undefined ? (_jsx(PoweredByBranding, { organizationName: organizationName, organizationLogo: organizationLogo, classes: classes })) : (footer)] }));
 }

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

@@ -16,6 +16,8 @@ interface CheckoutFormPanelProps {
     /** Token info for display */
     tokenSymbol?: string;
     tokenDecimals?: number;
+    /** True while token decimals/symbol are still loading — prevents rendering mis-decimalized prices. */
+    pricesLoading?: boolean;
     /** CSS class overrides */
     classes?: AnySpendCheckoutClasses;
     /** Current form data (lifted state) */
@@ -35,5 +37,5 @@ interface CheckoutFormPanelProps {
     /** Slot overrides */
     checkoutFormSlot?: (props: CheckoutFormComponentProps) => React.ReactNode;
 }
-export declare function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingOptions, collectShippingAddress, enableDiscountCode, validateDiscount, tokenSymbol, tokenDecimals, classes, formData, onFormDataChange, selectedShipping, onShippingChange, appliedDiscount, onDiscountApplied, onDiscountRemoved, shippingAddress, onShippingAddressChange, checkoutFormSlot, }: CheckoutFormPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingOptions, collectShippingAddress, enableDiscountCode, validateDiscount, tokenSymbol, tokenDecimals, pricesLoading, classes, formData, onFormDataChange, selectedShipping, onShippingChange, appliedDiscount, onDiscountApplied, onDiscountRemoved, shippingAddress, onShippingAddressChange, checkoutFormSlot, }: CheckoutFormPanelProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -7,7 +7,7 @@ import { AddressForm } from "./AddressForm.js";
 import { ShippingSelector } from "./ShippingSelector.js";
 import { DiscountCodeInput } from "./DiscountCodeInput.js";
 const emptyAddress = { street: "", city: "", state: "", zip: "", country: "" };
-export function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingOptions, collectShippingAddress, enableDiscountCode, validateDiscount, tokenSymbol, tokenDecimals, classes, formData, onFormDataChange, selectedShipping, onShippingChange, appliedDiscount, onDiscountApplied, onDiscountRemoved, shippingAddress, onShippingAddressChange, checkoutFormSlot, }) {
+export function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingOptions, collectShippingAddress, enableDiscountCode, validateDiscount, tokenSymbol, tokenDecimals, pricesLoading = false, classes, formData, onFormDataChange, selectedShipping, onShippingChange, appliedDiscount, onDiscountApplied, onDiscountRemoved, shippingAddress, onShippingAddressChange, checkoutFormSlot, }) {
     const [errors, setErrors] = useState({});
     const hasFormFields = formSchema && formSchema.fields.length > 0;
     const hasShipping = shippingOptions && shippingOptions.length > 0;
@@ -53,7 +53,7 @@ export function CheckoutFormPanel({ formSchema, formComponent: FormComponent, sh
     if (!hasAnyContent)
         return null;
     // Shared shipping + discount section
-    const shippingAndDiscount = (_jsxs(_Fragment, { children: [hasShipping && shippingOptions && (_jsx(ShippingSelector, { options: shippingOptions, selectedId: selectedShipping?.id || null, onSelect: onShippingChange, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals })), enableDiscountCode && validateDiscount && (_jsx(DiscountCodeInput, { onApply: handleDiscountApply, appliedDiscount: appliedDiscount, onRemove: onDiscountRemoved, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals }))] }));
+    const shippingAndDiscount = (_jsxs(_Fragment, { children: [hasShipping && shippingOptions && (_jsx(ShippingSelector, { options: shippingOptions, selectedId: selectedShipping?.id || null, onSelect: onShippingChange, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, pricesLoading: pricesLoading })), enableDiscountCode && validateDiscount && (_jsx(DiscountCodeInput, { onApply: handleDiscountApply, appliedDiscount: appliedDiscount, onRemove: onDiscountRemoved, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, pricesLoading: pricesLoading }))] }));
     // Render custom form slot if provided
     if (checkoutFormSlot) {
         return (_jsxs("div", { className: cn("anyspend-form-panel space-y-4", classes?.formPanel), children: [_jsx("div", { className: "anyspend-form-slot", children: checkoutFormSlot({

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

@@ -6,7 +6,9 @@ interface DiscountCodeInputProps {
     loading?: boolean;
     tokenSymbol?: string;
     tokenDecimals?: number;
+    /** True while token decimals/symbol are still loading — renders applied amount as skeleton. */
+    pricesLoading?: boolean;
     className?: string;
 }
-export declare function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading, tokenSymbol, tokenDecimals, className, }: DiscountCodeInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading, tokenSymbol, tokenDecimals, pricesLoading, className, }: DiscountCodeInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,13 +4,14 @@ import { cn } from "../../../../shared/utils/cn.js";
 import { formatTokenAmount, safeBigInt } from "../../../../shared/utils/number.js";
 import { X, Loader2, Check } from "lucide-react";
 import { useState, useCallback } from "react";
+import { PriceSkeleton } from "./PriceSkeleton.js";
 function formatAmount(amount, decimals, symbol) {
     const bi = safeBigInt(amount);
     if (bi === BigInt(0))
         return "Free";
     return `${formatTokenAmount(bi, decimals)} ${symbol}`;
 }
-export function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading = false, tokenSymbol = "", tokenDecimals = 6, className, }) {
+export function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading = false, tokenSymbol = "", tokenDecimals = 6, pricesLoading = false, className, }) {
     const [code, setCode] = useState("");
     const [error, setError] = useState(null);
     const [isValidating, setIsValidating] = useState(false);
@@ -41,11 +42,7 @@ export function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading
     };
     // Show applied discount state
     if (appliedDiscount?.valid) {
-        return (_jsxs("div", { className: cn("anyspend-discount anyspend-discount-applied space-y-2", className), children: [_jsx("div", { className: "anyspend-discount-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Discount" }), _jsxs("div", { className: "anyspend-discount-badge flex items-center justify-between rounded-lg border border-green-200 bg-green-50 px-3 py-2 dark:border-green-800 dark:bg-green-900/20", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Check, { className: "h-4 w-4 text-green-600 dark:text-green-400" }), _jsx("span", { className: "anyspend-discount-value text-sm font-medium text-green-700 dark:text-green-300", children: appliedDiscount.discount_type === "percentage"
-                                        ? `${appliedDiscount.discount_value}% off`
-                                        : appliedDiscount.discount_amount
-                                            ? `-${formatAmount(appliedDiscount.discount_amount, tokenDecimals, tokenSymbol)}`
-                                            : "Discount applied" })] }), _jsx("button", { type: "button", onClick: handleRemove, className: "anyspend-discount-remove rounded p-1 text-gray-400 hover:bg-gray-200 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] })] }));
+        return (_jsxs("div", { className: cn("anyspend-discount anyspend-discount-applied space-y-2", className), children: [_jsx("div", { className: "anyspend-discount-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Discount" }), _jsxs("div", { className: "anyspend-discount-badge flex items-center justify-between rounded-lg border border-green-200 bg-green-50 px-3 py-2 dark:border-green-800 dark:bg-green-900/20", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Check, { className: "h-4 w-4 text-green-600 dark:text-green-400" }), _jsx("span", { className: "anyspend-discount-value text-sm font-medium text-green-700 dark:text-green-300", children: appliedDiscount.discount_type === "percentage" ? (`${appliedDiscount.discount_value}% off`) : appliedDiscount.discount_amount ? (pricesLoading ? (_jsx(PriceSkeleton, {})) : (`-${formatAmount(appliedDiscount.discount_amount, tokenDecimals, tokenSymbol)}`)) : ("Discount applied") })] }), _jsx("button", { type: "button", onClick: handleRemove, className: "anyspend-discount-remove rounded p-1 text-gray-400 hover:bg-gray-200 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] })] }));
     }
     return (_jsxs("div", { className: cn("anyspend-discount space-y-2", className), children: [_jsx("div", { className: "anyspend-discount-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Discount Code" }), _jsxs("div", { className: "anyspend-discount-input-row flex gap-2", children: [_jsx("input", { type: "text", value: code, onChange: e => {
                             setCode(e.target.value.toUpperCase());

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

@@ -0,0 +1,5 @@
+interface PriceSkeletonProps {
+    className?: string;
+}
+export declare function PriceSkeleton({ className }: PriceSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/cn.js";
+export function PriceSkeleton({ className }) {
+    return (_jsx("span", { className: cn("animate-pulse-fade bg-b3-react-background inline-block h-4 w-16 rounded-md align-middle", className), "aria-hidden": "true" }));
+}

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

@@ -5,7 +5,9 @@ interface ShippingSelectorProps {
     onSelect: (option: ShippingOption) => void;
     tokenSymbol?: string;
     tokenDecimals?: number;
+    /** True while token decimals/symbol are still loading — renders price as skeleton. */
+    pricesLoading?: boolean;
     className?: string;
 }
-export declare function ShippingSelector({ options, selectedId, onSelect, tokenSymbol, tokenDecimals, className, }: ShippingSelectorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ShippingSelector({ options, selectedId, onSelect, tokenSymbol, tokenDecimals, pricesLoading, className, }: ShippingSelectorProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -2,16 +2,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../shared/utils/cn.js";
 import { formatTokenAmount, safeBigInt } from "../../../../shared/utils/number.js";
+import { PriceSkeleton } from "./PriceSkeleton.js";
 function formatAmount(amount, decimals, symbol) {
     const bi = safeBigInt(amount);
     if (bi === BigInt(0))
         return "Free";
     return `${formatTokenAmount(bi, decimals)} ${symbol}`;
 }
-export function ShippingSelector({ options, selectedId, onSelect, tokenSymbol = "", tokenDecimals = 6, className, }) {
+export function ShippingSelector({ options, selectedId, onSelect, tokenSymbol = "", tokenDecimals = 6, pricesLoading = false, className, }) {
     if (options.length === 0)
         return null;
     return (_jsxs("div", { className: cn("anyspend-shipping-selector space-y-2", className), children: [_jsx("div", { className: "anyspend-shipping-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Shipping" }), _jsx("div", { className: "anyspend-shipping-options space-y-2", children: options.map(option => (_jsxs("label", { className: cn("anyspend-shipping-option flex cursor-pointer items-center justify-between rounded-lg border p-3 transition-colors", selectedId === option.id
                         ? "anyspend-shipping-option-selected border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-blue-900/20"
-                        : "border-gray-200 bg-white hover:border-gray-300 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:border-neutral-500"), children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("input", { type: "radio", name: "shipping", checked: selectedId === option.id, onChange: () => onSelect(option), className: "h-4 w-4 border-gray-300 text-blue-500 focus:ring-blue-500" }), _jsxs("div", { children: [_jsx("div", { className: "anyspend-shipping-option-name text-sm font-medium text-gray-900 dark:text-gray-100", children: option.name }), (option.description || option.estimated_days) && (_jsx("div", { className: "anyspend-shipping-option-detail text-xs text-gray-500 dark:text-gray-400", children: option.description || (option.estimated_days && `${option.estimated_days}`) }))] })] }), _jsx("div", { className: "anyspend-shipping-option-price text-sm font-medium text-gray-900 dark:text-gray-100", children: formatAmount(option.amount, tokenDecimals, tokenSymbol) })] }, option.id))) })] }));
+                        : "border-gray-200 bg-white hover:border-gray-300 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:border-neutral-500"), children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("input", { type: "radio", name: "shipping", checked: selectedId === option.id, onChange: () => onSelect(option), className: "h-4 w-4 border-gray-300 text-blue-500 focus:ring-blue-500" }), _jsxs("div", { children: [_jsx("div", { className: "anyspend-shipping-option-name text-sm font-medium text-gray-900 dark:text-gray-100", children: option.name }), (option.description || option.estimated_days) && (_jsx("div", { className: "anyspend-shipping-option-detail text-xs text-gray-500 dark:text-gray-400", children: option.description || (option.estimated_days && `${option.estimated_days}`) }))] })] }), _jsx("div", { className: "anyspend-shipping-option-price text-sm font-medium text-gray-900 dark:text-gray-100", children: pricesLoading ? _jsx(PriceSkeleton, {}) : formatAmount(option.amount, tokenDecimals, tokenSymbol) })] }, option.id))) })] }));
 }

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

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

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

@@ -1,8 +1,8 @@
-import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
-import type { CheckoutSummaryLine } from "./AnySpendCheckout";
+import { type ReactNode } from "react";
+import type { AnySpendCheckoutClasses, CheckoutSummaryLine } from "./AnySpendCheckout";
 interface CartSummaryProps {
     /** Formatted total (final amount after all adjustments) */
-    total: string;
+    total: ReactNode;
     tokenSymbol?: string;
     classes?: AnySpendCheckoutClasses;
     /** Formatted subtotal (sum of items only — shown when adjustments exist) */
@@ -25,6 +25,8 @@ interface CartSummaryProps {
     summaryLines?: CheckoutSummaryLine[];
     /** Formatted USD equivalent (e.g. "$5.56") — shown for non-stablecoin tokens */
     usdEquivalent?: string | null;
+    /** When true, hide adjustment rows and USD equivalent (caller passes a skeleton as `total`). */
+    pricesLoading?: boolean;
 }
-export declare function CartSummary({ total, tokenSymbol, classes, subtotal, tokenDecimals, shipping, tax, discount, summaryLines, usdEquivalent, }: CartSummaryProps): import("react/jsx-runtime").JSX.Element;
+export declare function CartSummary({ total, tokenSymbol, classes, subtotal, tokenDecimals, shipping, tax, discount, summaryLines, usdEquivalent, pricesLoading, }: CartSummaryProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/anyspend/react/components/checkout/CheckoutCartPanel.d.ts

@@ -5,6 +5,8 @@ interface CheckoutCartPanelProps {
     totalAmount: string;
     tokenSymbol?: string;
     tokenDecimals?: number;
+    /** True while token decimals/symbol are still loading — prevents rendering mis-decimalized prices. */
+    pricesLoading?: boolean;
     organizationName?: string;
     organizationLogo?: string;
     classes?: AnySpendCheckoutClasses;
@@ -28,5 +30,5 @@ interface CheckoutCartPanelProps {
     /** Formatted USD equivalent (e.g. "$5.56") — shown for non-stablecoin tokens */
     usdEquivalent?: string | null;
 }
-export declare function CheckoutCartPanel({ items, totalAmount, tokenSymbol, tokenDecimals, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }: CheckoutCartPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckoutCartPanel({ items, totalAmount, tokenSymbol, tokenDecimals, pricesLoading, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }: CheckoutCartPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/anyspend/react/components/checkout/CheckoutFormPanel.d.ts

@@ -16,6 +16,8 @@ interface CheckoutFormPanelProps {
     /** Token info for display */
     tokenSymbol?: string;
     tokenDecimals?: number;
+    /** True while token decimals/symbol are still loading — prevents rendering mis-decimalized prices. */
+    pricesLoading?: boolean;
     /** CSS class overrides */
     classes?: AnySpendCheckoutClasses;
     /** Current form data (lifted state) */
@@ -35,5 +37,5 @@ interface CheckoutFormPanelProps {
     /** Slot overrides */
     checkoutFormSlot?: (props: CheckoutFormComponentProps) => React.ReactNode;
 }
-export declare function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingOptions, collectShippingAddress, enableDiscountCode, validateDiscount, tokenSymbol, tokenDecimals, classes, formData, onFormDataChange, selectedShipping, onShippingChange, appliedDiscount, onDiscountApplied, onDiscountRemoved, shippingAddress, onShippingAddressChange, checkoutFormSlot, }: CheckoutFormPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingOptions, collectShippingAddress, enableDiscountCode, validateDiscount, tokenSymbol, tokenDecimals, pricesLoading, classes, formData, onFormDataChange, selectedShipping, onShippingChange, appliedDiscount, onDiscountApplied, onDiscountRemoved, shippingAddress, onShippingAddressChange, checkoutFormSlot, }: CheckoutFormPanelProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/types/anyspend/react/components/checkout/DiscountCodeInput.d.ts

@@ -6,7 +6,9 @@ interface DiscountCodeInputProps {
     loading?: boolean;
     tokenSymbol?: string;
     tokenDecimals?: number;
+    /** True while token decimals/symbol are still loading — renders applied amount as skeleton. */
+    pricesLoading?: boolean;
     className?: string;
 }
-export declare function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading, tokenSymbol, tokenDecimals, className, }: DiscountCodeInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function DiscountCodeInput({ onApply, appliedDiscount, onRemove, loading, tokenSymbol, tokenDecimals, pricesLoading, className, }: DiscountCodeInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/anyspend/react/components/checkout/PriceSkeleton.d.ts

@@ -0,0 +1,5 @@
+interface PriceSkeletonProps {
+    className?: string;
+}
+export declare function PriceSkeleton({ className }: PriceSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/anyspend/react/components/checkout/ShippingSelector.d.ts

@@ -5,7 +5,9 @@ interface ShippingSelectorProps {
     onSelect: (option: ShippingOption) => void;
     tokenSymbol?: string;
     tokenDecimals?: number;
+    /** True while token decimals/symbol are still loading — renders price as skeleton. */
+    pricesLoading?: boolean;
     className?: string;
 }
-export declare function ShippingSelector({ options, selectedId, onSelect, tokenSymbol, tokenDecimals, className, }: ShippingSelectorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ShippingSelector({ options, selectedId, onSelect, tokenSymbol, tokenDecimals, pricesLoading, className, }: ShippingSelectorProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.1.69-alpha.20",
+  "version": "0.1.69-alpha.21",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

package/src/anyspend/react/components/checkout/AnySpendCheckout.tsx

@@ -295,10 +295,14 @@ export function AnySpendCheckout({
     variablePricingAmount,
   ]);
 
-  // Get destination token metadata
-  const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
-  const tokenSymbol = tokenData?.symbol || "";
-  const tokenDecimals = tokenData?.decimals || 18;
+  // Get destination token metadata. While loading, skip price-dependent UI
+  // since the 18-decimal fallback is wrong for non-18 tokens (e.g. USDC).
+  const { data: tokenData, isLoading: isTokenDataLoading } = 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(() => {
@@ -412,6 +416,7 @@ export function AnySpendCheckout({
                     validateDiscount={validateDiscount}
                     tokenSymbol={tokenSymbol}
                     tokenDecimals={tokenDecimals}
+                    pricesLoading={isTokenDataLoading}
                     classes={classes}
                     formData={formData}
                     onFormDataChange={handleFormDataChange}
@@ -456,6 +461,7 @@ export function AnySpendCheckout({
               totalAmount={computedTotal}
               tokenSymbol={tokenSymbol}
               tokenDecimals={tokenDecimals}
+              pricesLoading={isTokenDataLoading}
               organizationName={organizationName}
               organizationLogo={organizationLogo}
               classes={classes}

package/src/anyspend/react/components/checkout/CartItemRow.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import type { ReactNode } from "react";
 import type { CheckoutItem, AnySpendCheckoutClasses } from "./AnySpendCheckout";
 
 interface CartItemRowProps {
   item: CheckoutItem;
-  formattedPrice: string;
+  formattedPrice: ReactNode;
   classes?: AnySpendCheckoutClasses;
 }
 

package/src/anyspend/react/components/checkout/CartSummary.tsx

@@ -2,13 +2,12 @@
 
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatTokenAmount, safeBigInt } from "@b3dotfun/sdk/shared/utils/number";
-import { useMemo } from "react";
-import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
-import type { CheckoutSummaryLine } from "./AnySpendCheckout";
+import { useMemo, type ReactNode } from "react";
+import type { AnySpendCheckoutClasses, CheckoutSummaryLine } from "./AnySpendCheckout";
 
 interface CartSummaryProps {
   /** Formatted total (final amount after all adjustments) */
-  total: string;
+  total: ReactNode;
   tokenSymbol?: string;
   classes?: AnySpendCheckoutClasses;
   /** Formatted subtotal (sum of items only — shown when adjustments exist) */
@@ -20,6 +19,8 @@ interface CartSummaryProps {
   summaryLines?: CheckoutSummaryLine[];
   /** Formatted USD equivalent (e.g. "$5.56") — shown for non-stablecoin tokens */
   usdEquivalent?: string | null;
+  /** When true, hide adjustment rows and USD equivalent (caller passes a skeleton as `total`). */
+  pricesLoading?: boolean;
 }
 
 export function CartSummary({
@@ -33,35 +34,38 @@ export function CartSummary({
   discount,
   summaryLines,
   usdEquivalent,
+  pricesLoading = false,
 }: CartSummaryProps) {
-  const hasAdjustments =
-    !!shipping?.amount || !!tax?.amount || !!discount?.amount || (summaryLines && summaryLines.length > 0);
-
   const formattedShipping = useMemo(
-    () => (shipping?.amount ? formatTokenAmount(safeBigInt(shipping.amount), tokenDecimals) : null),
-    [shipping?.amount, tokenDecimals],
+    () => (!pricesLoading && shipping?.amount ? formatTokenAmount(safeBigInt(shipping.amount), tokenDecimals) : null),
+    [pricesLoading, shipping?.amount, tokenDecimals],
   );
 
   const formattedTax = useMemo(
-    () => (tax?.amount ? formatTokenAmount(safeBigInt(tax.amount), tokenDecimals) : null),
-    [tax?.amount, tokenDecimals],
+    () => (!pricesLoading && tax?.amount ? formatTokenAmount(safeBigInt(tax.amount), tokenDecimals) : null),
+    [pricesLoading, tax?.amount, tokenDecimals],
   );
 
   const formattedDiscount = useMemo(
-    () => (discount?.amount ? formatTokenAmount(safeBigInt(discount.amount), tokenDecimals) : null),
-    [discount?.amount, tokenDecimals],
+    () => (!pricesLoading && discount?.amount ? formatTokenAmount(safeBigInt(discount.amount), tokenDecimals) : null),
+    [pricesLoading, discount?.amount, tokenDecimals],
   );
 
   const formattedSummaryLines = useMemo(
     () =>
-      summaryLines?.map(line => ({
-        ...line,
-        formattedAmount: formatTokenAmount(safeBigInt(line.amount), tokenDecimals),
-        isNegative: safeBigInt(line.amount) < BigInt(0),
-      })),
-    [summaryLines, tokenDecimals],
+      pricesLoading
+        ? undefined
+        : summaryLines?.map(line => ({
+            ...line,
+            formattedAmount: formatTokenAmount(safeBigInt(line.amount), tokenDecimals),
+            isNegative: safeBigInt(line.amount) < BigInt(0),
+          })),
+    [pricesLoading, summaryLines, tokenDecimals],
   );
 
+  const hasAdjustments =
+    !!formattedShipping || !!formattedTax || !!formattedDiscount || !!formattedSummaryLines?.length;
+
   return (
     <div className={cn("border-t border-gray-200 pt-3 dark:border-neutral-700", classes?.cartSummary)}>
       {/* Subtotal — only shown when adjustments exist */}
@@ -147,7 +151,7 @@ export function CartSummary({
             {total} {tokenSymbol}
           </span>
         </div>
-        {usdEquivalent && (
+        {!pricesLoading && usdEquivalent && (
           <div className="flex justify-end">
             <span className="text-xs text-gray-400 dark:text-gray-500">~{usdEquivalent} USD</span>
           </div>

package/src/anyspend/react/components/checkout/CheckoutCartPanel.tsx

@@ -7,12 +7,15 @@ import type { CheckoutItem, CheckoutSummaryLine, AnySpendCheckoutClasses } from
 import { CartItemRow } from "./CartItemRow";
 import { CartSummary } from "./CartSummary";
 import { PoweredByBranding } from "./PoweredByBranding";
+import { PriceSkeleton } from "./PriceSkeleton";
 
 interface CheckoutCartPanelProps {
   items: CheckoutItem[];
   totalAmount: string;
   tokenSymbol?: string;
   tokenDecimals?: number;
+  /** True while token decimals/symbol are still loading — prevents rendering mis-decimalized prices. */
+  pricesLoading?: boolean;
   organizationName?: string;
   organizationLogo?: string;
   classes?: AnySpendCheckoutClasses;
@@ -31,6 +34,7 @@ export function CheckoutCartPanel({
   totalAmount,
   tokenSymbol = "",
   tokenDecimals = 18,
+  pricesLoading = false,
   organizationName,
   organizationLogo,
   classes,
@@ -56,7 +60,7 @@ export function CheckoutCartPanel({
   }, [items, tokenDecimals]);
 
   return (
-    <div className={cn("anyspend-cart-panel flex flex-col", classes?.cartPanel)}>
+    <div className={cn("anyspend-cart-panel flex flex-col", classes?.cartPanel)} aria-busy={pricesLoading || undefined}>
       <h2
         className={cn(
           "anyspend-cart-title mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100",
@@ -69,14 +73,18 @@ export function CheckoutCartPanel({
       <div className="anyspend-cart-items divide-y divide-gray-100 dark:divide-gray-800">
         {items.map((item, index) => {
           const itemTotal = safeBigInt(item.amount) * BigInt(item.quantity);
-          const formattedPrice = `${formatTokenAmount(itemTotal, tokenDecimals)} ${tokenSymbol}`;
+          const formattedPrice: ReactNode = pricesLoading ? (
+            <PriceSkeleton />
+          ) : (
+            `${formatTokenAmount(itemTotal, tokenDecimals)} ${tokenSymbol}`
+          );
 
           return <CartItemRow key={item.id || index} item={item} formattedPrice={formattedPrice} classes={classes} />;
         })}
       </div>
 
       <CartSummary
-        total={formattedTotal}
+        total={pricesLoading ? <PriceSkeleton className="w-20" /> : formattedTotal}
         tokenSymbol={tokenSymbol}
         classes={classes}
         subtotal={formattedSubtotal}
@@ -86,6 +94,7 @@ export function CheckoutCartPanel({
         discount={discount}
         summaryLines={summaryLines}
         usdEquivalent={usdEquivalent}
+        pricesLoading={pricesLoading}
       />
 
       {footer === undefined ? (

package/src/anyspend/react/components/checkout/CheckoutFormPanel.tsx

@@ -31,6 +31,8 @@ interface CheckoutFormPanelProps {
   /** Token info for display */
   tokenSymbol?: string;
   tokenDecimals?: number;
+  /** True while token decimals/symbol are still loading — prevents rendering mis-decimalized prices. */
+  pricesLoading?: boolean;
   /** CSS class overrides */
   classes?: AnySpendCheckoutClasses;
   /** Current form data (lifted state) */
@@ -62,6 +64,7 @@ export function CheckoutFormPanel({
   validateDiscount,
   tokenSymbol,
   tokenDecimals,
+  pricesLoading = false,
   classes,
   formData,
   onFormDataChange,
@@ -144,6 +147,7 @@ export function CheckoutFormPanel({
           onSelect={onShippingChange}
           tokenSymbol={tokenSymbol}
           tokenDecimals={tokenDecimals}
+          pricesLoading={pricesLoading}
         />
       )}
       {enableDiscountCode && validateDiscount && (
@@ -153,6 +157,7 @@ export function CheckoutFormPanel({
           onRemove={onDiscountRemoved}
           tokenSymbol={tokenSymbol}
           tokenDecimals={tokenDecimals}
+          pricesLoading={pricesLoading}
         />
       )}
     </>

package/src/anyspend/react/components/checkout/DiscountCodeInput.tsx

@@ -5,6 +5,7 @@ import { formatTokenAmount, safeBigInt } from "@b3dotfun/sdk/shared/utils/number
 import { X, Loader2, Check } from "lucide-react";
 import { useState, useCallback } from "react";
 import type { DiscountResult } from "../../../types/forms";
+import { PriceSkeleton } from "./PriceSkeleton";
 
 interface DiscountCodeInputProps {
   onApply: (code: string) => Promise<DiscountResult>;
@@ -13,6 +14,8 @@ interface DiscountCodeInputProps {
   loading?: boolean;
   tokenSymbol?: string;
   tokenDecimals?: number;
+  /** True while token decimals/symbol are still loading — renders applied amount as skeleton. */
+  pricesLoading?: boolean;
   className?: string;
 }
 
@@ -29,6 +32,7 @@ export function DiscountCodeInput({
   loading = false,
   tokenSymbol = "",
   tokenDecimals = 6,
+  pricesLoading = false,
   className,
 }: DiscountCodeInputProps) {
   const [code, setCode] = useState("");
@@ -67,11 +71,17 @@ export function DiscountCodeInput({
           <div className="flex items-center gap-2">
             <Check className="h-4 w-4 text-green-600 dark:text-green-400" />
             <span className="anyspend-discount-value text-sm font-medium text-green-700 dark:text-green-300">
-              {appliedDiscount.discount_type === "percentage"
-                ? `${appliedDiscount.discount_value}% off`
-                : appliedDiscount.discount_amount
-                  ? `-${formatAmount(appliedDiscount.discount_amount, tokenDecimals, tokenSymbol)}`
-                  : "Discount applied"}
+              {appliedDiscount.discount_type === "percentage" ? (
+                `${appliedDiscount.discount_value}% off`
+              ) : appliedDiscount.discount_amount ? (
+                pricesLoading ? (
+                  <PriceSkeleton />
+                ) : (
+                  `-${formatAmount(appliedDiscount.discount_amount, tokenDecimals, tokenSymbol)}`
+                )
+              ) : (
+                "Discount applied"
+              )}
             </span>
           </div>
           <button

package/src/anyspend/react/components/checkout/PriceSkeleton.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+
+interface PriceSkeletonProps {
+  className?: string;
+}
+
+export function PriceSkeleton({ className }: PriceSkeletonProps) {
+  return (
+    <span
+      className={cn(
+        "animate-pulse-fade bg-b3-react-background inline-block h-4 w-16 rounded-md align-middle",
+        className,
+      )}
+      aria-hidden="true"
+    />
+  );
+}

package/src/anyspend/react/components/checkout/ShippingSelector.tsx

@@ -3,6 +3,7 @@
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatTokenAmount, safeBigInt } from "@b3dotfun/sdk/shared/utils/number";
 import type { ShippingOption } from "../../../types/forms";
+import { PriceSkeleton } from "./PriceSkeleton";
 
 interface ShippingSelectorProps {
   options: ShippingOption[];
@@ -10,6 +11,8 @@ interface ShippingSelectorProps {
   onSelect: (option: ShippingOption) => void;
   tokenSymbol?: string;
   tokenDecimals?: number;
+  /** True while token decimals/symbol are still loading — renders price as skeleton. */
+  pricesLoading?: boolean;
   className?: string;
 }
 
@@ -25,6 +28,7 @@ export function ShippingSelector({
   onSelect,
   tokenSymbol = "",
   tokenDecimals = 6,
+  pricesLoading = false,
   className,
 }: ShippingSelectorProps) {
   if (options.length === 0) return null;
@@ -63,7 +67,7 @@ export function ShippingSelector({
               </div>
             </div>
             <div className="anyspend-shipping-option-price text-sm font-medium text-gray-900 dark:text-gray-100">
-              {formatAmount(option.amount, tokenDecimals, tokenSymbol)}
+              {pricesLoading ? <PriceSkeleton /> : formatAmount(option.amount, tokenDecimals, tokenSymbol)}
             </div>
           </label>
         ))}