Skip to main content

​
Pay with Trails

Trails revolutionizes crypto purchases by enabling users to buy NFTs, RWAs, or any other asset using any token a user holds from any supported chain. The payee simply specifies the settlement asset that they would like the payment to be reconciled in or to successfully complete the purchase, for example USDC, ETH, or any other token and the payer can select how they’d like to pay from their aggregated balance. For example, if a user wants to purchase an NFT that is listed in USDC on Arbitrum, Trails will automatically detect the funds the user currently holds in their wallet across all chains, presents those as options to fulfill the payment, and automatically handles any bridging, swapping, or execution logic if necessary to complete the transaction.

​
Use Cases

Pay flows in Trails are modeled as exact output by default. This means the developer simply defines the total amount the payee should receive for the payment and Trails will automatically include any additional fees to successfully fulfill the payment. For example, “I want to receive exactly 1 USDC tokens on the destination chain, so the user will send 1.01 USDC on the origin chain.” Ideal for use cases such as the following:
  • Purchase and/or mint an NFT directly from a marketplace on any chain
  • Use crypto to make a purchase at an ecommerce platform
  • Transfer a specific amount of funds to a user
  • Make an x402 payment in any token from any chain
  • Execute smart contract calls with an attached payment

​
Examples

​
Simple Payment

Basic payment setup - pay exactly 1 USDC to a recipient: 
import { TrailsWidget } from '0xtrails/widget'

export const SimplePayment = () => {
  return (
    <TrailsWidget
      apiKey="YOUR_API_KEY"
      mode="pay"
      toAddress="0x97c4A952b46bEcaD0663f76357d3776ba11566E1"
      toAmount="1"
      toChainId={8453} // Base
      toToken="USDC"
      onCheckoutComplete={({ sessionId }) => {
        console.log('Payment completed:', sessionId)
      }}
    >
      <button className="pay-button">
        Pay 1 USDC
      </button>
    </TrailsWidget>
  )
}

​
Purchasing an NFT on Arbitrum

This example shows how to use the Trails widget to purchase an NFT on Arbitrum, where the user can pay with any token from any chain that automatically gets converted to ETH to fulfill the purchase: 
import { TrailsWidget } from '0xtrails/widget'
import { encodeFunctionData } from 'viem'
import { nftABI } from './abi.ts'

export const CrossChainNFTPurchase = () => {
  // NFT contract address on Arbitrum
  const NFT_CONTRACT = "0xAA3df3c86EdB6aA4D03b75092b4dd0b99515EC83"
  
  // NFT purchase calldata
  const purchaseCalldata = encodeFunctionData({
    abi: nftABI,
    functionName: 'mint',
    args: [
      "0x97c4a952b46becad0663f76357d3776ba11566e1", // recipient address
    ],
  })

  return (
    <TrailsWidget
      apiKey="YOUR_API_KEY"
      mode="pay"
      toAddress={NFT_CONTRACT}
      toAmount="0.00002"
      toChainId={42161} // Arbitrum
      toToken="ETH"
      toCalldata={purchaseCalldata}
      onCheckoutComplete={({ sessionId }) => {
        console.log('NFT purchase completed:', sessionId)
        // Handle successful purchase
      }}
      onCheckoutError={({ sessionId, error }) => {
        console.error('Purchase failed:', sessionId, error)
      }}
      theme="auto"
    >
      <button className="nft-purchase-button">
        Buy NFT (0.00002 ETH)
      </button>
    </TrailsWidget>
  )
}

​
Next Steps

Explore more about configuring and customizing payment flows: