​
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. In addition, the payee can specify 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. 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

  • Purchase & mint an NFT directly from a marketplace on any chain
  • Use crypto to make a purchase at an ecommerce platform
  • Buy an onchain token representing a real-world asset (RWA)
  • Execute smart contract calls with payment

​
Enhanced User Experience for NFT Marketplaces

By integrating Trails, merchants dramatically reduce friction for buyers who would otherwise need to:
  • Bridge tokens manually to the target chain
  • Swap to the required payment token
  • Pay multiple gas fees across different networks
  • Wait for bridge confirmations
Instead, users can directly take an action using their existing token balances from any supported chain.

​
Examples

​
Simple Payment

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

export const SimplePayment = () => {
  return (
    <TrailsWidget
      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
      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>
  )
}