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.
The NPM page for the SDK can be found here: https://www.npmjs.com/package/@transak/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
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
Example usage
import {
TransakWebView, Environments, Events, TransakConfig, EventTypes, Order,
} from '@transak/react-native-sdk';
function TransakWebViewIntegration() {
const transakConfig: TransakConfig = {
apiKey: '<your-api-key>', // Required
environment: Environments.STAGING/Environments.PRODUCTION, // Required
partnerOrderId: '<unique-order-id-generated-by-your-system>', // Required to receive order events
// .....
// For the full list of query params refer Props section below
};
const onTransakEventHandler = (event: EventTypes, data: Order) => {
switch(event) {
case Events.ORDER_CREATED:
console.log(event, data);
break;
case Events.ORDER_PROCESSING:
console.log(event, data);
break;
case Events.ORDER_COMPLETED:
console.log(event, data);
break;
default:
console.log(event, data);
}
};
return (
<TransakWebView
transakConfig={transakConfig}
onTransakEvent={onTransakEventHandler}
// Enable media playback without user interaction (required for SDK versions < 2.0.6)!
mediaPlaybackRequiresUserAction={false}
// For the full list of react-native-webview props refer Props section below
// ...
/>
);
}
import { StyleSheet, Text, View } from "react-native";
import React, { useEffect } from "react";
import { Transak } from "@transak/transak-sdk";
import transakConfig from "../../configs/transakConfig";
type Props = {};
const transakConfig: TransakConfig = {
apiKey: "<your-api-key>",
environment: Transak.ENVIRONMENTS.STAGING,
exchangeScreenTitle: "React Native Expo",
};
const TransakScreen = (props: Props) => {
useEffect(() => {
const transak = new Transak(transakConfig);
transak.init();
});
return (
<View style={styles.container}>
<Text style={styles.text}>React Native Expo Demo - Transak</Text>
</View>
);
};
export default TransakScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
text: {
fontSize: 24,
},
});
Props
This component accepts most of the react-native-webview props, except the following, which are not supported from SDK version 2.0.6 onward: sharedCookiesEnabled
, injectedJavaScript
, onMessage
, mediaPlaybackRequiresUserAction
and injectedJavaScriptBeforeContentLoaded
.
The partnerOrderId must be passed in the transakConfig to receive order events.
React Native WebView
Tip
Camera Permission: Please ensure the below:
- Required camera permissions are configured in AndroidManifest.xml(Android) & Info.plist (iOS)
- Required camera permissions are passed to Webview
- 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={{ uri: 'https://global.transak.com?apiKey=<YOUR_API_KEY>&<QUERY_PARAMETERS>' }}
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 7 days ago