React Native

Seamless Transak integration for React Native applications

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.

Transak React Native SDK (Recommended)

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

Install SDK and Dependencies

Install the Transak SDK based on your project setup.

Without Expo

With Expo

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

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

Implement TransakWebView Component

Add the TransakWebView component to your app with event handling.

1 import {
2   TransakWebView,
3   Events,
4   TransakConfig,
5   OnTransakEvent,
6 } from '@transak/ui-react-native-sdk';
7 
8 function 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 }

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

Prop	Description
`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.

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

Install react-native-webview

Install the WebView package:

$ npm i react-native-webview

Implement WebView Component

Import and render the WebView with the Transak widget URL:

1 import { 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

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 Name	Description
`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

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

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

1	import {
2	TransakWebView,
3	Events,
4	TransakConfig,
5	OnTransakEvent,
6	} from '@transak/ui-react-native-sdk';
7
8	function 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	}

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

1	import { 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	/>