Integration OptionsMobile WebView

React Native

Seamless Transak integration for React Native applications
View as Markdown

The Transak React Native integration allows you to embed a fully functional interface directly into your React Native application.

Google Pay works only with the Transak React Native SDK integration for mobile applications.

Integration Methods

Transak React Native SDK (Recommended)

Fastest way to integrate Transak in Expo and non-Expo apps with built-in callbacks and event support.

React Native WebView

Direct WebView-based integration using react-native-webview.

Official Transak SDK with built-in event handling, callbacks, and simplified camera permissions for both Expo and Non-Expo implementations.

1

Install SDK and Dependencies

Install the Transak SDK based on your project setup.

Install the React Native SDK:

$npm i @transak/ui-react-native-sdk

Install required peer dependencies:

$npm i react-native-webview
$npm i react-native-inappbrowser-reborn
$npm i @react-native-community/netinfo
2

Add Permissions

Add required camera and media permissions for KYC verification in Android and iOS.

1<uses-permission android:name="android.permission.INTERNET" />
2<uses-permission android:name="android.permission.CAMERA" />
3<uses-feature android:name="android.hardware.camera" android:required="true" />
4<uses-feature android:name="android.hardware.camera.autofocus" />
5<uses-permission android:name="android.permission.RECORD_AUDIO" />
6<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
3

Implement TransakWebView Component

Add the TransakWebView component to your app with event handling.

1import {
2  TransakWebView,
3  Events,
4  TransakConfig,
5  OnTransakEvent,
6} from '@transak/ui-react-native-sdk';
7
8function TransakWebViewIntegration() {
9  const transakConfig: TransakConfig = {
10    widgetUrl: "https://global-stg.transak.com?apiKey=YOUR_API_KEY&sessionId=<YOUR_SESSION_ID>"
11  };
12
13  const onTransakEventHandler: OnTransakEvent = (event, data) => {
14    switch (event) {
15      case Events.TRANSAK_WIDGET_INITIALISED:
16        console.log('Widget initialized:', event, data);
17        break;
18
19      case Events.TRANSAK_ORDER_CREATED:
20        console.log('Order created:', event, data);
21        break;
22
23      case Events.TRANSAK_ORDER_SUCCESSFUL:
24        console.log('Order successful:', event, data);
25        break;
26
27      case Events.TRANSAK_ORDER_FAILED:
28        console.log('Order failed:', event, data);
29        break;
30
31      case Events.TRANSAK_WIDGET_CLOSE:
32        console.log('Widget closed:', event, data);
33        break;
34
35      default:
36        console.log('Widget event:', event, data);
37    }
38  };
39
40  return (
41    <TransakWebView
42      transakConfig={transakConfig}
43      onTransakEvent={onTransakEventHandler}
44    />
45  );
46}
4

Create a Widget URL (Backend Only)

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

The response returns a widgetUrl that should be used in the transakConfig prop.

A widgetUrl is valid for 5 minutes and can only be used once. A new widgetUrl must be generated for every user flow.

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

Component Props

PropDescription
transakConfig

Supports widgetUrl and referrer as mandatory parameters

onTransakEvent

Callback function to listen to widget events

React Native WebView

For teams that prefer managing the WebView directly, you can use the react-native-webview library.

1

Add Permissions

Add required camera and media permissions for KYC verification in Android and iOS.

1<uses-permission android:name="android.permission.INTERNET" />
2<uses-permission android:name="android.permission.CAMERA" />
3<uses-feature android:name="android.hardware.camera" android:required="true" />
4<uses-feature android:name="android.hardware.camera.autofocus" />
5<uses-permission android:name="android.permission.RECORD_AUDIO" />
6<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
2

Install react-native-webview

Install the WebView package:

$npm i react-native-webview
3

Implement WebView Component

Import and render the WebView with the Transak widget URL:

1import { WebView } from 'react-native-webview';
2
3<WebView
4  source={{ url: 'https://global.transak.com?apiKey=<YOUR_API_KEY>&sessionId=<YOUR_SESSION_ID>' }}
5  enableApplePay
6  allowsInlineMediaPlayback
7  mediaPlaybackRequiresUserAction={false}
8/>

These props should not be passed for Apple Pay to function properly.

  • sharedCookiesEnabled

  • injectedJavaScript

  • injectedJavaScriptBeforeContentLoaded

4

Create a Widget URL (Backend Only)

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

The response returns a widgetUrl that should be used as the source URL in the WebView.

A widgetUrl is valid for 5 minutes and can only be used once. A new widgetUrl must be generated for every user flow.

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

Supported Events

Event NameDescription
TRANSAK_WIDGET_INITIALISED

Widget initialised with query params

TRANSAK_ORDER_CREATED

Order created by user

TRANSAK_ORDER_SUCCESSFUL

Order is successful

TRANSAK_ORDER_CANCELLED

Order is cancelled

TRANSAK_ORDER_FAILED

Order is failed

TRANSAK_WALLET_REDIRECTION

Widget is about to redirect to passed URL

TRANSAK_WIDGET_CLOSE

Widget is about to close