Peer to peer payment with any token

In this guide, we'll enable our users to send any token on any chain. The user can pay with any token they have in their wallet.

Setup

Before you start, make sure you setup the Glide client using the Installation guide.

Submit transaction via Glide

Let's say a user would like to send 100 USDC to their friend on Base but only has ETH on Optimism, the transaction for quote would be a USDC transfer on Base.

index.ts

import { createSession, executeSession chains, currencies } from "@paywithglide/glide-js";
import { config } from "./config";
 
// If using wagmi, you can get the user's connected wallet address
// using:
// const { address } = useAccount();
const userWalletAddress = "<user's connected wallet address>";
 
const submitTransaction = async () => {
  try {
    const session = await createSession(config, {
      account: userWalletAddress,
 
      // Optional. Setting this restricts the user to only
      // pay with the specified currency.
      paymentCurrency: currencies.eth.on(chains.optimism),
 
      chainId: chains.base.id,
      address: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
      abi: erc20ABI,
      functionName: "transfer",
      args: [recipientAddress, 100000000n],
    });
 
    const { fulfillmentTransactionHash } = await executeSession(glideConfig, {
      session,
      currentChainId: chains.optimism.id,
    
      switchChainAsync: async (chainId) => {
        // switch current chain to chainId on the user's wallet
      },
      sendTransactionAsync: async (tx) => {
        // send tx to the chain using the user's wallet
      },
      signTypedDataAsync: async (data) => {
        // sign typed data using the user's wallet
        // return the signature
      },
    });
  } catch (e) {
    // handle error
  }
};

Using wagmi?

If you're using wagmi, use the following code snippet:

const currentChainId = useChainId(); 
const { switchChainAsync } = useSwitchChain(); 
const { sendTransactionAsync } = useSendTransaction(); 
const { signTypedDataAsync } = useSignTypedData(); 
 
const transactionHash = await executeSession(config, {
  session,
  currentChainId, 
  switchChainAsync, 
  sendTransactionAsync, 
  signTypedDataAsync, 
});

Payment currency

In the example above, we're restricting the user to pay with ETH on Optimism. If you want to allow the user to pay with any other token, you can use its CAIP-19 address.

List payment options

Instead of hardcoding a payment currency, you can also list all the supported payment options for the user to choose from. Use the listPaymentOptions action to get the list of supported payment options specific to the user's wallet and the transaction.