Cross-chain transactions
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:
The amount required to be paid by the user to complete the transaction, denominated in the paymentCurrency.
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:
- Switches the user's wallet to the correct chain.
- Triggers the payment transaction using the user's wallet.
- Update Glide with the payment transaction hash.
- Waits for the Glide session to be completed.
- 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:
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.
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
},
});