> ## 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
# Onramp
Buy crypto with credit card, Apple Pay, or Google Pay.
**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](https://transak.com/) 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:
```bash theme={null}
npm install @imtbl/sdk
```
```bash theme={null}
yarn add @imtbl/sdk
```
## Quick Start
```typescript theme={null}
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',
},
});
```
```typescript theme={null}
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
| Parameter | Type | Description |
| --------------- | ---------- | ------------------------------------- |
| `flow` | `'ONRAMP'` | Required. Specifies the onramp flow |
| `walletAddress` | `string` | Optional. Pre-fill the wallet address |
### Events
| Event | Description | Payload |
| --------- | ------------------ | -------------------------- |
| `SUCCESS` | Onramp completed | `{ transactionHash, ... }` |
| `FAILURE` | Onramp failed | `{ error }` |
| `CLOSE` | User closed widget | — |
***
## Next Steps
Exchange purchased tokens
Move tokens from Ethereum
Sell NFTs to players
Complete marketplace tutorial