Examples

Copy-paste examples for the most common integration patterns. See all of these running live in the SDK demo (Widget Lab).

Cross-chain token swaps

Basic swap interface

tsx
import { AnySpend } from "@b3dotfun/sdk/anyspend/react";

function TokenSwapPage() {
  return (
    <AnySpend
      mode="page"
      recipientAddress={userWalletAddress}
      onSuccess={(txHash) => {
        toast.success("Swap completed!");
        queryClient.invalidateQueries(["user-balances"]);
      }}
    />
  );
}

Swap with custom branding

tsx
import { AnySpend } from "@b3dotfun/sdk/anyspend/react";

function BrandedSwap() {
  return (
    <AnySpend
      mode="page"
      recipientAddress={userAddress}
      theme={{ brandColor: "#6366f1" }}
      content={{
        successTitle: "Exchange Complete!",
        successDescription: "Your tokens have been swapped successfully.",
        returnButtonLabel: "Back to Dashboard",
      }}
      slots={{
        footer: (
          <div className="text-center text-sm text-gray-400 py-3">
            Powered by MyApp
          </div>
        ),
      }}
    />
  );
}

Fixed amount payment

tsx
import { AnySpend } from "@b3dotfun/sdk/anyspend/react";

function FixedPayment() {
  return (
    <AnySpend
      mode="modal"
      destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
      destinationTokenChainId={8453}
      destinationTokenAmount="10000000" // Exactly 10 USDC
      recipientAddress={merchantAddress}
      allowDirectTransfer
      onSuccess={(txHash) => {
        toast.success("Payment received!");
      }}
    />
  );
}

Checkout experiences

E-commerce checkout

tsx
import { AnySpendCheckout } from "@b3dotfun/sdk/anyspend/react";

function StoreCheckout({ cart }) {
  return (
    <AnySpendCheckout
      mode="page"
      recipientAddress="0xMerchantWallet..."
      destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
      destinationTokenChainId={8453}
      items={cart.map((item) => ({
        name: item.name,
        description: item.variant,
        imageUrl: item.imageUrl,
        amount: item.priceWei,
        quantity: item.quantity,
        metadata: {
          Size: item.size,
          Color: item.color,
        },
      }))}
      shipping={{ amount: "2000000", label: "Standard Shipping" }}
      tax={{ amount: "850000", label: "Tax", rate: "8.5%" }}
      discount={{ amount: "5000000", label: "Promo Code", code: "SAVE10" }}
      organizationName="Acme Store"
      organizationLogo="/acme-logo.svg"
      themeColor="#4f46e5"
      onSuccess={(result) => {
        router.push(`/order-confirmation?id=${result.orderId}`);
      }}
      returnUrl="/shop"
      returnLabel="Continue Shopping"
      content={{
        successTitle: "Order Placed!",
        successDescription: "Check your email for shipping confirmation.",
      }}
    />
  );
}

Checkout with forms, shipping, and discounts

tsx
import { AnySpendCheckout } from "@b3dotfun/sdk/anyspend/react";

function FullCheckout({ cart }) {
  return (
    <AnySpendCheckout
      mode="page"
      recipientAddress="0xMerchantWallet..."
      destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
      destinationTokenChainId={8453}
      items={cart}
      organizationName="Acme Store"
      themeColor="#4f46e5"

      // Collect customer info via JSON schema
      formSchema={{
        fields: [
          { id: "email", type: "email", label: "Email", required: true },
          { id: "name", type: "text", label: "Full Name", required: true },
          { id: "shipping", type: "address", label: "Shipping Address", required: true },
        ],
      }}

      // Shipping options
      shippingOptions={[
        { id: "free", name: "Free Shipping", amount: "0", estimated_days: "7-10 business days" },
        { id: "express", name: "Express", amount: "5000000", estimated_days: "2-3 business days" },
      ]}

      // Discount codes
      enableDiscountCode
      validateDiscount={async (code) => {
        const res = await fetch(`/api/discounts/${code}`);
        return res.json();
      }}

      onSuccess={(result) => router.push(`/confirmation?id=${result.orderId}`)}
    />
  );
}

Subscription with workflow trigger

tsx
import { AnySpendCheckoutTrigger } from "@b3dotfun/sdk/anyspend/react";

function SubscriptionCheckout({ plan }) {
  return (
    <AnySpendCheckoutTrigger
      recipientAddress="0xTreasury..."
      destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
      destinationTokenChainId={8453}
      items={[
        {
          name: `${plan.name} Plan`,
          description: `${plan.billingCycle} billing`,
          amount: plan.amountWei,
          quantity: 1,
        },
      ]}
      organizationName="SaaS Co"
      themeColor="#059669"

      // Trigger workflow on successful payment
      workflowId="wf_activate_subscription"
      orgId="org_saas"
      callbackMetadata={{
        inputs: {
          planId: plan.id,
          userId: currentUser.id,
          billingCycle: plan.billingCycle,
        },
      }}

      onSuccess={() => {
        toast.success("Subscription activated!");
        router.push("/dashboard");
      }}
      content={{
        successTitle: `Welcome to ${plan.name}!`,
        successDescription: "Your subscription is now active.",
        returnButtonLabel: "Go to Dashboard",
      }}
    />
  );
}

