Skip to main content
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

PropTypeRequiredDescription
apiKeystringYesYour API key
to.recipientstringYesDestination wallet or contract address
to.tokenstringYesERC20 symbol or address the recipient receives
to.chainstring | numberYesDestination chain
to.amountstringYesExact amount the recipient receives (human-readable)
to.calldatastringNoABI-encoded calldata to execute at the destination
from.tokenstringNoPre-select the sender’s source ERC20
from.currencystringNoPre-select the sender’s source fiat currency (for fiat funding flows)
from.chainstring | numberNoPre-select the sender’s source chain
paymentMethodstringNoPre-select funding method: "CONNECTED_WALLET", "CRYPTO_TRANSFER", "CREDIT_DEBIT_CARD", "EXCHANGE"
onPaymentStartfunctionNoCalled when the user begins the flow
onPaymentSuccessfunctionNoCalled on completion
onPaymentErrorfunctionNoCalled on failure
For appearance and wallet options, see SDK configuration.