Gasless payments

In this guide, we'll enable our users to make gasless payments for their transaction with any ERC-20 token. They don't need to hold ETH for gas fees.

This is perfect for users who don't have ETH or don't want to spend it on gas fees.

Setup

This guide builds on the Pay with any ERC-20 token guide. Make sure you've gone through and implemented that guide first.

Submit transaction via Glide

To enable gasless payments, you need to pass the signTypedDataAsync function to the writeContract method.

If you're using wagmi, you can use the useSignTypedData hook to get the signTypedDataAsync function.

This function is used to let the user sign a message to approve the payment transaction without paying gas fees or making any on-chain transactions.

wagmi

import { payWithGlide, chains, currencies } from "@paywithglide/glide-js";
 
const { address: payerWalletAddress } = useAccount();
const { switchChainAsync } = useSwitchChain();
const { sendTransactionAsync } = useSendTransaction();
const { signTypedDataAsync } = useSignTypedData(); 
 
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.usdc,
 
      chainId: chains.base.id,
      address: "0x1169c6769c4f4b3ca1944af0f26b36582fd5279d",
      abi: subscriptionTokenProtocolAbi,
      functionName: "mintFor",
      args: [payerWalletAddress, 999999907200n],
      value: 999999907200n,
 
      // callback functions to interact with the user's wallet.
      // they are compatible with wagmi.
      switchChainAsync,
      sendTransactionAsync,
      signTypedDataAsync, 
    });
  } catch (e) {
    // handle error
  }
};