📲 Mobile SDK Integration

React Native

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: '<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

Prop	Description
queryParams	Refer here for the full list of query params
onTransakEventHandler	Accepts 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

Android

To add Transak to you Android app add the below code:

MainActivity.Java

Make sure to add your API key and customise using query parameters.

import android.webkit.WebView;
...

webView = (WebView) findViewById(R.id.transakWidget);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("<https://global.transak.com?apiKey=[YOUR_PRODUCTION_API_KEY]&[QUERY_PARAMETERS]>");

Activity_main.xml

<WebView xmlns:android="<http://schemas.android.com/apk/res/android>"
    android:id="@+id/transakWidget"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>

Provide permission in AndroidManifest.XML

<uses-permission android:name="android.permission.INTERNET"/>

iOS

You can add the Transak widget to your iOS app using the below code.

Make sure to add your API key and customise using query parameters.

import UIKit
import WebKit

class WebViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {
    @IBOutlet weak var webView: WKWebView!

    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        webView.navigationDelegate = self
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        let myURL = URL(string: "https://global.transak.com?apiKey=[YOUR_PRODUCTION_API_KEY]&[QUERY_PARAMETERS]")
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }

    func webView(_ webView: WKWebView, didReceive challenge: URLAuthenticationChallenge, completionHandler: @escaping (URLSession.AuthChallengeDisposition, URLCredential?) -> Void) {
        if let serverTrust = challenge.protectionSpace.serverTrust {
            completionHandler(.useCredential, URLCredential(trust: serverTrust))
        }
    }
}

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