For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Dashboard
DocsAPI Reference
DocsAPI Reference
    • What is Transak
  • Features
    • Auth Reliance
    • KYC Reliance using Sumsub
    • Webhooks
    • WebSockets
  • Products Overview
    • On Ramp
    • Off Ramp
    • NFT Checkout
  • Integration Options
    • API
  • Customization Options
    • Query Parameters
    • Customizing theme using query parameters
  • Guides
    • How To Create a Partner Dashboard Account
    • How to Add Partner Fees and Set Up Partner Payouts
    • How to Test using Sandbox Credentials
    • How to Test ACH Pull Transaction in Sandbox
    • How to Test Apple Pay in Sandbox
    • How to Track Order Status
    • Transak Different KYC Levels
    • How to Submit FCA Requirements
    • How to Use Advanced Query Params
    • How to Create a Widget URL with Parameters and Test Different Scenarios
    • How to Generate Calldata for NFT Checkout
    • How to Add NFT Smart Contract in the Dashboard and Create a contractId
    • Get Price based on User Region
    • How to Create Partner Access Token
    • How to Decrypt the Webhook Payload
    • How to add MCP Server for Transak Documentation
    • Widget with API Customization
    • Integration Update - Mandatory Migration to API based Transak Widget URL
    • Biconomy: Simplified Onboarding Using MEE-Compatible Smart Accounts
    • Partner FAQs
    • Need Help?
Dashboard
LogoLogo
On this page
  • Problem Statement
  • Our Solution
  • How does it work?
  • User Flow
Guides

Widget with API Customization

Customize the Transak widget flow using APIs and query parameters
||View as Markdown|
Was this page helpful?
Edit this page
Previous

How to add MCP Server for Transak Documentation

Next

Mandatory Migration to API-Based Widget URL

Built with

Transak provides a flexible solution for partners to create a more tailored Transak experience by combining query parameters and APIs to control parts of the user journey within their own application.

Partners can skip screens, prefill key user details, and use the Transak UI only where it is required in the user journey.

Problem Statement

Widgets are quick to integrate, but they can still create friction when partners want more control over the user journey, branding, and prefilled data.

Here are some of the key challenges with a standard hosted widget flow:

Extra steps for users

Users may need to repeat selections or details that your app already knows, which adds avoidable friction to the flow.

Limited journey control

Partners cannot fully shape the user experience.

Repeated data entry

Asking users to re-enter wallet, email, or KYC details can slow conversion and create an inconsistent experience.

Higher drop-off risk

Every additional step can increase abandonment, especially when the partner app could have handled part of the journey upfront.

Our Solution

Widget with API Customization helps partners streamline the user journey by combining public APIs and query parameters.

1

Fetch data in your UI

Use Transak’s Public APIs to fetch quotes, supported fiat currencies, and supported cryptocurrencies so your app can collect user choices before launching the widget.

2

Prefill or skip steps

Pass parameters such as fiatCurrency, cryptoCurrencyCode, walletAddress, email, userData, and other supported fields to reduce the number of screens inside the widget.

3

Create Widget URL with query parameters

Call the Create Widget URL API from your backend to generate a secure widget url using Query parameters

Example Request:

$curl --request POST \
>  --url https://api-gateway-stg.transak.com/api/v2/auth/session \
>  --header 'access-token: YOUR_ACCESS_TOKEN' \
>  --header 'content-type: application/json' \
>  --data '{
>  "widgetParams": {
>    "apiKey": "YOUR_API_KEY",
>    "referrerDomain": "yourdomain.com",
>    "fiatCurrency": "ETH", 
>    .....
>  }
>}'
4

Track the order outside the widget

Use Get Order By ID, Get Orders, Webhooks, and WebSockets to track the order.

How does it work?

Widget with API customization flow diagram
ScreenCan be skipped?
Exchange ScreenYes
Wallet Confirmation ScreenYes
Email Verification ScreenYes
OTP Verification ScreenNo
Lite KYC ScreenYes
Standard KYC ScreenNo
Confirm Order ScreenNo
Payment ScreenNo
Payment Authorization ScreenNo
Order Status ScreenYes
Order History ScreenYes

User Flow

Exchange Screen
Exchange Screen

The Exchange Screen allows users to select the fiat amount, crypto asset, network, and payment method.

To skip this step, collect those inputs in your own UI and pass them through widgetParams.

Recommended parameters

apiKey, productsAvailed, fiatAmount, fiatCurrency, cryptoCurrencyCode, network, paymentMethod, hideExchangeScreen

Useful APIs

Get Price, Get Fiat Currencies, Get Crypto Currencies

Wallet Confirmation Screen
Wallet Confirmation Screen

This step confirms the destination wallet for on-ramp transactions.

To skip this step, pass the wallet details through widgetParams.

Required parameters

walletAddress, disableWalletAddressForm=true

Email Verification Screen
Email Verification Screen

This screen is used to collect the user’s email for OTP verification.

To skip this step, pass the user’s email through widgetParams.

Required parameter

email

OTP Verification Screen
OTP Verification Screen

OTP verification is a mandatory step and cannot be skipped.

Prefilling the users email helps streamline the flow, but it does not bypass OTP verification.

Lite KYC Screen
Lite KYC Address Details
Lite KYC Personal Details

The Lite KYC Screen captures the user’s personal and address details.

To skip this step, pass structured userData through widgetParams.

Required parameter

userData

Example

1{
2  "firstName": "Satoshi",
3  "lastName": "Nakamoto",
4  "email": "satoshi.nakamoto@transak.com",
5  "mobileNumber": "+15417543010",
6  "dob": "1994-08-26",
7  "address": {
8    "addressLine1": "170 Pine St",
9    "addressLine2": "San Francisco",
10    "city": "San Francisco",
11    "state": "CA",
12    "postCode": "94111",
13    "countryCode": "US"
14  }
15}
Standard KYC Screen
Standard KYC document upload
faceID

Standard KYC includes document upload and liveness checks.

This step is not skippable in the widget and triggered only when the order value exceeds Lite KYC limits.

Confirm Order Screen
Confirm Order Screen

The Confirm Order step displays the final transaction summary before payment.

This step is not skippable in the widget and shown to users before they proceed with the payment.

Payment Screen
Payment Screen

This is where users enter or confirm payment details.

This step is not skippable in the widget.

Payment Authorization Screen
Payment Authorization Screen

To skip this step, continue the user journey in your own application by listening for the TRANSAK_ORDER_SUCCESSFUL event after payment is initiated.

How it works

Once the event is received, you can close the widget or move users to the next step in your own flow instead of keeping them on the completion screen.

Supported integrations

JavaScript SDK, Android, iOS, React Native

Order Status Screen
Order Status Screen

To skip this step, display order status updates in your own application instead of relying on the order status screen.

Supported options

Get Order By ID, Webhooks, WebSockets

Order History Screen
Order History Screen

To skip this step, display transaction history in your own application instead of relying on the order history screen.

Supported option

Get Orders