Pay with any ERC-20 token

In this guide, we'll enable our users to mint an ETH-only NFT using USDC. We'll use a sample NFT contract available on Fabric.

Check out the NFT page on Fabric here where it's available to mint on Base
The NFT contract can also be seen in the explorer here

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";
 
// 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({
      account: userWalletAddress,
 
      // Optional. Setting this restricts the user to only
      // pay with the specified currency.
      paymentCurrency: currencies.usdc,
 
      chainId: chains.base.id,
      address: "0x1169c6769c4f4b3ca1944af0f26b36582fd5279d",
      abi: subscriptionTokenProtocolAbi,
      functionName: "mintFor",
      args: [userWalletAddress, 999999907200n],
      value: 999999907200n,
 
      // 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, 
});

Payment currency

In the example above, we're restricting the user to pay with USDC 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.