Skip to content

Cross-chain transactions

Let your users pay for onchain transactions with any token on any chain

Setup

Before you start, make sure you have the following ready:

  • Setup the Glide client using the Installation guide.
  • The contract ABI and the contract address where the transaction will be executed.

Steps

1. Create a session

When the user is ready to make a transaction, create a Glide session for the transaction.

import { createSession, currencies, chains } from "@paywithglide/glide-js";
 
const session = await createSession(glideConfig, {
  // The user's wallet address
  account: "0xc6FfEB1298Eb33Da430d14e5Eb789256ec344625",
 
  // The currency in which the user will pay. Note that this
  // includes the chain on which the payment will be made.
  paymentCurrency: currencies.usdc.on(chains.optimism),
 
  // The transaction details
  chainId: chains.base.id,
  abi: contractAbi,
  address: "0x1169c6769c4F4B3cA1944AF0F26B36582fd5279d",
  functionName: "mintFor",
  args: [...],
  value: 999999907200n,
});

The session object includes useful fields that can be used to display information to the user:

paymentAmount*
number

The amount required to be paid by the user to complete the transaction, denominated in the paymentCurrency.

paymentAmountUSD*
number

The amount required to be paid by the user to complete the transaction, denominated in USD.

Additional, there are metadata fields such as paymentChainName, paymentChainLogoUrl, paymentCurrencySymbol, paymentCurrencyLogoUrl.

See the full list of fields for the session object here.

2. Execute the session

Once the user has reviewed the transaction details and is ready to pay, execute the session to complete the transaction.

import { executeSession } from "@paywithglide/glide-js";
 
const { sponsoredTransactionHash } = await executeSession(glideConfig, {
  // The session object returned in the previous step
  session,
 
  // The user's *current* chain.
  currentChainId: 1,
 
  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
    // return the transaction hash
  },
});

The executeSession action orchestrates the process required to complete the Glide session. More specifically, it:

  1. Switches the user's wallet to the correct chain.
  2. Triggers the payment transaction using the user's wallet.
  3. Update Glide with the payment transaction hash.
  4. Waits for the Glide session to be completed.
  5. Returns a complete session object.

3. Handle errors

The executeSession can throw errors if the user rejects the transaction or if the transaction fails. Here are Glide-specific errors that you should handle:

SessionExpiredError*
Error

The session has expired. You should create a new session and retry the transaction. If the user has already paid, Glide will automatically refund the user.

SponsoredTransactionFailedError*
Error

The transaction has failed. Glide will automatically refund the user.

4. That's it!

The executeSession returns a completed session object. This session contains the sponsoredTransactionHash which is the hash of the transaction that was executed on the user's behalf.

Token approvals

If your transaction spends an ERC-20 token and requires an approval, you can specify the necessary approval amount when creating a session.

The following snippet approves spending of 5 USDC. Your approval amount should match the exact amount required for the transaction. The user will be charged for the full approval amount, regardless of how much is actually spent in the transaction.

const session = await createSession(glideConfig, {
  ...,
  approval: { 
    token: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", // USDC on Base
    amount: 5000000n, // 5 USDC
  }, 
});

Gasless payments

If you want, you can allow your users to pay for the transaction without having to hold any gas token (ex. ETH). To do this, set the preferGaslessPayment field to true when creating the session.

import { createSession, currencies, chains } from "@paywithglide/glide-js";
 
const session = await createSession(glideConfig, {
  ...,
  // Allow gasless payment
  preferGaslessPayment: true, 
  ...,
});

Then, when executing the session, implement the signTypedDataAsync function that will be called by Glide to sign the permit message.

const { sponsoredTransactionHash } = await executeSession(glideConfig, {
  ...,
  signTypedDataAsync: async (data) => { 
    // sign typed data using the user's wallet
    // return the signature
  }, 
});