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

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 to generate a Widget URL by securely passing the widget 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

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

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 to generate a Widget URL by securely passing the widget 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"
>  }
>}'