πŸ“² React Native Integration

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.

The NPM page for the SDK can be found here: https://www.npmjs.com/package/@transak/react-native-sdk

Installation

# Using yarn
yarn add @transak/react-native-sdk

# Using npm
npm install @transak/react-native-sdk

Install these required peer dependencies to facilitate auto-linking.

# Using yarn
yarn add react-native-webview
yarn add react-native-inappbrowser-reborn
yarn add @react-native-community/netinfo

# Using npm
npm install react-native-webview
npm install react-native-inappbrowser-reborn
npm install @react-native-community/netinfo

Example usage

import TransakWebView from '@transak/react-native-sdk';

function TransakReactNativeSdkIntegration() {
  const transakEventHandler = (event, data) => {
    switch(event) {
      case 'ORDER_PROCESSING':
        console.log(data);
        break;

      case 'ORDER_COMPLETED':
        console.log(data);
        break;

      default:
        console.log(data);
    }
  };

  return (
    <TransakWebView
      queryParams={{
        apiKey: '<YOUR_API_KEY>',
        environment: '<STAGING/PRODUCTION>',
        // .....
        // For the full list of query params refer Props section below
      }}
      onTransakEventHandler={transakEventHandler}

      style={}          // react-native-webview prop
      onLoadStart={}    // react-native-webview prop
      onLoadEnd={}      // react-native-webview prop
      // .....
      // For the full list of react-native-webview props refer Props section below
    />
  );
}

Props

PropDescription
queryParamsRefer here for the full list of query params
onTransakEventHandlerAccepts callback function to listen to order related events

This component accepts most of the react-native-webview props, except the following: source, injectJavaScript, sharedCookiesEnabled, injectedJavaScript, injectedJavaScriptBeforeContentLoaded

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.

# Using yarn
yarn add react-native-webview

# Using npm
npm install react-native-webview
import { WebView } from 'react-native-webview';
<WebView
  source={{ uri: 'https://global-stg.transak.com?apiKey=<YOUR_API_KEY>&<QUERY_PARAMETERS>' }}
  enableApplePay
  allowsInlineMediaPlayback
/>

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

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

Events

A list of all the events that are emitted by the SDK is shown below.


TRANSAK_WIDGET_INITIALISED,
TRANSAK_WIDGET_OPEN,
TRANSAK_WIDGET_CLOSE_REQUEST,
TRANSAK_WIDGET_CLOSE,
TRANSAK_ORDER_CREATED,
TRANSAK_ORDER_CANCELLED,
TRANSAK_ORDER_FAILED,
TRANSAK_ORDER_SUCCESSFUL,
TRANSAK_WALLET_REDIRECTION