Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.immutable.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Onramp

Buy crypto with credit card, Apple Pay, or Google Pay. Onramp Widget When to use:
  • New players without existing crypto
  • Topping up wallets with fiat in web, mobile, or desktop games
  • In-game purchases where players need to buy IMX, USDC, or ETH
  • Users who want to fund their zkEVM wallets using fiat currency (e.g., EUR, USD)

​
Overview

The Transak widget enables token on-ramping, allowing players to purchase tokens with fiat currency (e.g., USD, EUR, GBP) using credit card, Apple Pay, or Google Pay. Transak is a leading fiat-to-crypto payment gateway that handles regulatory compliance, payment processing, and user verification.

​
Prerequisites

Install the Immutable SDK: 
npm install @imtbl/sdk

​
Quick Start

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',
  },
});

const { CommerceFlowType, CommerceEventType } = checkout;

// Basic onramp flow - buy crypto with fiat
export async function openOnramp(elementId: string) {
  const widgets = await checkoutSDK.widgets({ config: { theme: WidgetTheme.DARK } });
  const widget = widgets.create(WidgetType.IMMUTABLE_COMMERCE);

  widget.mount(elementId, { flow: CommerceFlowType.ONRAMP });

  widget.addListener(CommerceEventType.SUCCESS, (data) => {
    console.log('Onramp complete:', data);
    widget.unmount();
  });

  widget.addListener(CommerceEventType.FAILURE, (data) => {
    console.error('Onramp failed:', data);
    widget.unmount();
  });

  widget.addListener(CommerceEventType.CLOSE, () => {
    widget.unmount();
  });

  return widget;
}

// Onramp with wallet address pre-filled
export async function onrampToWallet(
  elementId: string,
  walletAddress: string
) {
  const widgets = await checkoutSDK.widgets({ config: { theme: WidgetTheme.DARK } });
  const widget = widgets.create(WidgetType.IMMUTABLE_COMMERCE);

  widget.mount(elementId, {
    flow: CommerceFlowType.ONRAMP,
    walletAddress,
  });

  return widget;
}

​
Parameters

ParameterTypeDescription
flow'ONRAMP'Required. Specifies the onramp flow
walletAddressstringOptional. Pre-fill the wallet address

​
Events

EventDescriptionPayload
SUCCESSOnramp completed{ transactionHash, ... }
FAILUREOnramp failed{ error }
CLOSEUser closed widget—

​
Next Steps

Swap

Exchange purchased tokens

Bridge

Move tokens from Ethereum

Primary Sales

Sell NFTs to players

Build a Marketplace

Complete marketplace tutorial