Deposit flows

Multi-chain deposit

tsx
import { AnySpendDeposit } from "@b3dotfun/sdk/anyspend/react";

function DepositPage() {
  return (
    <AnySpendDeposit
      mode="page"
      recipientAddress={walletAddress}
      destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
      destinationTokenChainId={8453}
      showChainSelection
      supportedChains={[
        { id: 8453, name: "Base" },
        { id: 1, name: "Ethereum" },
        { id: 42161, name: "Arbitrum" },
        { id: 10, name: "Optimism" },
        { id: 137, name: "Polygon" },
      ]}
      chainSelectionTitle="Where are your funds?"
      chainSelectionDescription="Select the chain you want to deposit from"
      onSuccess={(amount) => {
        toast.success(`Deposited ${amount} USDC`);
        queryClient.invalidateQueries(["balance"]);
      }}
    />
  );
}

Custom contract deposit (staking)

tsx
import { AnySpendDeposit } from "@b3dotfun/sdk/anyspend/react";

function StakeDeposit({ stakingContract }) {
  return (
    <AnySpendDeposit
      recipientAddress={stakingContract.address}
      destinationTokenAddress={stakingContract.tokenAddress}
      destinationTokenChainId={8453}
      depositContractConfig={{
        functionAbi: JSON.stringify(stakingContract.abi),
        functionName: "stake",
        functionArgs: ["{{amount_out}}", "30"], // amount placeholder + 30 days
        to: stakingContract.address,
        action: "Stake",
      }}
      isCustomDeposit
      actionLabel="Stake Tokens"
      onSuccess={(amount) => toast.success(`Staked ${amount}!`)}
      content={{
        successTitle: "Staking Successful!",
        successDescription: "Your tokens are now staked. Rewards will accrue daily.",
      }}
    />
  );
}

QR code deposit

tsx
import { QRDeposit } from "@b3dotfun/sdk/anyspend/react";

function QRDepositPage() {
  const usdcToken = {
    chainId: 8453,
    address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
    name: "USD Coin",
    symbol: "USDC",
    decimals: 6,
    metadata: { logoURI: "https://..." },
  };

  return (
    <QRDeposit
      recipientAddress={walletAddress}
      destinationToken={usdcToken}
      destinationChainId={8453}
      onOrderCreated={(orderId) => {
        console.log("Deposit order created:", orderId);
      }}
      onSuccess={(txHash) => {
        toast.success("Deposit received!");
      }}
    />
  );
}

Workflow triggers

Payment-triggered automation

tsx
import { AnySpendWorkflowTrigger } from "@b3dotfun/sdk/anyspend/react";

function WorkflowPayment() {
  return (
    <AnySpendWorkflowTrigger
      recipientAddress="0xServiceWallet..."
      chainId={8453}
      tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
      amount="5000000" // 5 USDC
      workflowId="wf_process_order"
      orgId="org_myapp"
      actionLabel="Pay & Activate"
      callbackMetadata={{
        inputs: {
          action: "activate_premium",
          userId: currentUser.id,
        },
      }}
      onSuccess={(amount) => {
        toast.success("Payment processed! Workflow triggered.");
        router.push("/dashboard");
      }}
    />
  );
}

NFT marketplace

NFT purchase card

tsx
import { AnySpendNFTButton } from "@b3dotfun/sdk/anyspend/react";

function NFTCard({ nft }) {
  const nftContract = {
    chainId: nft.chainId,
    contractAddress: nft.contractAddress,
    price: nft.priceWei,
    priceFormatted: nft.priceFormatted,
    currency: nft.currency,
    name: nft.name,
    description: nft.description,
    imageUrl: nft.imageUrl,
    tokenId: null,
    type: "erc721" as const,
  };

  return (
    <div className="nft-card">
      <img src={nft.imageUrl} alt={nft.name} />
      <h3>{nft.name}</h3>
      <p>{nft.priceFormatted} {nft.currency.symbol}</p>
      <AnySpendNFTButton
        nftContract={nftContract}
        recipientAddress={userAddress}
      />
    </div>
  );
}

Custom smart contract calls

DeFi staking

tsx
import { AnySpendCustom } from "@b3dotfun/sdk/anyspend/react";
import { encodeFunctionData, parseUnits } from "viem";

