πŸ“² 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/web-view

Install the SDK with the following command into your project with the following command:

yarn add @transak/web-view

Install the dependencies with the following command:

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

The TransakWebView can then be used as shown below:

import TransakWebView from '@transak/web-view';

function TransakReactNativeIntegration() {
  return (
    <TransakWebView
      config={{
        apiKey: '<your-api-key>',
        environment: '<environment: STAGING/PRODUCTION>',
      }}
      onTransakEventHandler={(event, data) => console.log(event, data)}
    />
  );
};

Use the config param to use the various configuration options available in the Transak widget. To know full list of parameters please refer Query Parameters.

The onTransakEventHandler attribute can be used to listen to events generated by Transak widget as listed here.

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