Transak React Native SDK

A React Native SDK for decentralized applications to onboard their global user base with fiat currency.

Installation

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

Example usage

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

function TransakWebViewIntegration() {
  const transakConfig: TransakConfig = {
    widgetUrl: 'api-generated-widgetUrl', // Required
  };

  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}
      // .....
      // For the full list of react-native-webview props refer Props section below
    />
  );
}

Props

| Prop | Description | | :------------- | :---------------------------------------------------------------------------------------------------------- | | transakConfig | Refer transakConfig section below | | onTransakEvent | Callback function to listen to widget events such as initialization, order creation, success, failure, etc. |

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

transakConfig

| Property | Type | Required | Description | | :-------- | :----- | :------- | :----------------------------------------------------------------------------------------------------------------------- | | widgetUrl | string | Yes | API generated widgetUrl |

Available Events

The SDK emits the following widget events:

• TRANSAK_WIDGET_INITIALISED - When the widget is loaded and ready
• TRANSAK_ORDER_CREATED - When a new order is created
• TRANSAK_ORDER_SUCCESSFUL - When an order is completed successfully
• TRANSAK_ORDER_CANCELLED - When an order is canceled
• TRANSAK_ORDER_FAILED - When an order fails
• TRANSAK_WALLET_REDIRECTION - When user is redirected to wallet
• TRANSAK_WIDGET_CLOSE - When the widget is closed

License

ISC Licensed. Copyright (c) Transak Inc.