@b3dotfun/sdk 0.1.69 → 0.1.70-alpha.2

package/src/anyspend/react/components/AnySpendWorkflowTrigger.tsx

@@ -30,6 +30,8 @@ export interface AnySpendWorkflowTriggerProps {
   actionLabel?: string;
   /** Custom class names */
   classes?: AnySpendAllClasses;
+  /** Whether to show fiat payment option. Defaults to true. */
+  showFiatOption?: boolean;
 }
 
 export function AnySpendWorkflowTrigger({
@@ -45,6 +47,7 @@ export function AnySpendWorkflowTrigger({
   mode,
   actionLabel,
   classes,
+  showFiatOption,
 }: AnySpendWorkflowTriggerProps) {
   const metadata = useMemo(
     () => ({
@@ -68,6 +71,7 @@ export function AnySpendWorkflowTrigger({
       actionLabel={actionLabel}
       classes={classes}
       allowDirectTransfer
+      showFiatOption={showFiatOption}
     />
   );
 }

package/src/anyspend/react/components/AnyspendDepositHype.tsx

@@ -32,6 +32,7 @@ export interface AnySpendDepositHypeProps {
   customRecipientLabel?: string;
   /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
   senderAddress?: string;
+  showFiatOption?: boolean;
   slots?: AnySpendSlots;
   content?: AnySpendContent;
   theme?: AnySpendTheme;
@@ -51,6 +52,7 @@ export function AnySpendDepositHype({
   customUsdInputValues,
   preferEoa,
   senderAddress,
+  showFiatOption,
   slots,
   content,
   theme,
@@ -97,6 +99,7 @@ export function AnySpendDepositHype({
       customUsdInputValues={customUsdInputValues}
       preferEoa={preferEoa}
       senderAddress={senderAddress}
+      showFiatOption={showFiatOption}
       slots={slots}
       content={content}
       theme={theme}

package/src/anyspend/react/components/AnyspendSignatureMint.tsx

@@ -48,6 +48,7 @@ export function AnyspendSignatureMint({
   signatureData,
   imageUrl,
   onSuccess,
+  showFiatOption,
   slots,
   content,
   theme,
@@ -57,6 +58,7 @@ export function AnyspendSignatureMint({
   signatureData: GenerateSigMintResponse;
   imageUrl?: string;
   onSuccess?: (txHash?: string) => void;
+  showFiatOption?: boolean;
   slots?: AnySpendSlots;
   content?: AnySpendContent;
   theme?: AnySpendTheme;
@@ -156,6 +158,7 @@ export function AnyspendSignatureMint({
       header={header}
       onSuccess={onSuccess}
       showRecipient={true}
+      showFiatOption={showFiatOption}
       slots={slots}
       content={content}
       theme={theme}

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

@@ -138,6 +138,10 @@ export interface AnySpendCheckoutProps {
   feeOnTop?: boolean;
   /** When true, identity verification (KYC) is required before card payment. Defaults to false. */
   kycEnabled?: boolean;
+  /** Extra metadata included under the 'callbackMetadata' key in the order's callbackMetadata (e.g. workflowId, orgId from checkout session) */
+  callbackMetadata?: Record<string, unknown>;
+  /** Whether to show fiat payment options (card + coinbase). Defaults to true. */
+  showFiatOption?: boolean;
 }
 
 const emptyAddress: AddressData = { street: "", city: "", state: "", zip: "", country: "" };
@@ -187,6 +191,8 @@ export function AnySpendCheckout({
   variablePricing,
   feeOnTop,
   kycEnabled = false,
+  callbackMetadata: callbackMetadataProp,
+  showFiatOption,
 }: AnySpendCheckoutProps) {
   // ===== Variable pricing state =====
   const [variablePricingAmount, setVariablePricingAmount] = useState<string>("0");
@@ -292,10 +298,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(() => {
@@ -342,8 +352,11 @@ export function AnySpendCheckout({
     if (isVariablePricingActive && variablePricingAmount !== "0") {
       meta.variablePricingAmount = variablePricingAmount;
     }
+    // Namespace caller-supplied metadata to avoid collisions with internal keys
+    if (callbackMetadataProp) meta.callbackMetadata = callbackMetadataProp;
     return Object.keys(meta).length > 0 ? meta : undefined;
   }, [
+    callbackMetadataProp,
     formData,
     selectedShipping,
     shippingAddress,
@@ -371,7 +384,15 @@ export function AnySpendCheckout({
 
   return (
     <AnySpendFingerprintWrapper fingerprint={fingerprint}>
-      <AnySpendCustomizationProvider slots={slots} content={content} theme={theme}>
+      <AnySpendCustomizationProvider
+        slots={slots}
+        content={{
+          successTitle: "Payment Successful",
+          successDescription: "Your payment has been processed successfully.",
+          ...content,
+        }}
+        theme={theme}
+      >
         <CheckoutLayout
           mode={mode}
           paymentPanel={
@@ -398,6 +419,7 @@ export function AnySpendCheckout({
                     validateDiscount={validateDiscount}
                     tokenSymbol={tokenSymbol}
                     tokenDecimals={tokenDecimals}
+                    pricesLoading={isTokenDataLoading}
                     classes={classes}
                     formData={formData}
                     onFormDataChange={handleFormDataChange}
@@ -433,6 +455,7 @@ export function AnySpendCheckout({
                 isFormValid={isFormValid}
                 feeOnTop={feeOnTop}
                 kycEnabled={kycEnabled}
+                showFiatOption={showFiatOption}
               />
             </>
           }
@@ -442,6 +465,7 @@ export function AnySpendCheckout({
               totalAmount={computedTotal}
               tokenSymbol={tokenSymbol}
               tokenDecimals={tokenDecimals}
+              pricesLoading={isTokenDataLoading}
               organizationName={organizationName}
               organizationLogo={organizationLogo}
               classes={classes}

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

@@ -75,6 +75,8 @@ export interface AnySpendCheckoutTriggerProps {
   summaryLines?: CheckoutSummaryLine[];
   /** When true, identity verification (KYC) is required before card payment. Defaults to false. */
   kycEnabled?: boolean;
+  /** Whether to show fiat payment options (card + coinbase). Defaults to true. */
+  showFiatOption?: boolean;
 }
 
 export function AnySpendCheckoutTrigger({
@@ -106,6 +108,7 @@ export function AnySpendCheckoutTrigger({
   discount,
   summaryLines,
   kycEnabled = false,
+  showFiatOption,
 }: AnySpendCheckoutTriggerProps) {
   // Merge workflowId + orgId into callbackMetadata
   const mergedMetadata = useMemo(() => {
@@ -216,6 +219,7 @@ export function AnySpendCheckoutTrigger({
               defaultPaymentMethod={defaultPaymentMethod}
               senderAddress={senderAddress}
               kycEnabled={kycEnabled}
+              showFiatOption={showFiatOption}
             />
           </div>
         </div>

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/CheckoutPaymentPanel.tsx

@@ -41,6 +41,8 @@ interface CheckoutPaymentPanelProps {
   feeOnTop?: boolean;
   /** When true, identity verification (KYC) is required before card payment. Defaults to false. */
   kycEnabled?: boolean;
+  /** Whether to show fiat payment options (card + coinbase). Defaults to true. */
+  showFiatOption?: boolean;
 }
 
 function RadioCircle({ selected, themeColor }: { selected: boolean; themeColor?: string }) {
@@ -138,8 +140,20 @@ export function CheckoutPaymentPanel({
   isFormValid = true,
   feeOnTop,
   kycEnabled = false,
+  showFiatOption = true,
 }: CheckoutPaymentPanelProps) {
-  const [paymentMethod, setPaymentMethod] = useState<PaymentMethod | null>(defaultPaymentMethod ?? null);
+  const [paymentMethod, setPaymentMethod] = useState<PaymentMethod | null>(() => {
+    if (!showFiatOption && (defaultPaymentMethod === "card" || defaultPaymentMethod === "coinbase")) {
+      return "crypto";
+    }
+    return defaultPaymentMethod ?? null;
+  });
+
+  useEffect(() => {
+    if (!showFiatOption && (paymentMethod === "card" || paymentMethod === "coinbase")) {
+      setPaymentMethod("crypto");
+    }
+  }, [showFiatOption, paymentMethod]);
 
   // Restore activeOrderId from sessionStorage (handles page refresh / Coinbase return)
   const [activeOrderId, setActiveOrderId] = useState<string | null>(() => {
@@ -186,14 +200,12 @@ export function CheckoutPaymentPanel({
   const accordionButtonClass = (active: boolean) =>
     cn(
       "anyspend-payment-method-btn flex w-full items-center gap-3 px-4 py-4 text-left transition-colors",
-      active
-        ? "bg-white dark:bg-neutral-900"
-        : "bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800",
+      !active && "hover:bg-gray-50 dark:hover:bg-neutral-800",
       classes?.paymentMethodButton,
     );
 
   const expandedPanelClass = cn(
-    "anyspend-payment-method-panel border-t border-gray-100 bg-white px-4 py-4 dark:border-neutral-800 dark:bg-neutral-900",
+    "anyspend-payment-method-panel border-t border-gray-100 px-4 py-4 dark:border-neutral-800",
   );
 
   return (
@@ -261,88 +273,92 @@ export function CheckoutPaymentPanel({
           </AnimatePresence>
         </div>
 
-        {/* Credit or Debit Card */}
-        <div className="anyspend-method-card">
-          <button
-            onClick={() => setPaymentMethod(paymentMethod === "card" ? null : "card")}
-            className={accordionButtonClass(paymentMethod === "card")}
-          >
-            <RadioCircle selected={paymentMethod === "card"} themeColor={themeColor} />
-            <CreditCard className="h-5 w-5 text-gray-700 dark:text-gray-300" />
-            <span className="text-sm font-medium text-gray-900 dark:text-gray-100">Credit or debit card</span>
-            <div className="ml-auto flex items-center gap-1">
-              <VisaLogo />
-              <MastercardLogo />
-              <AmexLogo />
-            </div>
-          </button>
-          <AnimatePresence initial={false}>
-            {paymentMethod === "card" && (
-              <motion.div
-                key="card-panel"
-                initial={{ height: 0, opacity: 0 }}
-                animate={{ height: "auto", opacity: 1 }}
-                exit={{ height: 0, opacity: 0 }}
-                transition={{ duration: 0.2, ease: "easeOut" }}
-                style={{ overflow: "hidden" }}
+        {showFiatOption && (
+          <>
+            {/* Credit or Debit Card */}
+            <div className="anyspend-method-card">
+              <button
+                onClick={() => setPaymentMethod(paymentMethod === "card" ? null : "card")}
+                className={accordionButtonClass(paymentMethod === "card")}
               >
-                <div className={expandedPanelClass}>
-                  <FiatCheckoutPanel
-                    recipientAddress={recipientAddress}
-                    destinationTokenAddress={destinationTokenAddress}
-                    destinationTokenChainId={destinationTokenChainId}
-                    totalAmount={totalAmount}
-                    themeColor={themeColor}
-                    onOrderCreated={handleOrderCreated}
-                    onError={onError}
-                    callbackMetadata={callbackMetadata}
-                    classes={classes}
-                    feeOnTop={feeOnTop}
-                    kycEnabled={kycEnabled}
-                  />
+                <RadioCircle selected={paymentMethod === "card"} themeColor={themeColor} />
+                <CreditCard className="h-5 w-5 text-gray-700 dark:text-gray-300" />
+                <span className="text-sm font-medium text-gray-900 dark:text-gray-100">Credit or debit card</span>
+                <div className="ml-auto flex items-center gap-1">
+                  <VisaLogo />
+                  <MastercardLogo />
+                  <AmexLogo />
                 </div>
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
+              </button>
+              <AnimatePresence initial={false}>
+                {paymentMethod === "card" && (
+                  <motion.div
+                    key="card-panel"
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: "auto", opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.2, ease: "easeOut" }}
+                    style={{ overflow: "hidden" }}
+                  >
+                    <div className={expandedPanelClass}>
+                      <FiatCheckoutPanel
+                        recipientAddress={recipientAddress}
+                        destinationTokenAddress={destinationTokenAddress}
+                        destinationTokenChainId={destinationTokenChainId}
+                        totalAmount={totalAmount}
+                        themeColor={themeColor}
+                        onOrderCreated={handleOrderCreated}
+                        onError={onError}
+                        callbackMetadata={callbackMetadata}
+                        classes={classes}
+                        feeOnTop={feeOnTop}
+                        kycEnabled={kycEnabled}
+                      />
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
 
-        {/* Coinbase Pay */}
-        <div className="anyspend-method-coinbase">
-          <button
-            onClick={() => setPaymentMethod(paymentMethod === "coinbase" ? null : "coinbase")}
-            className={accordionButtonClass(paymentMethod === "coinbase")}
-          >
-            <RadioCircle selected={paymentMethod === "coinbase"} themeColor={themeColor} />
-            <CoinbaseLogo />
-            <span className="text-sm font-medium text-gray-900 dark:text-gray-100">Coinbase Pay</span>
-          </button>
-          <AnimatePresence initial={false}>
-            {paymentMethod === "coinbase" && (
-              <motion.div
-                key="coinbase-panel"
-                initial={{ height: 0, opacity: 0 }}
-                animate={{ height: "auto", opacity: 1 }}
-                exit={{ height: 0, opacity: 0 }}
-                transition={{ duration: 0.2, ease: "easeOut" }}
-                style={{ overflow: "hidden" }}
+            {/* Coinbase Pay */}
+            <div className="anyspend-method-coinbase">
+              <button
+                onClick={() => setPaymentMethod(paymentMethod === "coinbase" ? null : "coinbase")}
+                className={accordionButtonClass(paymentMethod === "coinbase")}
               >
-                <div className={expandedPanelClass}>
-                  <CoinbaseCheckoutPanel
-                    recipientAddress={recipientAddress}
-                    destinationTokenAddress={destinationTokenAddress}
-                    destinationTokenChainId={destinationTokenChainId}
-                    totalAmount={totalAmount}
-                    themeColor={themeColor}
-                    onOrderCreated={handleOrderCreated}
-                    onError={onError}
-                    callbackMetadata={callbackMetadata}
-                    classes={classes}
-                  />
-                </div>
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
+                <RadioCircle selected={paymentMethod === "coinbase"} themeColor={themeColor} />
+                <CoinbaseLogo />
+                <span className="text-sm font-medium text-gray-900 dark:text-gray-100">Coinbase Pay</span>
+              </button>
+              <AnimatePresence initial={false}>
+                {paymentMethod === "coinbase" && (
+                  <motion.div
+                    key="coinbase-panel"
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: "auto", opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.2, ease: "easeOut" }}
+                    style={{ overflow: "hidden" }}
+                  >
+                    <div className={expandedPanelClass}>
+                      <CoinbaseCheckoutPanel
+                        recipientAddress={recipientAddress}
+                        destinationTokenAddress={destinationTokenAddress}
+                        destinationTokenChainId={destinationTokenChainId}
+                        totalAmount={totalAmount}
+                        themeColor={themeColor}
+                        onOrderCreated={handleOrderCreated}
+                        onError={onError}
+                        callbackMetadata={callbackMetadata}
+                        classes={classes}
+                      />
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          </>
+        )}
       </div>
     </div>
   );

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

@@ -1,5 +1,7 @@
 "use client";
 
+import { getExplorerTxUrl } from "@b3dotfun/sdk/anyspend";
+import { b3Viem } from "@b3dotfun/sdk/shared/constants/chains/b3Viem";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { ExternalLink } from "lucide-react";
 import { motion } from "motion/react";
@@ -9,13 +11,21 @@ import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
 
 interface CheckoutSuccessProps {
   txHash?: string;
+  dstChainId?: number;
   orderId?: string;
   returnUrl?: string;
   returnLabel?: string;
   classes?: AnySpendCheckoutClasses;
 }
 
-export function CheckoutSuccess({ txHash, orderId, returnUrl, returnLabel, classes }: CheckoutSuccessProps) {
+export function CheckoutSuccess({
+  txHash,
+  dstChainId,
+  orderId,
+  returnUrl,
+  returnLabel,
+  classes,
+}: CheckoutSuccessProps) {
   const { content, slots } = useAnySpendCustomization();
 
   if (slots.successScreen) {
@@ -29,7 +39,7 @@ export function CheckoutSuccess({ txHash, orderId, returnUrl, returnLabel, class
               : "Your payment has been processed successfully.",
           txHash,
           orderId,
-          explorerUrl: txHash ? `https://explorer.b3.fun/tx/${txHash}` : undefined,
+          explorerUrl: txHash ? getExplorerTxUrl(dstChainId ?? b3Viem.id, txHash) : undefined,
           onDone: () => {
             if (returnUrl) window.location.href = returnUrl;
           },
@@ -69,7 +79,7 @@ export function CheckoutSuccess({ txHash, orderId, returnUrl, returnLabel, class
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ duration: 0.3, delay: 0.5, ease: "easeOut" }}
-          href={`https://explorer.b3.fun/tx/${txHash}`}
+          href={getExplorerTxUrl(dstChainId ?? b3Viem.id, txHash)}
           target="_blank"
           rel="noopener noreferrer"
           className="anyspend-success-tx-link mt-4 flex items-center gap-1.5 text-sm text-blue-600 hover:underline dark:text-blue-400"