> 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.

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

## Integration Methods

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

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 the Transak SDK based on your project setup.

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
```

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 required camera and media permissions for KYC verification in Android and iOS.

```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" />
```

```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>
```

Add the TransakWebView component to your app with event handling.

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

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

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>
        <code>
          transakConfig
        </code>
      </td>

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

    <tr>
      <td>
        <code>
          onTransakEvent
        </code>
      </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.

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

```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" />
```

```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 the WebView package:

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

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.

<ul>
  <li>
    `sharedCookiesEnabled`
  </li>

  <li>
    `injectedJavaScript`
  </li>

  <li>
    `injectedJavaScriptBeforeContentLoaded`
  </li>
</ul>

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>
        <code>
          TRANSAK_WIDGET_INITIALISED
        </code>
      </td>

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

    <tr>
      <td>
        <code>
          TRANSAK_ORDER_CREATED
        </code>
      </td>

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

    <tr>
      <td>
        <code>
          TRANSAK_ORDER_SUCCESSFUL
        </code>
      </td>

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

    <tr>
      <td>
        <code>
          TRANSAK_ORDER_CANCELLED
        </code>
      </td>

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

    <tr>
      <td>
        <code>
          TRANSAK_ORDER_FAILED
        </code>
      </td>

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

    <tr>
      <td>
        <code>
          TRANSAK_WALLET_REDIRECTION
        </code>
      </td>

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

    <tr>
      <td>
        <code>
          TRANSAK_WIDGET_CLOSE
        </code>
      </td>

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