Components

React components for swaps, checkout, deposits, NFTs, and custom contract calls

All the React components you can drop into your app. Each one handles a different payment pattern. Try them interactively in the SDK demo.

Swaps & Payments

Cross-chain swaps, fiat onramp, direct transfers

Learn More
Checkout

Cart, order summary, forms, shipping, discounts

Learn More
Deposits

Chain selection, custom contracts, QR codes

Learn More

Core components

<AnySpend>

The primary interface component for token-to-token exchanges, fiat onramps, and cross-chain swaps.

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

<AnySpend
  mode="modal"
  defaultActiveTab="crypto"
  destinationTokenAddress="0x..."
  destinationTokenChainId={8453}
  recipientAddress="0x..."
/>;

Props

mode 'modal' | 'page' default: 'modal'

Display as modal overlay or full page

defaultActiveTab 'crypto' | 'fiat' default: 'crypto'

Initial payment method tab

destinationTokenAddress string

Target token contract address

destinationTokenChainId number

Chain ID of destination token

recipientAddress string

Recipient wallet address

sourceChainId number

Pre-select the source chain

loadOrder string

Load and display an existing order by ID

hideTransactionHistoryButton boolean default: false

Hide the transaction history button

hideHeader boolean

Hide the component header

hideBottomNavigation boolean

Hide the bottom navigation bar

onTokenSelect (token: Token, event: { preventDefault: () => void }) => void

Called when a token is selected. Call event.preventDefault() to prevent default token selection behavior.

onSuccess (txHash?: string) => void

Callback fired on successful transaction

customUsdInputValues string[]

Custom fiat input presets (e.g., ["10", "25", "50", "100"])

disableUrlParamManagement boolean

Disable URL parameter syncing for swap configuration

allowDirectTransfer boolean

Enable direct transfers when source and destination token/chain match (skips the swap backend)

destinationTokenAmount string

Fixed destination amount in wei. When set, users cannot change the amount.

senderAddress string

Pre-fill sender address to show token balances before wallet connection

callbackMetadata Record<string, unknown>

Opaque metadata passed through to order callbacks (e.g., workflow form data)

returnToHomeUrl string

URL to redirect to from the "Return to Home" button on the completion screen

customRecipientLabel string

Custom label for the recipient display (e.g., "OBSN Telegram Bot")

returnHomeLabel string

Custom label for the return home button

classes AnySpendClasses

CSS class overrides for specific elements. See Customization.

slots AnySpendSlots

Render function overrides for replaceable UI elements. See Customization.

content AnySpendContent

Text/message overrides for success, error, and processing states. See Customization.

theme AnySpendTheme

Color and theme configuration. See Customization.

Usage examples

tsx
<AnySpend
  mode="page"
  recipientAddress={userWalletAddress}
  onSuccess={(txHash) => console.log("Completed:", txHash)}
/>

tsx
<AnySpend
  defaultActiveTab="fiat"
  destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  destinationTokenChainId={8453}
  recipientAddress={userWalletAddress}
/>

tsx
<AnySpend
  mode="modal"
  destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  destinationTokenChainId={8453}
  destinationTokenAmount="10000000" // 10 USDC
  recipientAddress={merchantAddress}
  allowDirectTransfer
/>

tsx
<AnySpend
  mode="page"
  recipientAddress={userAddress}
  theme={{ brandColor: "#6366f1" }}
  content={{
    successTitle: "Payment Received!",
    successDescription: "Your order is being processed.",
  }}
  slots={{
    footer: <PoweredByYourBrand />,
  }}
/>

<AnySpendDeposit>

A streamlined deposit interface supporting chain selection, crypto/fiat payments, and custom contract deposits.

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

<AnySpendDeposit
  recipientAddress="0x..."
  destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  destinationTokenChainId={8453}
  onSuccess={(amount) => console.log("Deposited:", amount)}
/>;

Props

recipientAddress string required

The wallet address to receive the deposit