function StakingPool({ pool }) {
  const [amount, setAmount] = useState("");

  const stakingCalldata = useMemo(() => {
    if (!amount) return "0x";
    return encodeFunctionData({
      abi: stakingPoolABI,
      functionName: "stake",
      args: [parseUnits(amount, pool.token.decimals), 30 * 86400],
    });
  }, [amount]);

  return (
    <div>
      <input
        type="number"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        placeholder="Amount to stake"
      />

      <AnySpendCustom
        orderType="custom"
        dstChainId={pool.chainId}
        dstToken={pool.token}
        dstAmount={parseUnits(amount || "0", pool.token.decimals).toString()}
        contractAddress={pool.contractAddress}
        encodedData={stakingCalldata}
        metadata={{ action: "stake", poolId: pool.id }}
        header={({ anyspendPrice }) => (
          <div>
            <h3>Stake {pool.token.symbol}</h3>
            {anyspendPrice && <p>Cost: ${anyspendPrice.totalUsdCost}</p>}
          </div>
        )}
        onSuccess={() => toast.success("Staked successfully!")}
      />
    </div>
  );
}

Fiat onramp

User onboarding with fiat

tsx
import { AnySpend } from "@b3dotfun/sdk/anyspend/react";

function OnboardingFlow() {
  const [step, setStep] = useState(1);

  return (
    <div>
      {step === 1 && (
        <div>
          <h2>Welcome! Let's get you started</h2>
          <WalletConnectButton onConnect={() => setStep(2)} />
        </div>
      )}

      {step === 2 && (
        <div>
          <h2>Buy your first crypto</h2>
          <AnySpend
            mode="page"
            defaultActiveTab="fiat"
            destinationTokenAddress="0x0000000000000000000000000000000000000000"
            destinationTokenChainId={8453}
            recipientAddress={userAddress}
            customUsdInputValues={["10", "25", "50", "100"]}
            onSuccess={() => {
              setStep(3);
              toast.success("Purchase successful!");
            }}
          />
        </div>
      )}

      {step === 3 && (
        <div>
          <h2>You're all set!</h2>
          <button onClick={() => router.push("/dashboard")}>
            Go to Dashboard
          </button>
        </div>
      )}
    </div>
  );
}

Full customization example

Fully themed checkout

tsx
import { AnySpendCheckout } from "@b3dotfun/sdk/anyspend/react";

function CustomCheckout({ items }) {
  return (
    <AnySpendCheckout
      mode="page"
      recipientAddress="0xMerchant..."
      destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
      destinationTokenChainId={8453}
      items={items}
      organizationName="Premium Shop"
      organizationLogo="/logo.svg"

      // Theme
      theme={{
        brandColor: "#7c3aed",
        colors: {
          surfaceSecondary: "#faf5ff",
        },
      }}

      // Custom messages
      content={{
        successTitle: "Thank you for your purchase!",
        successDescription: "Your receipt has been sent to your email.",
        processingTitle: "Finalizing your order...",
        processingDescription: "This usually takes less than a minute.",
        returnButtonLabel: "Continue Shopping",
        retryButtonLabel: "Try Again",
      }}

      // Custom components
      slots={{
        footer: (
          <div className="flex items-center justify-center gap-2 py-3 text-xs text-gray-400">
            <LockIcon className="w-3 h-3" />
            Secure checkout by Premium Shop
          </div>
        ),
        successScreen: ({ title, description, txHash, onDone }) => (
          <div className="text-center p-8">
            <ConfettiAnimation />
            <h2 className="text-2xl font-bold mt-4">{title}</h2>
            <p className="text-gray-500 mt-2">{description}</p>
            <button onClick={onDone} className="mt-6 btn-primary">
              Continue Shopping
            </button>
          </div>
        ),
      }}

      // CSS overrides
      classes={{
        layout: "max-w-5xl mx-auto",
        cartPanel: "bg-purple-50/50 rounded-2xl",
      }}

      // Order summary
      shipping={{ amount: "0", label: "Free Shipping" }}
      showPoints
      showOrderId

      // Callbacks
      onSuccess={(result) => router.push("/order-confirmation")}
      onError={(error) => toast.error(error.message)}
    />
  );
}

Direct transfer

Same-chain token transfer

tsx
import { useDirectTransfer } from "@b3dotfun/sdk/anyspend";

function SendTokens() {
  const { executeDirectTransfer, isTransferring } = useDirectTransfer();
  const [recipient, setRecipient] = useState("");
  const [amount, setAmount] = useState("");

  const handleSend = async () => {
    const txHash = await executeDirectTransfer({
      chainId: 8453,
      tokenAddress: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
      recipientAddress: recipient,
      amount: BigInt(parseUnits(amount, 6)),
      method: "CONNECT_WALLET",
    });

    if (txHash) {
      toast.success(`Sent! TX: ${txHash.slice(0, 10)}...`);
    }
  };

  return (
    <div>
      <input placeholder="Recipient" value={recipient} onChange={(e) => setRecipient(e.target.value)} />
      <input placeholder="Amount" value={amount} onChange={(e) => setAmount(e.target.value)} />
      <button onClick={handleSend} disabled={isTransferring}>
        {isTransferring ? "Sending..." : "Send USDC"}
      </button>
    </div>
  );
}

Getting help