Pay component

The Pay component handles exact-output payment flows. You specify the precise amount the recipient receives; the SDK figures out how much the sender needs to send based on their chosen token, chain, and current rates.

Basic usage

import { Pay } from "0xtrails";

<Pay
  apiKey="YOUR_API_KEY"
  to={{
    recipient: "0xMERCHANT_ADDRESS",
    token: "USDC",
    chain: "polygon",
    amount: "49.99",
  }}
  onPaymentSuccess={(result) => console.log("Paid:", result)}
/>

Fund into a contract action

Pass to.calldata to execute a contract call alongside the payment. Use dynamic() in the encoded args wherever the arrived amount should appear:

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

const calldata = encodeFunctionData({
  abi: NFT_ABI,
  functionName: "mint",
  args: [dynamic(), "0xBUYER_ADDRESS"],
});

<Pay
  apiKey="YOUR_API_KEY"
  to={{
    recipient: "0xNFT_CONTRACT",
    token: "ETH",
    chain: "ethereum",
    amount: "0.05",
    calldata,
  }}
/>

Props reference

Prop	Type	Required	Description
`apiKey`	string	Yes	Your API key
`to.recipient`	string	Yes	Destination wallet or contract address
`to.token`	string	Yes	ERC20 symbol or address the recipient receives
`to.chain`	string \| number	Yes	Destination chain
`to.amount`	string	Yes	Exact amount the recipient receives (human-readable)
`to.calldata`	string	No	ABI-encoded calldata to execute at the destination
`from.token`	string	No	Pre-select the sender’s source ERC20
`from.currency`	string	No	Pre-select the sender’s source fiat currency (for fiat funding flows)
`from.chain`	string \| number	No	Pre-select the sender’s source chain
`paymentMethod`	string	No	Pre-select funding method: `"CONNECTED_WALLET"`, `"CRYPTO_TRANSFER"`, `"CREDIT_DEBIT_CARD"`, `"EXCHANGE"`
`onPaymentStart`	function	No	Called when the user begins the flow
`onPaymentSuccess`	function	No	Called on completion
`onPaymentError`	function	No	Called on failure

For appearance and wallet options, see SDK configuration.

Cross-chain

SDK

Trails API Reference

Basic usage

Fund into a contract action

Props reference

​Basic usage

​Fund into a contract action

​Props reference

Basic usage

Fund into a contract action

Props reference