destinationTokenAddress string required

Destination token contract address

destinationTokenChainId number required

Destination chain ID

mode 'modal' | 'page' default: 'modal'

Display mode

paymentType 'crypto' | 'fiat'

Force a payment type. If not set, shows chain selection first.

sourceTokenAddress string

Pre-select the source token

sourceTokenChainId number

Pre-select the source chain. If not provided, shows chain selection step.

loadOrder string

Load an existing order by ID

onSuccess (amount: string) => void

Callback when deposit completes successfully

onClose () => void

Callback when the close button is clicked

onTokenSelect (token: Token, event: { preventDefault: () => void }) => void

Called on token selection. Call event.preventDefault() to override default behavior.

onOpenCustomModal () => void

Callback for opening a custom modal (e.g., for special token handling)

orderType 'hype_duel' | 'custom_exact_in' | 'swap' default: 'swap'

Order type for the deposit

depositContractConfig DepositContractConfig

Configuration for depositing to a custom smart contract. Creates a custom_exact_in order that calls the specified contract.

allowDirectTransfer boolean

Allow direct transfers when source and destination match

destinationTokenAmount string

Fixed destination amount in wei

minDestinationAmount number

Minimum destination amount required

preferEoa boolean

Prefer using connected EOA wallet

showChainSelection boolean

Show chain selection step. Defaults to true if sourceTokenChainId is not provided.

supportedChains ChainConfig[]

Custom list of supported chains for chain selection

topChainsCount number default: 3

Number of top chains to show in chain selection

chainSelectionTitle string

Custom title for the chain selection step

chainSelectionDescription string

Custom description for the chain selection step

minPoolSize number default: 1000000

Minimum pool size for filtering tokens

customUsdInputValues string[]

Custom fiat input presets

actionLabel string

Custom label for the action button

header (props: { anyspendPrice, isLoadingAnyspendPrice }) => JSX.Element

Custom header component

mainFooter ReactNode

Custom footer content

returnToHomeUrl string

Redirect URL for the "Return to Home" button

customRecipientLabel string

Custom label for recipient display

returnHomeLabel string

Custom label for the return button

senderAddress string

Pre-fill sender address for token balance display

callbackMetadata Record<string, unknown>

Metadata passed through to order callbacks

isCustomDeposit boolean default: false

When true, uses AnySpendCustomExactIn for custom function deposits

classes AnySpendAllClasses

CSS class overrides. See Customization.

slots AnySpendSlots

Render function overrides. See Customization.

content AnySpendContent

Text/message overrides. See Customization.

theme AnySpendTheme

Theme configuration. See Customization.

DepositContractConfig

Use this to configure custom contract deposits:

typescript
interface DepositContractConfig {
  /** Custom function ABI JSON string */
  functionAbi: string;
  /** The function name to call */
  functionName: string;
  /** Arguments for the function. Use "{{amount_out}}" as a placeholder for the deposit amount */
  functionArgs: string[];
  /** Contract address to deposit to */
  to: string;
  /** Optional spender address if different from contract */
  spenderAddress?: string;
  /** Custom action label (e.g., "Stake", "Deposit") */
  action?: string;
}

ChainConfig

typescript
interface ChainConfig {
  id: number;       // Chain ID
  name: string;     // Display name
  iconUrl?: string; // Optional icon URL
}

Usage examples

tsx
<AnySpendDeposit
  recipientAddress={walletAddress}
  destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  destinationTokenChainId={8453}
  onSuccess={(amount) => toast.success(`Deposited ${amount}`)}
/>

tsx
<AnySpendDeposit
  recipientAddress={contractAddress}
  destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  destinationTokenChainId={8453}
  depositContractConfig={{
    functionAbi: JSON.stringify(stakingAbi),
    functionName: "stake",
    functionArgs: ["{{amount_out}}", "30"],
    to: "0xStakingContract...",
    action: "Stake",
  }}
  isCustomDeposit
  onSuccess={(amount) => toast.success("Staked!")}
