Skip to main content
Drop-in widgets for wallet connection, token swaps, bridging, fiat onramps, and primary sales.

Sample App

View a complete working example

​
Why Use Checkout?

Mount pre-built widgets instead of building complex transaction UIs. Handle swaps, bridges, and payments with a few lines of code.
Users don’t need to understand gas, bridges, or DEXs. The widget guides them through each flow with clear UI.
Match your app’s theme with built-in dark/light modes and language localization.
Works with Passport, MetaMask, WalletConnect, and any EIP-1193 compatible wallet.

​
Available Flows

FlowDescription
ConnectConnect wallets (Passport, MetaMask, WalletConnect)
WalletView balances, access other flows
SwapExchange tokens on Immutable Chain
BridgeMove tokens between Ethereum and Immutable Chain
OnrampBuy crypto with credit card, Apple Pay, Google Pay
FundAdd specific tokens to wallet
SaleSell NFTs with integrated payment handling

​
Installation

npm install @imtbl/sdk

​
Quick Start

import { checkout } from '@imtbl/sdk';
import { Environment } from '@imtbl/sdk/config';

const { Checkout, WidgetTheme, WidgetType } = checkout;

// Initialize the Checkout SDK
export const checkoutSDK = new Checkout({
  baseConfig: {
    environment: Environment.SANDBOX, // or Environment.PRODUCTION
    publishableKey: 'YOUR_PUBLISHABLE_KEY',
  },
});

// Create widgets factory with configuration
export async function createWidgets() {
  const widgets = await checkoutSDK.widgets({
    config: {
      theme: WidgetTheme.DARK, // or LIGHT
    },
  });

  return widgets;
}

// Create commerce widget instance
export async function createCommerceWidget() {
  const widgets = await createWidgets();
  return widgets.create(WidgetType.IMMUTABLE_COMMERCE);
}

​
Configuration Options

OptionValuesDescription
theme'dark', 'light'Widget color theme
language'en', 'ja', 'ko', 'zh'UI language
version{ major, minor, patch }Pin to specific SDK version

​
Widget Methods

All commerce widgets share these methods:
MethodDescription
mount(elementId, params)Mount widget to DOM element
update(config)Update widget configuration
addListener(event, callback)Listen to events
removeListener(event)Remove event listener
unmount()Clean up widget

​
Common Events

All flows emit these events:
EventDescriptionPayload
INITIALISEDWidget loaded and ready—
CLOSEUser clicked close button—
SUCCESSFlow completed successfullyFlow-specific data
FAILUREError occurred{ error }
PROVIDER_UPDATEDWallet provider changed{ provider }

​
Next Steps

Connect Wallet

Start with wallet connection

Primary Sales

Sell NFTs to players

Swap Tokens

Enable token exchanges

Onramp

Accept fiat payments