Skip to main content

Support other wallets

The Checkout widgets allow for other wallets/providers to be used by passing in a Web3Provider (used with the ethers js library). This integration allows to utilise wallets that aren't part of the supported wallets (e.g. Rainbow).

💡Supported wallets
Checkout widgets support Metamask and Immutable Passport wallets. However to support Passport as a wallet option you must integrate your application with Passport. Then follow our Passport integration docs.
Dependency on the ethers js library

To support passing Web3Provider objects into the Checkout widgets, you will need to install the ethers js library (v5).

npm install ethers@5
yarn add ethers@5

If a provider isn't set, the Checkout widgets will automatically prompt the user to connect with one of the supported wallets. This allows you to drop-in any of the Checkout widgets without any further configuration.

Set your application's Web3Provider object into the widget during widget creation.

import { useEffect, useState } from 'react';
import { checkout } from '@imtbl/sdk';
import { Web3Provider } from '@ethersproject/providers';

// create Checkout SDK
const checkoutSDK = new checkout.Checkout();

export function App() {
const [wallet, setWallet] =
useState<checkout.Widget<typeof checkout.WidgetType.WALLET>>();

// @ts-ignore You will need to handle your own wallet provider creation and wrap it in a ethers js Web3Provider
const otherWeb3Provider = new Web3Provider(/* other wallet provider */);

// Initialise widgets, create wallet widget
useEffect(() => {
(async () => {
const widgets = await checkoutSDK.widgets({
config: { theme: checkout.WidgetTheme.DARK },

// Pass your otherWeb3Provider into the create method when creating a new widget.
const wallet = widgets.create(checkout.WidgetType.WALLET, {
config: {theme: checkout.WidgetTheme.DARK},
provider: otherWeb3Provider


}, []);

return (<div id="wallet" />);

IMX Whitepaper IMX Tokenomics Block Explorer Careers Contact Us