/>

tsx
<AnySpendDeposit
  recipientAddress={walletAddress}
  destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  destinationTokenChainId={8453}
  showChainSelection
  supportedChains={[
    { id: 8453, name: "Base" },
    { id: 1, name: "Ethereum" },
    { id: 42161, name: "Arbitrum" },
  ]}
  chainSelectionTitle="Where are your funds?"
  chainSelectionDescription="Select the chain you want to deposit from"
/>

<AnySpendCheckout>

A full-featured checkout component with cart display, order summary, custom forms, shipping selection, discount codes, and multi-payment-method support.

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

<AnySpendCheckout
  recipientAddress="0x..."
  destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  destinationTokenChainId={8453}
  items={[
    { name: "Pro Plan", amount: "10000000", quantity: 1 },
  ]}
  organizationName="Acme Inc"
  onSuccess={(result) => console.log("Paid:", result)}
/>;

For full checkout documentation, see the Checkout Guide.

Props

recipientAddress string required

Payment recipient wallet address

destinationTokenAddress string required

Destination token contract address

destinationTokenChainId number required

Destination chain ID

items CheckoutItem[] required

Line items to display in the cart

mode 'page' | 'embedded' default: 'page'

Display mode

totalAmount string

Override the computed total (in wei). Useful when the total differs from the sum of item amounts.

organizationName string

Merchant/organization name displayed in the checkout header

string

URL for the organization logo

themeColor string

Hex color for theming the checkout (e.g., "#6366f1")

buttonText string

Custom text for the payment button

checkoutSessionId string

Link this checkout to a checkout session for backend tracking

onSuccess (result: { txHash?: string; orderId?: string }) => void

Called on successful payment

onError (error: Error) => void

Called on payment error

returnUrl string

URL to redirect to after payment

returnLabel string

Label for the return button

defaultPaymentMethod PaymentMethod

Which payment method to expand initially

senderAddress string

Pre-fill sender address for token balance display

footer ReactNode | null

Custom footer for the order summary. Pass null to hide the default footer.

showPoints boolean default: false

Show points earned in the order status summary

showOrderId boolean default: false

Show the order ID in the order status summary

shipping string | { amount: string; label?: string }

Shipping cost. String = amount in wei. Object = amount with custom label.

tax string | { amount: string; label?: string; rate?: string }

Tax amount. String = amount in wei. Object = amount with custom label and optional rate display.

discount string | { amount: string; label?: string; code?: string }

Discount amount (displayed as negative). String = amount in wei. Object = amount with label and optional code.

summaryLines CheckoutSummaryLine[]

Additional summary line items (e.g., platform fees, tips, service charges)

formSchema CheckoutFormSchema

JSON schema for collecting customer info. See Checkout Guide.

formComponent React.ComponentType<CheckoutFormComponentProps>

Custom React form component. See Checkout Guide.

onFormSubmit (data: Record<string, unknown>) => void

Called when form data changes

shippingOptions ShippingOption[]

Shipping options displayed as a selector. See Checkout Guide.

collectShippingAddress boolean

Show a shipping address form

onShippingChange (option: ShippingOption) => void

Called when shipping option changes

enableDiscountCode boolean

Show a discount code input

validateDiscount (code: string) => Promise<DiscountResult>

Async discount code validation function

onDiscountApplied (result: DiscountResult) => void

Called when a discount is applied

classes AnySpendCheckoutClasses

CSS class overrides. See Customization.

slots AnySpendSlots

Render function overrides. See Customization.

content AnySpendContent

Text/message overrides. See Customization.

theme AnySpendTheme

Theme configuration. See Customization.

CheckoutItem

typescript
interface CheckoutItem {
  id?: string;
  name: string;
  description?: string;
  imageUrl?: string;
  /** Amount in wei (smallest unit of destination token) */
  amount: string;
  quantity: number;
  /** Custom metadata displayed as label: value pairs */
  metadata?: Record<string, string>;
}

