Pay cross-chain

In this guide, we'll enable our users to make a transaction on a smart contract deployed on one chain using tokens on another chain.

We will use a Farcaster Storage Bot contract that lets users subscribe by paying a small fee in ETH. The contract is deployed on Optimism and has the address 0x511372B44231a31527025a3D273C1dc0a83D77aF.

In this guide, we'll show how we can let users pay for this subscription using ETH on Base.

Setup

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

Submit transaction via Glide

index.ts

import { payWithGlide, 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 txHash = await payWithGlide(config, {
      account: payerWalletAddress,
 
      // Optional. Setting this restricts the user to only
      // pay with the specified currency.
      paymentCurrency: currencies.eth,
 
      chainId: chains.optimism.id,
      address: "0x511372B44231a31527025a3D273C1dc0a83D77aF",
      abi: storageBotAbi,
      functionName: "subscribe",
      args: [100, 1], // fid, duration
      value: 1313000000000000n,
 
      // callback functions to interact with the user's wallet.
      // they are compatible with wagmi.
      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
      },
    });
  } 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, 
});

Other chains

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

Currencies

To get the CAIP-19 address for any of the supported tokens, you can use the currencies object:

import { currencies } from "@paywithglide/glide-js";
 
const baseUSDCAddress = currencies.usdc.on(chains.base);
// returns "eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"

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.