> For a complete page index, fetch https://docs.transak.com/llms.txt

# React Native

The Transak React Native integration allows you to embed a fully functional interface directly into your React Native application.

> **Success**
>
> Google Pay works only with the Transak React Native SDK integration for mobile applications.

## Integration Methods

#### [Transak React Native SDK (Recommended)](#transak-react-native-sdk-recommended)

Fastest way to integrate Transak in Expo and non-Expo apps with built-in callbacks and event support.

#### [React Native WebView](#react-native-webview)

Direct WebView-based integration using `react-native-webview`.

### Transak React Native SDK (Recommended)

Official Transak SDK with built-in event handling, callbacks, and simplified camera permissions for both Expo and Non-Expo implementations.

#### Install SDK and Dependencies

Install the Transak SDK based on your project setup.

#### Without Expo

Install the React Native SDK:

```bash
npm i @transak/ui-react-native-sdk
```

Install required peer dependencies:

```bash
npm i react-native-webview
npm i react-native-inappbrowser-reborn
npm i @react-native-community/netinfo
```

#### With Expo

Install the Expo SDK:

```bash
npm i @transak/ui-expo-sdk
```

Install required peer dependencies:

```bash
npm i react-native-webview
npm i expo-web-browser
npm i @react-native-community/netinfo
```

#### Add Permissions

Add required camera and media permissions for KYC verification in Android and iOS.

**`Android (AndroidManifest.xml)`**

```xml title="Android (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" />
```

**`iOS (Info.plist)`**

```xml title="iOS (Info.plist)"
<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>
```

#### Implement TransakWebView Component

Add the TransakWebView component to your app with event handling.

**`React Native (without Expo)`**

```typescript title="React Native (without Expo)"
import {
  TransakWebView,
  Events,
  TransakConfig,
  OnTransakEvent,
} from '@transak/ui-react-native-sdk';

function TransakWebViewIntegration() {
  const transakConfig: TransakConfig = {
    widgetUrl: "https://global-stg.transak.com?apiKey=YOUR_API_KEY&sessionId=<YOUR_SESSION_ID>"
  };

  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}
    />
  );
}
```

**`React Native (with Expo)`**

```typescript title="React Native (with Expo)"
import {
  TransakWebView,
  Events,
  TransakConfig,
  OnTransakEvent,
} from '@transak/ui-expo-sdk';

function TransakWebViewIntegration() {
  const transakConfig: TransakConfig = {
    widgetUrl: "https://global-stg.transak.com?apiKey=YOUR_API_KEY&sessionId=<YOUR_SESSION_ID>"
  };

  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}
    />
  );
}
```

#### Create a Widget URL (Backend Only)

Call the [Create Widget URL](/api/public/create-widget-url) API from your backend to generate a secure widget url using

Query parameters

The response returns a `widgetUrl` that should be used in the `transakConfig` prop.

A `widgetUrl` is valid for 5 minutes and can only be used once. A new `widgetUrl` must be generated for every user flow.

**Example Request:**

```bash
curl --request POST \
  --url https://api-gateway-stg.transak.com/api/v2/auth/session \
  --header 'access-token: YOUR_ACCESS_TOKEN' \
  --header 'content-type: application/json' \
  --data '{
  "widgetParams": {
    "apiKey": "YOUR_API_KEY",
    "referrerDomain": "yourdomain.com"
  }
}'
```

**Component Props**

<table>
  <thead>
    <tr>
      <th>
        Prop
      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        `transakConfig`
      </td>

      <td>
        Supports `widgetUrl` and `referrer` as mandatory parameters
      </td>
    </tr>

    <tr>
      <td>
        `onTransakEvent`
      </td>

      <td>
        Callback function to listen to widget events
      </td>
    </tr>
  </tbody>
</table>

### React Native WebView

For teams that prefer managing the WebView directly, you can use the `react-native-webview` library.

> **Do not override the WebView user agent**
>
> Transak uses the default `User-Agent` to detect that the widget is running inside a native WebView, which determines the payment methods we offer. Replacing it strips those identifiers, so users may be shown methods that cannot complete in a WebView and our support team loses the signal needed to diagnose failures.
>
> Keep the default `User-Agent` unchanged. If you need to identify your app, use your platform's append-only option

#### Add Permissions

Add required camera and media permissions for KYC verification in Android and iOS.

**`Android (AndroidManifest.xml)`**

```xml title="Android (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" />
```

**`iOS (Info.plist)`**

```xml title="iOS (Info.plist)"
<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>
```

#### Install react-native-webview

Install the WebView package:

```bash
npm i react-native-webview
```

#### Implement WebView Component

Import and render the WebView with the Transak widget URL:

```javascript
import { WebView } from 'react-native-webview';

<WebView
  source={{ url: 'https://global.transak.com?apiKey=<YOUR_API_KEY>&sessionId=<YOUR_SESSION_ID>' }}
  enableApplePay
  allowsInlineMediaPlayback
  mediaPlaybackRequiresUserAction={false}
/>
```

These props should not be passed for Apple Pay to function properly.

* `sharedCookiesEnabled`
* `injectedJavaScript`
* `injectedJavaScriptBeforeContentLoaded`

#### Create a Widget URL (Backend Only)

Call the [Create Widget URL](/api/public/create-widget-url) API from your backend to generate a secure widget url using

Query parameters

The response returns a `widgetUrl` that should be used as the source URL in the WebView.

A `widgetUrl` is valid for 5 minutes and can only be used once. A new `widgetUrl` must be generated for every user flow.

**Example Request:**

```bash
curl --request POST \
  --url https://api-gateway-stg.transak.com/api/v2/auth/session \
  --header 'access-token: YOUR_ACCESS_TOKEN' \
  --header 'content-type: application/json' \
  --data '{
  "widgetParams": {
    "apiKey": "YOUR_API_KEY",
    "referrerDomain": "yourdomain.com"
  }
}'
```

## Supported Events

<table>
  <thead>
    <tr>
      <th>
        Event Name
      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        `TRANSAK_WIDGET_INITIALISED`
      </td>

      <td>
        Widget initialised with query params
      </td>
    </tr>

    <tr>
      <td>
        `TRANSAK_ORDER_CREATED`
      </td>

      <td>
        Order created by user
      </td>
    </tr>

    <tr>
      <td>
        `TRANSAK_ORDER_SUCCESSFUL`
      </td>

      <td>
        Order is successful
      </td>
    </tr>

    <tr>
      <td>
        `TRANSAK_ORDER_CANCELLED`
      </td>

      <td>
        Order is cancelled
      </td>
    </tr>

    <tr>
      <td>
        `TRANSAK_ORDER_FAILED`
      </td>

      <td>
        Order is failed
      </td>
    </tr>

    <tr>
      <td>
        `TRANSAK_WALLET_REDIRECTION`
      </td>

      <td>
        Widget is about to redirect to passed URL
      </td>
    </tr>

    <tr>
      <td>
        `TRANSAK_WIDGET_CLOSE`
      </td>

      <td>
        Widget is about to close
      </td>
    </tr>
  </tbody>
</table>

> Seamless Transak integration for React Native applications