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.
Prerequisites: Checkout requires wallet authentication. We recommend Passport for seamless wallet creation and login, but you can also use MetaMask, WalletConnect, or any EIP-1193 compatible wallet.

Wallet Funding: Which Flow to Use?

Choose the right funding method based on your users’ starting point:
User HasBest FlowWhy
No cryptoOnrampBuy crypto with credit card, Apple Pay, Google Pay
Funds on Ethereum L1BridgeTransfer tokens from Ethereum mainnet to zkEVM
Wrong token on zkEVMSwapExchange tokens on Immutable Chain via QuickSwap
Funds on another chainFundSmart routing via swap/bridge/onramp
Need help choosing? See individual flow pages for detailed “when to use” guidance and platform-specific examples (TypeScript, Unity, Unreal).

Available Flows

FlowDescriptionPlatforms
ConnectConnect wallets (Passport, MetaMask, WalletConnect)TypeScript
WalletView balances, access other flowsTypeScript
OnrampBuy crypto with fiat currencyTypeScript, Unity, Unreal
SwapExchange tokens on Immutable ChainTypeScript, Unity, Unreal
BridgeMove tokens between Ethereum and Immutable ChainTypeScript, Unity, Unreal
FundSmart token acquisition with automatic routingTypeScript
SaleSell NFTs with integrated payment handlingTypeScript

Platform-Specific Implementation

Full widget integration - Mount widgets directly in your web application with React/Vue/vanilla JS.See individual flow pages (Onramp, Swap, Bridge) for complete TypeScript examples with installation, code, and configuration.

TypeScript Quick Start

Installation

npm install @imtbl/sdk

Initialize Checkout

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

const { Checkout, WidgetType, WidgetTheme } = checkout;

const checkoutSDK = new Checkout({
  baseConfig: {
    environment: Environment.SANDBOX, // or Environment.PRODUCTION
    publishableKey: 'YOUR_PUBLISHABLE_KEY',
  },
});
// Create widgets factory
const widgets = await checkoutSDK.widgets({
  config: {
    theme: WidgetTheme.DARK, // or LIGHT
  },
});

// Create and mount a widget
const widget = widgets.create(WidgetType.IMMUTABLE_COMMERCE);
widget.mount('widget-root', {
  flow: 'ONRAMP' // or 'SWAP', 'BRIDGE', 'SALE', etc.
});
For complete examples with event handling and configuration options, see individual flow pages.

Configuration Options

Widget Configuration

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 }

Integration Guides

Next Steps