Pay Fees in Any Stablecoin

Configure users to pay transaction fees in any supported stablecoin. Tempo's flexible fee system allows users to pay fees with the same token they're using, eliminating the need to hold a separate gas token.

Demo

By the end of this guide you will be able to pay fees in any stablecoin on Tempo.

Pay Fees in Any Stablecoin

demo

Create an account, or use an existing one.

Add testnet funds to your account.

Send 100 AlphaUSD and pay fees in another token.

Quick Snippet

Using a custom fee token is as simple as passing a feeToken attribute to mutable actions like useTransferSync, useSendTransactionSync, and more.

import { Hooks } from 'tempo.ts/wagmi'
import { parseUnits } from 'viem'
 
const alphaUsd = '0x20c0000000000000000000000000000000000001'
const betaUsd = '0x20c0000000000000000000000000000000000002'
 
const sendPayment = Hooks.token.useTransferSync()
 
sendPayment.mutate({ 
  amount: parseUnits('100', 6), 
  feeToken: betaUsd, 
  to: '0x0000000000000000000000000000000000000000', 
  token: alphaUsd, 
})

Steps

Set up Wagmi & integrate accounts

Ensure that you have set up your project with Wagmi and integrated accounts by following either of the guides:

Add testnet funds¹

Before you can pay fees in a token of your choice, you need to fund your account. In this guide you will be sending AlphaUSD (0x20c000…0001) and paying fees in BetaUSD (0x20c000…0002).

The built-in Tempo testnet faucet includes AlphaUSD and BetaUSD when funding.

Add Funds

Add testnet funds to your account.

AddFunds.ts

import { Hooks } from 'tempo.ts/wagmi'
import { useConnection } from 'wagmi'
 
function AddFunds() {
  const { address } = useConnection()
  const { mutate, isPending } = Hooks.faucet.useFundSync()
 
  return (
    <button onClick={() => mutate({ account: address })} disabled={isPending}>
      Add Funds
    </button>
  )
}

Add pay with fee token logic

Now that you have AlphaUSD to send and BetaUSD to pay fees with, you can add a form that allows users to select a fee token and send a payment.

After this step, your users can send payments with a specified fee token by clicking the "Send Payment" button!

Pay Fees in Any Stablecoin

demo

Add testnet funds to your account.

Send 100 AlphaUSD and pay fees in another token.

PayWithFeeToken.tsx

import { Hooks } from 'tempo.ts/wagmi'
import { parseUnits } from 'viem'
 
const alphaUsd = '0x20c0000000000000000000000000000000000001'
const betaUsd = '0x20c0000000000000000000000000000000000002'
 
function PayWithFeeToken() {
  const sendPayment = Hooks.token.useTransferSync()
  const metadata = Hooks.token.useGetMetadata({
    token: alphaUsd,
  })
 
  return (
    <form onSubmit={
      (event) => {
        event.preventDefault()
        const formData = new FormData(event.target as HTMLFormElement)
 
        const recipient = (formData.get('recipient') ||
          '0x0000000000000000000000000000000000000000') as `0x${string}`
        const feeToken = (formData.get('feeToken') ||
          alphaUsd) as `0x${string}`
 
        sendPayment.mutate({ 
          amount: parseUnits('100', metadata.data?.decimals ?? 6), 
          to: recipient, 
          token: alphaUsd, 
          feeToken: feeToken, 
        }) 
      }
    }>
      <div>
        <label htmlFor="recipient">Recipient address</label>
        <input type="text" name="recipient" placeholder="0x..." />
      </div>
      <div>
        <label htmlFor="feeToken">Fee token</label>
        <select name="feeToken">
          <option value={alphaUsd}>AlphaUSD</option>
          <option value={betaUsd}>BetaUSD</option>
        </select>
      </div>
      <button type="submit" disabled={sendPayment.isPending}>
        Send Payment
      </button>
    </form>
  )
}

Display a receipt

Now that users can send payments with a specified fee token, you can link to the transaction receipt.

PayWithFeeToken.tsx

import { Hooks } from 'tempo.ts/wagmi'
import { parseUnits } from 'viem'
 
const alphaUsd = '0x20c0000000000000000000000000000000000001'
const betaUsd = '0x20c0000000000000000000000000000000000002'
 
function PayWithFeeToken() {
  const sendPayment = Hooks.token.useTransferSync()
  const metadata = Hooks.token.useGetMetadata({
    token: alphaUsd,
  })
 
  return (
    <>
      {/* ... your payment form ... */}
      {sendPayment.data && ( 
        <a href={`https://explore.tempo.xyz/tx/${sendPayment.data.receipt.transactionHash}`}> 
          View receipt 
        </a> 
      )}
    </>
  )
}

Next steps

Now that you have made a payment using a desired fee token, you can:

Follow a guide on how to sponsor user fees to enable gasless transactions
Learn more about transaction fees

Learning Resources

Transaction Fees

Learn more about transaction fees on Tempo