CheckoutSummaryLine

typescript
interface CheckoutSummaryLine {
  /** Display label (e.g., "Platform Fee", "Service Charge") */
  label: string;
  /** Amount in token's smallest unit (wei). Negative values shown as deductions. */
  amount: string;
  /** Optional description or note */
  description?: string;
}

<AnySpendCheckoutTrigger>

Extends AnySpendCheckout with B3 workflow integration. Automatically triggers a workflow on successful payment.

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

<AnySpendCheckoutTrigger
  recipientAddress="0x..."
  destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  destinationTokenChainId={8453}
  items={[{ name: "API Credits", amount: "5000000", quantity: 1 }]}
  workflowId="wf_abc123"
  orgId="org_xyz"
  onSuccess={(result) => console.log("Payment & workflow triggered:", result)}
/>;

Additional Props (beyond AnySpendCheckout)

workflowId string

B3 workflow ID to trigger on successful payment

orgId string

Organization ID that owns the workflow

callbackMetadata object

Metadata merged into the order for workflow access. The inputs field is accessible via {{root.result.inputs.*}} in workflows.

tsx
<AnySpendCheckoutTrigger
  recipientAddress="0x..."
  destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  destinationTokenChainId={8453}
  items={[{ name: "Pro Plan - Monthly", amount: "10000000", quantity: 1 }]}
  workflowId="wf_provision_subscription"
  orgId="org_acme"
  callbackMetadata={{
    inputs: {
      plan: "pro",
      userId: "user_123",
      email: "user@example.com",
    },
  }}
  onSuccess={(result) => {
    console.log("Subscription activated:", result);
  }}
/>

<AnySpendWorkflowTrigger>

A payment component designed specifically for triggering B3 workflows. Requires a fixed payment amount and workflow configuration.

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

<AnySpendWorkflowTrigger
  recipientAddress="0x..."
  chainId={8453}
  tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  amount="5000000"
  workflowId="wf_abc123"
  orgId="org_xyz"
  onSuccess={(amount) => console.log("Workflow triggered with:", amount)}
/>;

Props

recipientAddress string required

Payment recipient address

chainId number required

Destination chain ID

tokenAddress string required

Destination token address

amount string required

Required payment amount in wei

workflowId string required

B3 workflow ID to trigger

orgId string required

Organization ID that owns the workflow

callbackMetadata object

Metadata for workflow access. inputs are accessible via {{root.result.inputs.*}}.

onSuccess (amount: string) => void

Callback when payment succeeds

onClose () => void

Callback when the component is closed

mode 'modal' | 'page'

Display mode

actionLabel string

Custom label for the action button (e.g., "Pay & Activate")

classes AnySpendAllClasses

CSS class overrides

<QRDeposit>

A QR code-based deposit interface that generates a deposit address for users to send funds to.

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

<QRDeposit
  recipientAddress="0x..."
  destinationToken={usdcToken}
  destinationChainId={8453}
  onSuccess={(txHash) => console.log("Deposit received:", txHash)}
/>;

Props

recipientAddress string required

The wallet address to receive the deposit

destinationToken Token required

The destination token to receive

destinationChainId number required

The destination chain ID

mode 'modal' | 'page'

Display mode

sourceToken Token

Source token to deposit (defaults to ETH on Base)

sourceChainId number

Source chain ID (defaults to Base)

creatorAddress string

Creator address for order tracking

depositContractConfig DepositContractConfig

Custom contract execution after deposit

onBack () => void

Callback when back button is clicked

onClose () => void

Callback when close button is clicked

onOrderCreated (orderId: string) => void

Callback when the deposit order is created

onSuccess (txHash?: string) => void

Callback when deposit is completed

classes QRDepositClasses

CSS class overrides

Specialized components

<AnySpendNFTButton>

A streamlined button for NFT purchases with built-in payment handling.

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

<AnySpendNFTButton nftContract={nftContractDetails} recipientAddress="0x..." />;

