Widget with API Customization | Transak

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.

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.

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.

Create Widget URL with query parameters

Generate a single-use widgetUrl from the Create Widget URL API, passing the supported widget parameters inside widgetParams.

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", 
>     .....
>   }
> }'

How does it work?

Widget with API customization flow diagram

Screen	Can be skipped?	Demo Link
Exchange Screen	Yes	Skip Exchange Flow Demo
Wallet Confirmation Screen	Yes	Skip Wallet Address Flow Demo
Email Verification Screen	Yes	Skip Email Flow Demo
OTP Verification Screen	No	NA
Lite KYC Screen	Yes	Skip Lite KYC Flow Demo
Standard KYC Screen	No	NA
Confirm Order Screen	No	NA
Payment Screen	No	NA
Payment Authorization Screen	No	NA
Order Status Screen	Yes	Skip Order Status Flow - API Demo
Order History Screen	Yes	Skip Order History Flow - API Demo

User Flow

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

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

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 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

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 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

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

This is where users enter or confirm payment details.

This step is not skippable in the widget.

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

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

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

Supported option

Get Orders