Components - B3 Docs

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

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

'modal' | 'page'

default:"'modal'"

Display as modal overlay or full page

'crypto' | 'fiat'

default:"'crypto'"

Initial payment method tab

string

Target token contract address

number

Chain ID of destination token

string

Recipient wallet address

number

Pre-select the source chain

string

Load and display an existing order by ID

boolean

default:"false"

Hide the transaction history button

boolean

Hide the component header

Hide the bottom navigation bar

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

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

(txHash?: string) => void

Callback fired on successful transaction

string[]

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

boolean

Disable URL parameter syncing for swap configuration

boolean

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

string

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

string

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

Record<string, unknown>

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

string

URL to redirect to from the “Return to Home” button on the completion screen

string

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

string

Custom label for the return home button

AnySpendClasses

CSS class overrides for specific elements. See Customization.

AnySpendSlots

Render function overrides for replaceable UI elements. See Customization.

AnySpendContent

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

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

string

required

The wallet address to receive the deposit

string

required

Destination token contract address

number

required

Destination chain ID

'modal' | 'page'

default:"'modal'"

Display mode

'crypto' | 'fiat'

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

string

Pre-select the source token

number

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

string

Load an existing order by ID

(amount: string) => void

Callback when deposit completes successfully

() => void

Callback when the close button is clicked

(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)

'hype_duel' | 'custom_exact_in' | 'swap'

default:"'swap'"

Order type for the deposit

DepositContractConfig

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

boolean

Allow direct transfers when source and destination match

string

Fixed destination amount in wei

number

Minimum destination amount required

boolean

Prefer using connected EOA wallet

boolean

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

ChainConfig[]

Custom list of supported chains for chain selection

number

default:"3"

Number of top chains to show in chain selection

string

Custom title for the chain selection step

string

Custom description for the chain selection step

number

default:"1000000"

Minimum pool size for filtering tokens

string[]

Custom fiat input presets

string

Custom label for the action button

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

Custom header component

ReactNode

Custom footer content

string

Redirect URL for the “Return to Home” button

string

Custom label for recipient display

string

Custom label for the return button

string

Pre-fill sender address for token balance display

Record<string, unknown>

Metadata passed through to order callbacks

boolean

default:"false"

When true, uses AnySpendCustomExactIn for custom function deposits

AnySpendAllClasses

CSS class overrides. See Customization.

AnySpendSlots

Render function overrides. See Customization.

AnySpendContent

Text/message overrides. See Customization.

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

string

required

Payment recipient wallet address

string

required

Destination token contract address

number

required

Destination chain ID

CheckoutItem[]

required

Line items to display in the cart

'page' | 'embedded'

default:"'page'"

Display mode

string

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

string

Merchant/organization name displayed in the checkout header

string

URL for the organization logo

string

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

string

Custom text for the payment button

string

Link this checkout to a checkout session for backend tracking

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

Called on successful payment

(error: Error) => void

Called on payment error

string

URL to redirect to after payment

string

Label for the return button

PaymentMethod

Which payment method to expand initially

string

Pre-fill sender address for token balance display

ReactNode | null

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

boolean

default:"false"

Show points earned in the order status summary

boolean

default:"false"

Show the order ID in the order status summary

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

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

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

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

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

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

CheckoutSummaryLine[]

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

CheckoutFormSchema

JSON schema for collecting customer info. See Checkout Guide.

React.ComponentType<CheckoutFormComponentProps>

Custom React form component. See Checkout Guide.

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

Called when form data changes

ShippingOption[]

Shipping options displayed as a selector. See Checkout Guide.

boolean

Show a shipping address form

(option: ShippingOption) => void

Called when shipping option changes

boolean

Show a discount code input

(code: string) => Promise<DiscountResult>

Async discount code validation function

(result: DiscountResult) => void

Called when a discount is applied

AnySpendCheckoutClasses

CSS class overrides. See Customization.

AnySpendSlots

Render function overrides. See Customization.

AnySpendContent

Text/message overrides. See Customization.

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)

string

B3 workflow ID to trigger on successful payment

string

Organization ID that owns the workflow

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

string

required

Payment recipient address

number

required

Destination chain ID

string

required

Destination token address

string

required

Required payment amount in wei

string

required

B3 workflow ID to trigger

string

required

Organization ID that owns the workflow

object

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

(amount: string) => void

Callback when payment succeeds

() => void

Callback when the component is closed

'modal' | 'page'

Display mode

string

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

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

string

required

The wallet address to receive the deposit

Token

required

The destination token to receive

number

required

The destination chain ID

'modal' | 'page'

Display mode

Token

Source token to deposit (defaults to ETH on Base)

number

Source chain ID (defaults to Base)

string

Creator address for order tracking

DepositContractConfig

Custom contract execution after deposit

() => void

Callback when back button is clicked

() => void

Callback when close button is clicked

(orderId: string) => void

Callback when the deposit order is created

(txHash?: string) => void

Callback when deposit is completed

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

required

NFT contract configuration object

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

'custom'

required

Order type identifier

number

required

Target blockchain network

Token

required

Token used for payment

string

required

Amount in wei

string

required

Target smart contract address

string

required

Encoded function call data

string

Token spender address

object

Custom metadata for tracking

React.ComponentType

Custom header component

(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

ReactNode

required

Child components

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

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