Props

nftContract NFTContract required

NFT contract configuration object

recipientAddress string required

Wallet address to receive the NFT

NFTContract Interface

typescript
interface NFTContract {
  chainId: number;
  contractAddress: string;
  price: string;           // Price in wei
  priceFormatted: string;  // Human-readable price
  currency: {
    chainId: number;
    address: string;       // 0x0 for native ETH
    name: string;
    symbol: string;
    decimals: number;
    metadata: { logoURI: string };
  };
  name: string;
  description: string;
  imageUrl: string;
  tokenId: number | null;           // null for ERC721
  type: "erc721" | "erc1155";
}

<AnySpendCustom>

Flexible component for custom smart contract interactions, including staking, gaming, and DeFi operations.

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

<AnySpendCustom
  orderType="custom"
  dstChainId={8453}
  dstToken={tokenDetails}
  dstAmount="1000000000000000000"
  contractAddress="0x..."
  encodedData="0x..."
  onSuccess={(txHash) => console.log("Done:", txHash)}
/>;

Props

orderType 'custom' required

Order type identifier

dstChainId number required

Target blockchain network

dstToken Token required

Token used for payment

dstAmount string required

Amount in wei

contractAddress string required

Target smart contract address

encodedData string required

Encoded function call data

spenderAddress string

Token spender address

metadata object

Custom metadata for tracking

header React.ComponentType

Custom header component

onSuccess (txHash?: string) => void

Success callback

<AnySpendNFT>

Enhanced NFT purchase component with marketplace features.

tsx
<AnySpendNFT nftContract={nftDetails} recipientAddress="0x..." />

<AnySpendStakeB3>

Pre-configured component for B3 token staking.

tsx
<AnySpendStakeB3 recipientAddress="0x..." />

<AnySpendBuySpin>

Gaming-specific component for purchasing spin wheel or lottery entries.

tsx
<AnySpendBuySpin recipientAddress="0x..." />

<AnySpendTournament>

Tournament entry payment component.

tsx
<AnySpendTournament recipientAddress="0x..." />

<AnySpendBondKit>

BondKit integration for bonding curve token purchases.

tsx
<AnySpendBondKit recipientAddress="0x..." />

Providers

<AnyspendProvider>

Required provider that wraps all AnySpend components. Manages query client, Stripe redirect handling, and feature flags.

tsx
import { AnyspendProvider } from "@b3dotfun/sdk/anyspend/react";
import { B3Provider } from "@b3dotfun/sdk/global-account/react";
import "@b3dotfun/sdk/index.css";

function App() {
  return (
    <B3Provider theme="light" environment="production" partnerId="your-partner-id">
      <AnyspendProvider>
        {/* Your app components */}
      </AnyspendProvider>
    </B3Provider>
  );
}

Props

children ReactNode required

Child components

featureFlags FeatureFlags

Optional feature flag overrides

Payment method types

typescript
// Crypto payment methods
enum CryptoPaymentMethodType {
  NONE = "NONE",
  CONNECT_WALLET = "CONNECT_WALLET",     // External EOA wallet (MetaMask, etc.)
  GLOBAL_WALLET = "GLOBAL_WALLET",       // B3 smart wallet
  TRANSFER_CRYPTO = "TRANSFER_CRYPTO",   // Direct crypto transfer
}

// Fiat payment methods
enum FiatPaymentMethod {
  NONE = "NONE",
  COINBASE_PAY = "COINBASE_PAY",   // Coinbase onramp
  STRIPE = "STRIPE",               // Stripe redirect flow
  STRIPE_WEB2 = "STRIPE_WEB2",    // Stripe embedded form
}

Next steps

Customization

Customize slots, content, theme, and CSS classes

Learn More
Checkout Guide

Build checkout experiences with order summaries

Learn More
Hooks Reference

React hooks for custom payment flows

Learn More
Previous Checkout sessions
Next Checkout
Ask a question... ⌘I