Product Documentation
Start typing to search…

React Native

Transak React Native SDK

📘

Tip

Camera Permission: Please ensure required camera permissions are configured in AndroidManifest.xml (Android) & Info.plist (iOS)

You can integrate Transak into your React Native project using our React Native SDK.

Required Permissions

// update permissions in the AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="true" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<key>NSCameraUsageDescription</key>
<string>Camera Access</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Location Access</string>
<key>NSMicrophoneUsageDescription</key>
<string>Mic Access</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Photo Library Access</string>

Installation - Without Expo

npm i @transak/react-native-sdk

Install these required peer dependencies to facilitate auto-linking.

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

Installation - With Expo

npm i @transak/ui-expo-sdk

Install these required peer dependencies to facilitate auto-linking.

npm i react-native-webview
npm i expo-web-browser
npm i @react-native-community/netinfo

Example usage

Call the Create Widget URL with the widget parameters to securely generate a widgetUrl, and use it in the code as illustrated.

import {
  TransakWebView,
  Events,
  TransakConfig,
  OnTransakEvent,
  Order,
} from '@transak/react-native-sdk';

function TransakWebViewIntegration() {
  const transakConfig: TransakConfig = {
    widgetUrl: "https://global-stg.transak.com?apiKey=YOUR_API_KEY&sessionId=<YOUR_SESSION_ID>",
    referrer: "https://your-domain.com"
  };

  const onTransakEventHandler: OnTransakEvent = (event, data) => {
    switch (event) {
      case Events.TRANSAK_WIDGET_INITIALISED:
        console.log('Widget initialized:', event, data);
        break;

      case Events.TRANSAK_ORDER_CREATED:
        console.log('Order created:', event, data);
        break;

      case Events.TRANSAK_ORDER_SUCCESSFUL:
        console.log('Order successful:', event, data);
        break;

      case Events.TRANSAK_ORDER_FAILED:
        console.log('Order failed:', event, data);
        break;

      case Events.TRANSAK_WIDGET_CLOSE:
        console.log('Widget closed:', event, data);
        break;

      default:
        console.log('Widget event:', event, data);
    }
  };

  return (
    <TransakWebView
      transakConfig={transakConfig}
      onTransakEvent={onTransakEventHandler}
    />
  );
}


import {
  TransakWebView,
  Events,
  TransakConfig,
  OnTransakEvent,
  Order,
} from '@transak/ui-expo-sdk';

function TransakWebViewIntegration() {
  const transakConfig: TransakConfig = {
    widgetUrl: "https://global-stg.transak.com?apiKey=YOUR_API_KEY&sessionId=<YOUR_SESSION_ID>",
    referrer: "https://your-domain.com"
  };

  const onTransakEventHandler: OnTransakEvent = (event, data) => {
    switch (event) {
      case Events.TRANSAK_WIDGET_INITIALISED:
        console.log('Widget initialized:', event, data);
        break;

      case Events.TRANSAK_ORDER_CREATED:
        console.log('Order created:', event, data);
        break;

      case Events.TRANSAK_ORDER_SUCCESSFUL:
        console.log('Order successful:', event, data);
        break;

      case Events.TRANSAK_ORDER_FAILED:
        console.log('Order failed:', event, data);
        break;

      case Events.TRANSAK_WIDGET_CLOSE:
        console.log('Widget closed:', event, data);
        break;

      default:
        console.log('Widget event:', event, data);
    }
  };

  return (
    <TransakWebView
      transakConfig={transakConfig}
      onTransakEvent={onTransakEventHandler}
    />
  );
}

Props

PropDescription
transakConfigSupports widgetUrl and referrer as mandatory parameters
onTransakEventCallback function to listen to events mentioned below.

Supported Events

Event NameDescription
TRANSAK_WIDGET_INITIALISEDWidget initialised with query params
TRANSAK_ORDER_CREATEDOrder created by user
TRANSAK_ORDER_SUCCESSFULOrder is successful
TRANSAK_ORDER_CANCELLEDOrder is cancelled
TRANSAK_ORDER_FAILEDOrder is failed
TRANSAK_WALLET_REDIRECTIONWidget is about to redirect to passed url
TRANSAK_WIDGET_CLOSEWidget is about to close

React Native WebView

📘

Tip

Camera Permission: Please ensure the below:

  1. Required camera permissions are configured in AndroidManifest.xml(Android) & Info.plist (iOS)
  2. Required camera permissions are passed to Webview
  3. If you are integrating Transak in an iFrame inside Webview please ensure the required camera permissions are passed to the iFrame

We highly recommend using our React Native SDK package for smooth functioning of camera & payment permissions.

npm i react-native-webview
import { WebView } from 'react-native-webview';
<WebView
 source={{ url: 'https://global.transak.com?apiKey=<YOUR_API_KEY>&sessionId=<YOUR_SESSION_ID>' }}
 enableApplePay
 allowsInlineMediaPlayback
 mediaPlaybackRequiresUserAction={false}
/>

Please avoid passing any of these props to the WebView component, as it will result in Apple Pay not working: sharedCookiesEnabled, injectedJavaScript, injectedJavaScriptBeforeContentLoaded

Note:- Google Pay works only with Transak React Native SDK integration for Mobile


Updated 1 day ago