Accept funds from anywhere

The SDK accepts card, bank transfer, exchange, and wallet funding and normalizes them into a single payment flow. It handles UI, source selection, and execution.

Available funding sources

Source	Description
Bank transfer / ACH	Direct debit from a US bank account via ACH, or wire for international transfers
Debit or credit card	Visa and Mastercard; globally supported
Apple Pay	One-tap funding from the Apple Pay sheet on supported browsers and devices
Exchange account	Fund from a Coinbase, Binance, or Kraken balance directly
Crypto wallet	Any EVM-compatible wallet; any supported token on any supported network

React SDK (recommended)

Install the package and drop the component in:

npm install 0xtrails

import { Fund } from "0xtrails";

function FundButton() {
  return (
    <Fund
      apiKey="YOUR_API_KEY"
      to={{
        recipient: "0xYOUR_PRODUCT_WALLET",
        token: "USDC",
        chain: "polygon",
      }}
      onFundingSuccess={(result) => console.log("Funded:", result)}
    />
  );
}

Default to card or bank funding

Set paymentMethod to open the widget on the fiat tab:

<Fund
  apiKey="YOUR_API_KEY"
  paymentMethod="CREDIT_DEBIT_CARD"
  to={{
    recipient: "0xYOUR_PRODUCT_WALLET",
    token: "USDC",
    chain: "polygon",
  }}
/>

Fund an exact output amount

By default, Fund treats the user’s input as EXACT_INPUT: the customer spends a specific amount and receives whatever that converts to. To guarantee a specific delivered amount instead, set tradeType to EXACT_OUTPUT:

<Fund
  apiKey="YOUR_API_KEY"
  tradeType="EXACT_OUTPUT"
  to={{
    recipient: "0xYOUR_PRODUCT_WALLET",
    token: "USDC",
    chain: "polygon",
    amount: "100",
  }}
/>

Fund directly into a product account

Pass to.calldata to encode a destination action that executes automatically when funds arrive. Use dynamic() wherever the arrived amount should appear in the encoded arguments:

import { Fund, dynamic } from "0xtrails";
import { encodeFunctionData } from "viem";

const calldata = encodeFunctionData({
  abi: VAULT_ABI,
  functionName: "deposit",
  args: [dynamic(), "0xCUSTOMER_ADDRESS"],
});

<Fund
  apiKey="YOUR_API_KEY"
  to={{
    recipient: "0xYOUR_VAULT_CONTRACT",
    token: "USDC",
    chain: "polygon",
    calldata,
  }}
/>

See Dynamic values for details on dynamic() and related placeholders.

Fund component props

Prop	Type	Required	Description
`apiKey`	string	Yes	Your API key
`tradeType`	`"EXACT_INPUT"` \| `"EXACT_OUTPUT"`	No	`EXACT_INPUT` (default) fixes what the user spends; `EXACT_OUTPUT` fixes what they receive
`to.recipient`	string	No	Wallet or contract address to receive funds
`to.token`	string	No	ERC20 symbol or contract address to deliver
`to.chain`	string \| number	No	Destination chain name or ID
`to.amount`	string	Required for `EXACT_OUTPUT`	Exact amount to deliver, in token units
`to.calldata`	string	No	ABI-encoded calldata for a destination action
`paymentMethod`	string	No	Pre-select funding tab: `"CONNECTED_WALLET"`, `"CRYPTO_TRANSFER"`, `"CREDIT_DEBIT_CARD"`, `"EXCHANGE"`
`onFundingStart`	function	No	Called when the user begins the flow
`onFundingSuccess`	function	No	Called on completion
`onFundingError`	function	No	Called on failure

For theming and appearance options, see SDK configuration.

Non-React sites

For pages without React, load the widget via CDN:

<div id="trails-widget"></div>
<script src="https://cdn.trails.build/widget.js"></script>
<script>
  TrailsWidget.init({
    containerId: "trails-widget",
    accessKey: "YOUR_ACCESS_KEY",
    mode: "fund",
    destinationChainId: 137,
    destinationTokenAddress: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359",
    destinationToAddress: "0xYOUR_PRODUCT_WALLET",
  });
</script>

Direct API

For server-side integrations with no frontend component, use the API directly.

import { TrailsApi } from "@0xtrails/api";

const trails = new TrailsApi({
  baseUrl: "https://trails-api.sequence.app/rpc/Trails/",
  accessKey: "YOUR_ACCESS_KEY",
});

// Step 1: get a quote
const { intent, feeOptions } = await trails.quoteIntent({
  ownerAddress: "0xCUSTOMER_WALLET",
  originChainId: 1,
  originTokenAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
  destinationChainId: 137,
  destinationTokenAddress: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359",
  destinationToAddress: "0xYOUR_PRODUCT_WALLET",
  tradeType: "EXACT_INPUT",
  originTokenAmount: "1000000",
});

// Step 2: lock the quote
const { intentId } = await trails.commitIntent({ intent });

// Step 3: execute
await trails.executeIntent({
  intentId,
  depositTransactionHash: "0xTRANSACTION_HASH",
});

For the full intent lifecycle and all endpoints, see the API reference.

Cross-chain

SDK

Trails API Reference

Available funding sources

React SDK (recommended)

Default to card or bank funding

Fund an exact output amount

Fund directly into a product account

Fund component props

Non-React sites

Direct API

​Available funding sources

​React SDK (recommended)

​Default to card or bank funding

​Fund an exact output amount

​Fund directly into a product account

​Fund component props

​Non-React sites

​Direct API

Available funding sources

React SDK (recommended)

Default to card or bank funding

Fund an exact output amount

Fund directly into a product account

Fund component props

Non-React sites

Direct API