Components - B3 Docs

AnySpend provides a suite of React components for every payment use case — from simple swaps to full checkout flows with forms and shipping.

Swaps & Payments

Cross-chain swaps, fiat onramp, direct transfers

Checkout

Cart, order summary, forms, shipping, discounts

Deposits

Chain selection, custom contracts, QR codes

Core Components

`<AnySpend>`

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

Basic Usage

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

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

Basic Swap
Fiat Onramp
Fixed Amount
Custom Branding

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

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

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

<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.

Basic Usage

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.

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:

Type Definition

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

Type Definition

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

Usage Examples

Basic Deposit
Custom Contract Deposit
With Chain Selection

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

<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!")}
/>

<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.

Basic Usage

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

organizationLogo

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

Type Definition

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

Type Definition

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.

Basic Usage

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.

With Workflow & Metadata

<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.

Basic Usage

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.

Basic Usage

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.

NFT Purchase Button

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

Type Definition

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.

Custom Contract Interaction

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.

Enhanced NFT Component

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

`<AnySpendStakeB3>`

Pre-configured component for B3 token staking.

B3 Staking

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

`<AnySpendBuySpin>`

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

Spin Wheel Purchase

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

`<AnySpendTournament>`

Tournament entry payment component.

Tournament Entry

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

`<AnySpendBondKit>`

BondKit integration for bonding curve token purchases.

BondKit Purchase

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

Providers

`<AnyspendProvider>`

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

Provider Setup

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

Payment Method Enums

// 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

Checkout Guide

Build checkout experiences with order summaries

Hooks Reference

React hooks for custom payment flows

Getting Started

React

REST API

x402

Token

Advanced

Swaps & Payments

Checkout

Deposits

​Core Components

​<AnySpend>

​Props

​Usage Examples

​<AnySpendDeposit>

​Props

​DepositContractConfig

​ChainConfig

​Usage Examples

​<AnySpendCheckout>

​Props

​CheckoutItem

​CheckoutSummaryLine

​<AnySpendCheckoutTrigger>

​Additional Props (beyond AnySpendCheckout)

​<AnySpendWorkflowTrigger>

​Props

​<QRDeposit>

​Props

​Specialized Components

​<AnySpendNFTButton>

​Props

​NFTContract Interface

​<AnySpendCustom>

​Props

​<AnySpendNFT>

​<AnySpendStakeB3>

​<AnySpendBuySpin>

​<AnySpendTournament>

​<AnySpendBondKit>

​Providers

​<AnyspendProvider>

​Props

​Payment Method Types

​Next Steps

Customization

Checkout Guide

Hooks Reference

Core Components

`<AnySpend>`

Props

Usage Examples

`<AnySpendDeposit>`

Props

DepositContractConfig

ChainConfig

Usage Examples

`<AnySpendCheckout>`

Props

CheckoutItem

CheckoutSummaryLine

`<AnySpendCheckoutTrigger>`

Additional Props (beyond AnySpendCheckout)

`<AnySpendWorkflowTrigger>`

Props

`<QRDeposit>`

Props

Specialized Components

`<AnySpendNFTButton>`

Props

NFTContract Interface

`<AnySpendCustom>`

Props

`<AnySpendNFT>`

`<AnySpendStakeB3>`

`<AnySpendBuySpin>`

`<AnySpendTournament>`

`<AnySpendBondKit>`

Providers

`<AnyspendProvider>`

Props

Payment Method Types

Next Steps