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

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

@@ -0,0 +1,166 @@
+"use client";
+
+import { useTokenData } from "@b3dotfun/sdk/global-account/react";
+import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { useMemo } from "react";
+import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper";
+import type { AnySpendCheckoutClasses } from "../types/classes";
+import type { CheckoutItem } from "./AnySpendCheckout";
+import { CheckoutCartPanel } from "./CheckoutCartPanel";
+import { CheckoutPaymentPanel } from "./CheckoutPaymentPanel";
+import { PoweredByBranding } from "./PoweredByBranding";
+
+export interface AnySpendCheckoutTriggerProps {
+  /** Payment recipient address (hex) */
+  recipientAddress: string;
+  /** Destination token address */
+  destinationTokenAddress: string;
+  /** Destination chain ID */
+  destinationTokenChainId: number;
+  /** Line items to display in the cart (optional — if omitted, only the payment panel is shown) */
+  items?: CheckoutItem[];
+  /** Total amount in wei — required when items are not provided */
+  totalAmount?: string;
+  /** Organization name */
+  organizationName?: string;
+  /** Organization logo URL */
+  organizationLogo?: string;
+  /** Theme color (hex) */
+  themeColor?: string;
+  /** Custom button text */
+  buttonText?: string;
+  /** Workflow ID to trigger on payment */
+  workflowId?: string;
+  /** Organization ID that owns the workflow */
+  orgId?: string;
+  /** Optional callback metadata merged into the order */
+  callbackMetadata?: {
+    /** Passed as trigger result inputs — accessible via {{root.result.inputs.*}} */
+    inputs?: Record<string, unknown>;
+  } & Record<string, unknown>;
+  /** Called on successful payment */
+  onSuccess?: (result: { txHash?: string; orderId?: string }) => void;
+  /** Called on payment error */
+  onError?: (error: Error) => void;
+  /** URL to redirect to after payment */
+  returnUrl?: string;
+  /** Label for the return button */
+  returnLabel?: string;
+  /** Custom class names */
+  classes?: AnySpendCheckoutClasses;
+  /** Display mode — set automatically when used inside B3DynamicModal */
+  mode?: "modal" | "page";
+}
+
+export function AnySpendCheckoutTrigger({
+  recipientAddress,
+  destinationTokenAddress,
+  destinationTokenChainId,
+  items,
+  totalAmount: totalAmountOverride,
+  organizationName,
+  organizationLogo,
+  themeColor,
+  buttonText = "Pay",
+  workflowId,
+  orgId,
+  callbackMetadata,
+  onSuccess,
+  onError,
+  returnUrl,
+  returnLabel,
+  classes,
+}: AnySpendCheckoutTriggerProps) {
+  // Merge workflowId + orgId into callbackMetadata
+  const mergedMetadata = useMemo(() => {
+    if (!workflowId && !orgId && !callbackMetadata) return undefined;
+    return {
+      ...(workflowId ? { workflowId } : {}),
+      ...(orgId ? { orgId } : {}),
+      ...callbackMetadata,
+    };
+  }, [workflowId, orgId, callbackMetadata]);
+
+  // Compute total from items or use override
+  const computedTotal = useMemo(() => {
+    if (totalAmountOverride) return totalAmountOverride;
+    if (!items || items.length === 0) return "0";
+    let total = BigInt(0);
+    for (const item of items) {
+      total += BigInt(item.amount) * BigInt(item.quantity);
+    }
+    return total.toString();
+  }, [items, totalAmountOverride]);
+
+  // Get destination token metadata
+  const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
+  const tokenSymbol = tokenData?.symbol || "";
+  const tokenDecimals = tokenData?.decimals || 18;
+
+  const formattedTotal = useMemo(
+    () => formatTokenAmount(BigInt(computedTotal || "0"), tokenDecimals),
+    [computedTotal, tokenDecimals],
+  );
+
+  const hasItems = items && items.length > 0;
+  const fingerprint = getFingerprintConfig();
+
+  return (
+    <AnySpendFingerprintWrapper fingerprint={fingerprint}>
+      <div className="anyspend-checkout-trigger flex flex-col">
+        {/* Cart summary with items */}
+        {hasItems && (
+          <div className="border-b border-gray-200 p-5 dark:border-gray-700">
+            <CheckoutCartPanel
+              items={items}
+              totalAmount={computedTotal}
+              tokenSymbol={tokenSymbol}
+              tokenDecimals={tokenDecimals}
+              organizationName={organizationName}
+              organizationLogo={organizationLogo}
+              classes={classes}
+            />
+          </div>
+        )}
+
+        {/* Total-only header when no items */}
+        {!hasItems && (
+          <div className="border-b border-gray-200 p-5 dark:border-gray-700">
+            <div className="flex flex-col gap-3">
+              <div className={cn("flex items-center justify-between", classes?.cartSummary)}>
+                <span className="text-base font-semibold text-gray-900 dark:text-gray-100">Total</span>
+                <span className={cn("text-base font-semibold text-gray-900 dark:text-gray-100", classes?.cartTotal)}>
+                  {formattedTotal} {tokenSymbol}
+                </span>
+              </div>
+              <PoweredByBranding
+                organizationName={organizationName}
+                organizationLogo={organizationLogo}
+                classes={classes}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Payment methods */}
+        <div className="p-5">
+          <CheckoutPaymentPanel
+            recipientAddress={recipientAddress}
+            destinationTokenAddress={destinationTokenAddress}
+            destinationTokenChainId={destinationTokenChainId}
+            totalAmount={computedTotal}
+            buttonText={buttonText}
+            themeColor={themeColor}
+            returnUrl={returnUrl}
+            returnLabel={returnLabel}
+            onSuccess={onSuccess}
+            onError={onError}
+            callbackMetadata={mergedMetadata}
+            classes={classes}
+          />
+        </div>
+      </div>
+    </AnySpendFingerprintWrapper>
+  );
+}

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

@@ -0,0 +1,43 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import type { CheckoutItem, AnySpendCheckoutClasses } from "./AnySpendCheckout";
+
+interface CartItemRowProps {
+  item: CheckoutItem;
+  formattedPrice: string;
+  classes?: AnySpendCheckoutClasses;
+}
+
+export function CartItemRow({ item, formattedPrice, classes }: CartItemRowProps) {
+  return (
+    <div className={cn("flex items-start gap-3 py-3", classes?.cartItemRow)}>
+      {item.imageUrl && (
+        <div className={cn("h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-gray-100", classes?.cartItemImage)}>
+          <img src={item.imageUrl} alt={item.name} className="h-full w-full object-cover" />
+        </div>
+      )}
+      <div className="flex min-w-0 flex-1 items-start justify-between">
+        <div className="min-w-0 flex-1">
+          <p className={cn("text-sm font-medium text-gray-900 dark:text-gray-100", classes?.cartItemName)}>
+            {item.name}
+          </p>
+          {item.description && (
+            <p
+              className={cn(
+                "mt-0.5 line-clamp-2 text-xs text-gray-500 dark:text-gray-400",
+                classes?.cartItemDescription,
+              )}
+            >
+              {item.description}
+            </p>
+          )}
+          {item.quantity > 1 && <p className="mt-0.5 text-xs text-gray-400 dark:text-gray-500">Qty: {item.quantity}</p>}
+        </div>
+        <p className={cn("ml-3 text-sm font-medium text-gray-900 dark:text-gray-100", classes?.cartItemPrice)}>
+          {formattedPrice}
+        </p>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,23 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+
+interface CartSummaryProps {
+  total: string;
+  tokenSymbol?: string;
+  classes?: AnySpendCheckoutClasses;
+}
+
+export function CartSummary({ total, tokenSymbol, classes }: CartSummaryProps) {
+  return (
+    <div className={cn("border-t border-gray-200 pt-3 dark:border-gray-700", classes?.cartSummary)}>
+      <div className="flex items-center justify-between">
+        <span className="text-base font-semibold text-gray-900 dark:text-gray-100">Total</span>
+        <span className={cn("text-base font-semibold text-gray-900 dark:text-gray-100", classes?.cartTotal)}>
+          {total} {tokenSymbol}
+        </span>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,60 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
+import { useMemo } from "react";
+import type { CheckoutItem, AnySpendCheckoutClasses } from "./AnySpendCheckout";
+import { CartItemRow } from "./CartItemRow";
+import { CartSummary } from "./CartSummary";
+import { PoweredByBranding } from "./PoweredByBranding";
+
+interface CheckoutCartPanelProps {
+  items: CheckoutItem[];
+  totalAmount: string;
+  tokenSymbol?: string;
+  tokenDecimals?: number;
+  organizationName?: string;
+  organizationLogo?: string;
+  classes?: AnySpendCheckoutClasses;
+}
+
+export function CheckoutCartPanel({
+  items,
+  totalAmount,
+  tokenSymbol = "",
+  tokenDecimals = 18,
+  organizationName,
+  organizationLogo,
+  classes,
+}: CheckoutCartPanelProps) {
+  const formattedTotal = useMemo(
+    () => formatTokenAmount(BigInt(totalAmount), tokenDecimals),
+    [totalAmount, tokenDecimals],
+  );
+
+  return (
+    <div className={cn("anyspend-cart-panel flex flex-col", classes?.cartPanel)}>
+      <h2
+        className={cn(
+          "anyspend-cart-title mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100",
+          classes?.cartTitle,
+        )}
+      >
+        Order Summary
+      </h2>
+
+      <div className="anyspend-cart-items divide-y divide-gray-100 dark:divide-gray-800">
+        {items.map((item, index) => {
+          const itemTotal = BigInt(item.amount) * BigInt(item.quantity);
+          const formattedPrice = `${formatTokenAmount(itemTotal, tokenDecimals)} ${tokenSymbol}`;
+
+          return <CartItemRow key={item.id || index} item={item} formattedPrice={formattedPrice} classes={classes} />;
+        })}
+      </div>
+
+      <CartSummary total={formattedTotal} tokenSymbol={tokenSymbol} classes={classes} />
+
+      <PoweredByBranding organizationName={organizationName} organizationLogo={organizationLogo} classes={classes} />
+    </div>
+  );
+}

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

@@ -0,0 +1,72 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import type { ReactNode } from "react";
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+
+interface CheckoutLayoutProps {
+  mode: "page" | "embedded";
+  paymentPanel: ReactNode;
+  cartPanel: ReactNode;
+  classes?: AnySpendCheckoutClasses;
+}
+
+export function CheckoutLayout({ mode, paymentPanel, cartPanel, classes }: CheckoutLayoutProps) {
+  const rightColumnWidth = mode === "page" ? 380 : 340;
+
+  return (
+    <div
+      className={cn("anyspend-checkout mx-auto w-full", classes?.root)}
+      style={mode === "page" ? { maxWidth: 1100, padding: "2rem 1rem" } : undefined}
+    >
+      {/*
+        Use CSS Grid with inline styles to ensure 2-column layout works
+        regardless of host app's Tailwind configuration.
+        On screens < 768px: single column (cart on top, payment below).
+        On screens >= 768px: two columns (payment left, cart right).
+      */}
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+            .anyspend-checkout-grid {
+              display: grid;
+              gap: 2rem;
+              grid-template-columns: 1fr;
+            }
+            @media (min-width: 768px) {
+              .anyspend-checkout-grid {
+                grid-template-columns: 1fr ${rightColumnWidth}px;
+              }
+              .anyspend-checkout-grid > .anyspend-payment-col { order: 1; }
+              .anyspend-checkout-grid > .anyspend-cart-col { order: 2; }
+            }
+          `,
+        }}
+      />
+      <div className={cn("anyspend-checkout-grid", classes?.layout)}>
+        {/* LEFT: Payment Methods (appears second on mobile, first on desktop) */}
+        <div
+          className={cn(
+            "anyspend-payment-col order-2",
+            "rounded-2xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900",
+            classes?.paymentColumn,
+          )}
+        >
+          {paymentPanel}
+        </div>
+
+        {/* RIGHT: Cart / Invoice (appears first on mobile, second on desktop) */}
+        <div
+          className={cn(
+            "anyspend-cart-col order-1",
+            "rounded-2xl border border-gray-200 bg-gray-50 p-6 dark:border-gray-700 dark:bg-gray-800/50",
+            classes?.cartColumn,
+          )}
+          style={{ position: "sticky", top: 32, alignSelf: "start" }}
+        >
+          {cartPanel}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,320 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { QrCode, Wallet } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useState } from "react";
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+import { CheckoutSuccess } from "./CheckoutSuccess";
+import { CoinbaseCheckoutPanel } from "./CoinbaseCheckoutPanel";
+import { CryptoCheckoutPanel } from "./CryptoCheckoutPanel";
+import { FiatCheckoutPanel } from "./FiatCheckoutPanel";
+import { QRCheckoutPanel } from "./QRCheckoutPanel";
+
+type PaymentMethod = "crypto" | "qr" | "card" | "coinbase";
+
+interface CheckoutPaymentPanelProps {
+  recipientAddress: string;
+  destinationTokenAddress: string;
+  destinationTokenChainId: number;
+  totalAmount: string;
+  buttonText?: string;
+  themeColor?: string;
+  returnUrl?: string;
+  returnLabel?: string;
+  onSuccess?: (result: { txHash?: string; orderId?: string }) => void;
+  onError?: (error: Error) => void;
+  callbackMetadata?: Record<string, unknown>;
+  classes?: AnySpendCheckoutClasses;
+}
+
+function RadioCircle({ selected, themeColor }: { selected: boolean; themeColor?: string }) {
+  return (
+    <div
+      className={cn(
+        "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+        selected ? "border-blue-600" : "border-gray-300 dark:border-gray-600",
+      )}
+      style={selected && themeColor ? { borderColor: themeColor } : undefined}
+    >
+      {selected && (
+        <div
+          className="h-2 w-2 rounded-full bg-blue-600"
+          style={themeColor ? { backgroundColor: themeColor } : undefined}
+        />
+      )}
+    </div>
+  );
+}
+
+/** Card brand logos - all use consistent 32x20 viewBox */
+function VisaLogo() {
+  return (
+    <svg viewBox="0 0 32 20" style={{ width: 32, height: 20 }} aria-label="Visa">
+      <rect width="32" height="20" rx="3" fill="#1A1F71" />
+      <text
+        x="16"
+        y="13.5"
+        textAnchor="middle"
+        fill="white"
+        fontSize="9"
+        fontWeight="bold"
+        fontFamily="sans-serif"
+        fontStyle="italic"
+      >
+        VISA
+      </text>
+    </svg>
+  );
+}
+
+function MastercardLogo() {
+  return (
+    <svg viewBox="0 0 32 20" style={{ width: 32, height: 20 }} aria-label="Mastercard">
+      <rect width="32" height="20" rx="3" fill="#252525" />
+      <circle cx="12.5" cy="10" r="6" fill="#EB001B" />
+      <circle cx="19.5" cy="10" r="6" fill="#F79E1B" />
+      <path d="M16 5.6a6 6 0 0 1 0 8.8 6 6 0 0 1 0-8.8z" fill="#FF5F00" />
+    </svg>
+  );
+}
+
+function AmexLogo() {
+  return (
+    <svg viewBox="0 0 32 20" style={{ width: 32, height: 20 }} aria-label="Amex">
+      <rect width="32" height="20" rx="3" fill="#006FCF" />
+      <text x="16" y="13" textAnchor="middle" fill="white" fontSize="7" fontWeight="bold" fontFamily="sans-serif">
+        AMEX
+      </text>
+    </svg>
+  );
+}
+
+/** Coinbase mark */
+function CoinbaseLogo() {
+  return (
+    <svg viewBox="0 0 24 24" style={{ width: 20, height: 20 }} aria-label="Coinbase">
+      <circle cx="12" cy="12" r="12" fill="#0052FF" />
+      <path
+        d="M12 4.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm-1.8 4.8h3.6c.33 0 .6.27.6.6v4.2c0 .33-.27.6-.6.6h-3.6a.6.6 0 0 1-.6-.6V9.9c0-.33.27-.6.6-.6z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export function CheckoutPaymentPanel({
+  recipientAddress,
+  destinationTokenAddress,
+  destinationTokenChainId,
+  totalAmount,
+  buttonText,
+  themeColor,
+  returnUrl,
+  returnLabel,
+  onSuccess,
+  onError,
+  callbackMetadata,
+  classes,
+}: CheckoutPaymentPanelProps) {
+  const [paymentMethod, setPaymentMethod] = useState<PaymentMethod>("crypto");
+  const [paymentResult, setPaymentResult] = useState<{ txHash?: string; orderId?: string } | null>(null);
+
+  const handleSuccess = (result: { txHash?: string; orderId?: string }) => {
+    setPaymentResult(result);
+    onSuccess?.(result);
+  };
+
+  if (paymentResult) {
+    return (
+      <CheckoutSuccess
+        txHash={paymentResult.txHash}
+        orderId={paymentResult.orderId}
+        returnUrl={returnUrl}
+        returnLabel={returnLabel}
+        classes={classes}
+      />
+    );
+  }
+
+  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-gray-900" : "bg-white hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800",
+      classes?.paymentMethodButton,
+    );
+
+  const expandedPanelClass = cn(
+    "anyspend-payment-method-panel border-t border-gray-100 bg-white px-4 py-4 dark:border-gray-800 dark:bg-gray-900",
+  );
+
+  return (
+    <div className={cn("anyspend-payment-panel flex flex-col gap-5", classes?.paymentPanel)}>
+      <h2
+        className={cn(
+          "anyspend-payment-title text-lg font-semibold text-gray-900 dark:text-gray-100",
+          classes?.paymentTitle,
+        )}
+      >
+        Payment
+      </h2>
+
+      {/* Accordion-style payment methods */}
+      <div
+        className={cn(
+          "anyspend-payment-methods divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 dark:divide-gray-700 dark:border-gray-700",
+          classes?.paymentMethodSelector,
+        )}
+      >
+        {/* Crypto Wallet */}
+        <div className="anyspend-method-crypto">
+          <button
+            onClick={() => setPaymentMethod("crypto")}
+            className={accordionButtonClass(paymentMethod === "crypto")}
+          >
+            <RadioCircle selected={paymentMethod === "crypto"} themeColor={themeColor} />
+            <Wallet 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">Crypto wallet</span>
+          </button>
+          <AnimatePresence initial={false}>
+            {paymentMethod === "crypto" && (
+              <motion.div
+                key="crypto-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}>
+                  <CryptoCheckoutPanel
+                    recipientAddress={recipientAddress}
+                    destinationTokenAddress={destinationTokenAddress}
+                    destinationTokenChainId={destinationTokenChainId}
+                    totalAmount={totalAmount}
+                    buttonText={buttonText}
+                    themeColor={themeColor}
+                    onSuccess={handleSuccess}
+                    onError={onError}
+                    callbackMetadata={callbackMetadata}
+                    classes={classes}
+                  />
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+
+        {/* QR Code */}
+        <div className="anyspend-method-qr">
+          <button onClick={() => setPaymentMethod("qr")} className={accordionButtonClass(paymentMethod === "qr")}>
+            <RadioCircle selected={paymentMethod === "qr"} themeColor={themeColor} />
+            <QrCode 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">QR code</span>
+          </button>
+          <AnimatePresence initial={false}>
+            {paymentMethod === "qr" && (
+              <motion.div
+                key="qr-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}>
+                  <QRCheckoutPanel
+                    recipientAddress={recipientAddress}
+                    destinationTokenAddress={destinationTokenAddress}
+                    destinationTokenChainId={destinationTokenChainId}
+                    totalAmount={totalAmount}
+                    themeColor={themeColor}
+                    onSuccess={handleSuccess}
+                    onError={onError}
+                    callbackMetadata={callbackMetadata}
+                    classes={classes}
+                  />
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+
+        {/* Credit or Debit Card */}
+        <div className="anyspend-method-card">
+          <button onClick={() => setPaymentMethod("card")} className={accordionButtonClass(paymentMethod === "card")}>
+            <RadioCircle selected={paymentMethod === "card"} themeColor={themeColor} />
+            <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" }}
+              >
+                <div className={expandedPanelClass}>
+                  <FiatCheckoutPanel
+                    recipientAddress={recipientAddress}
+                    destinationTokenAddress={destinationTokenAddress}
+                    destinationTokenChainId={destinationTokenChainId}
+                    totalAmount={totalAmount}
+                    themeColor={themeColor}
+                    onSuccess={handleSuccess}
+                    onError={onError}
+                    classes={classes}
+                  />
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+
+        {/* Coinbase Pay */}
+        <div className="anyspend-method-coinbase">
+          <button
+            onClick={() => setPaymentMethod("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" }}
+              >
+                <div className={expandedPanelClass}>
+                  <CoinbaseCheckoutPanel
+                    recipientAddress={recipientAddress}
+                    destinationTokenAddress={destinationTokenAddress}
+                    destinationTokenChainId={destinationTokenChainId}
+                    totalAmount={totalAmount}
+                    themeColor={themeColor}
+                    onSuccess={handleSuccess}
+                    onError={onError}
+                    classes={classes}
+                  />
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
+    </div>
+  );
+}