> ## Documentation Index
> Fetch the complete documentation index at: https://docs.anyspend.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://sdk-demo.anyspend.com/).

**[Swaps & Payments](#anyspend)**

Cross-chain swaps, fiat onramp, direct transfers
**[Checkout](#anyspendcheckout)**

Cart, order summary, forms, shipping, discounts
**[Deposits](#anyspenddeposit)**

Chain selection, custom contracts, QR codes

---

## Core components

### `<AnySpend>`

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

```tsx title="Basic Usage" icon="react"
import { AnySpend } from "@b3dotfun/sdk/anyspend/react";

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

#### Props

Display as modal overlay or full page

Initial payment method tab

Target token contract address

Chain ID of destination token

Recipient wallet address

Pre-select the source chain

Load and display an existing order by ID

Hide the transaction history button

Hide the component header

Hide the bottom navigation bar

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

Callback fired on successful transaction

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

Disable URL parameter syncing for swap configuration

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

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

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

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

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

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

Custom label for the return home button

CSS class overrides for specific elements. See [Customization](/anyspend/customization#css-class-overrides).

Render function overrides for replaceable UI elements. See [Customization](/anyspend/customization#slots).

Text/message overrides for success, error, and processing states. See [Customization](/anyspend/customization#content).

Color and theme configuration. See [Customization](/anyspend/customization#theme).

#### Usage examples

**Basic Swap**

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

**Fiat Onramp**

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

**Fixed Amount**

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

**Custom Branding**

```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 title="Basic Usage" icon="arrow-down"
import { AnySpendDeposit } from "@b3dotfun/sdk/anyspend/react";

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

#### Props

The wallet address to receive the deposit

Destination token contract address

Destination chain ID

Display mode

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

Pre-select the source token

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

Load an existing order by ID

Callback when deposit completes successfully

Callback when the close button is clicked

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

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

Order type for the deposit

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

Allow direct transfers when source and destination match

Fixed destination amount in wei

Minimum destination amount required

Prefer using connected EOA wallet

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

Custom list of supported chains for chain selection

Number of top chains to show in chain selection

Custom title for the chain selection step

Custom description for the chain selection step


Custom fiat input presets

Custom label for the action button

Custom header component

Custom footer content

Redirect URL for the "Return to Home" button

Custom label for recipient display

Custom label for the return button

Pre-fill sender address for token balance display

Metadata passed through to order callbacks

When true, uses `AnySpendCustomExactIn` for custom function deposits

CSS class overrides. See [Customization](/anyspend/customization#css-class-overrides).

Render function overrides. See [Customization](/anyspend/customization#slots).

Text/message overrides. See [Customization](/anyspend/customization#content).

Theme configuration. See [Customization](/anyspend/customization#theme).

#### DepositContractConfig

Use this to configure custom contract deposits:

```typescript title="Type Definition" icon="code"
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 title="Type Definition" icon="code"
interface ChainConfig {
  id: number;       // Chain ID
  name: string;     // Display name
  iconUrl?: string; // Optional icon URL
}
```

#### Usage examples

**Basic Deposit**

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

**Custom Contract Deposit**

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

**With Chain Selection**

```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 title="Basic Usage" icon="cart-shopping"
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](/anyspend/checkout).

#### Props

Payment recipient wallet address

Destination token contract address

Destination chain ID

Line items to display in the cart

Display mode

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

Merchant/organization name displayed in the checkout header

URL for the organization logo

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

Custom text for the payment button

Link this checkout to a checkout session for backend tracking

Called on successful payment

Called on payment error

URL to redirect to after payment

Label for the return button

Which payment method to expand initially

Pre-fill sender address for token balance display

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

Show points earned in the order status summary

Show the order ID in the order status summary

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

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

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

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

JSON schema for collecting customer info. See [Checkout Guide](/anyspend/checkout#custom-forms).

Custom React form component. See [Checkout Guide](/anyspend/checkout#custom-forms).

Called when form data changes

Shipping options displayed as a selector. See [Checkout Guide](/anyspend/checkout#shipping-options).

Show a shipping address form

Called when shipping option changes

Show a discount code input

Async discount code validation function

Called when a discount is applied

CSS class overrides. See [Customization](/anyspend/customization#css-class-overrides).

Render function overrides. See [Customization](/anyspend/customization#slots).

Text/message overrides. See [Customization](/anyspend/customization#content).

Theme configuration. See [Customization](/anyspend/customization#theme).

#### CheckoutItem

```typescript title="Type Definition" icon="code"
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 title="Type Definition" icon="code"
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 title="Basic Usage" icon="bolt"
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)

B3 workflow ID to trigger on successful payment

Organization ID that owns the workflow

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

```tsx title="With Workflow & Metadata" icon="bolt"
<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 title="Basic Usage" icon="diagram-project"
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

Payment recipient address

Destination chain ID

Destination token address

Required payment amount in wei

B3 workflow ID to trigger

Organization ID that owns the workflow

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

Callback when payment succeeds

Callback when the component is closed

Display mode

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

CSS class overrides

---

### `<QRDeposit>`

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

```tsx title="Basic Usage" icon="qrcode"
import { QRDeposit } from "@b3dotfun/sdk/anyspend/react";

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

#### Props

The wallet address to receive the deposit

The destination token to receive

The destination chain ID

Display mode

Source token to deposit (defaults to ETH on Base)

Source chain ID (defaults to Base)

Creator address for order tracking

Custom contract execution after deposit

Callback when back button is clicked

Callback when close button is clicked

Callback when the deposit order is created

Callback when deposit is completed

CSS class overrides

---

## Specialized components

### `<AnySpendNFTButton>`

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

```tsx title="NFT Purchase Button" icon="cart-shopping"
import { AnySpendNFTButton } from "@b3dotfun/sdk/anyspend/react";

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

#### Props

NFT contract configuration object

Wallet address to receive the NFT

#### NFTContract Interface

```typescript title="Type Definition" icon="code"
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 title="Custom Contract Interaction" icon="code"
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

Order type identifier

Target blockchain network

Token used for payment

Amount in wei

Target smart contract address

Encoded function call data

Token spender address

Custom metadata for tracking

Custom header component

Success callback

---

### `<AnySpendNFT>`

Enhanced NFT purchase component with marketplace features.

```tsx title="Enhanced NFT Component" icon="image"
<AnySpendNFT nftContract={nftDetails} recipientAddress="0x..." />
```

### `<AnySpendStakeB3>`

Pre-configured component for B3 token staking.

```tsx title="B3 Staking" icon="coins"
<AnySpendStakeB3 recipientAddress="0x..." />
```

### `<AnySpendBuySpin>`

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

```tsx title="Spin Wheel Purchase" icon="gamepad"
<AnySpendBuySpin recipientAddress="0x..." />
```

### `<AnySpendTournament>`

Tournament entry payment component.

```tsx title="Tournament Entry" icon="trophy"
<AnySpendTournament recipientAddress="0x..." />
```

### `<AnySpendBondKit>`

BondKit integration for bonding curve token purchases.

```tsx title="BondKit Purchase" icon="chart-line"
<AnySpendBondKit recipientAddress="0x..." />
```

---

## Providers

### `<AnyspendProvider>`

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

```tsx title="Provider Setup" icon="layer-group"
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

Child components

Optional feature flag overrides

---

## Payment method types

```typescript title="Payment Method Enums" icon="code"
// 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](/anyspend/customization)**

Customize slots, content, theme, and CSS classes

**[Checkout Guide](/anyspend/checkout)**

Build checkout experiences with order summaries

**[Hooks Reference](/anyspend/hooks)**

React hooks for custom payment flows