***

title: React Native
slug: integration/mobile/react-native
subtitle: Seamless Transak integration for React Native applications
--------------------------------------------------------------------

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

<Frame>
  <div>
    Google Pay works only with the Transak React Native SDK integration for mobile applications.
  </div>
</Frame>

## Integration Methods

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

<Steps>
  <Step title="Install SDK and Dependencies">
    Install the Transak SDK based on your project setup.

    <Tabs>
      <Tab title="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
        ```
      </Tab>

      <Tab title="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
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Add Permissions">
    Add required camera and media permissions for KYC verification in Android and iOS.

    <CodeBlocks>
      ```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>
      ```
    </CodeBlocks>
  </Step>

  <Step title="Implement TransakWebView Component">
    Add the TransakWebView component to your app with event handling.

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

  <Step title="Create a Widget URL (Backend Only)">
    Call the [Create Widget URL](/api/public/create-widget-url) to generate a Widget URL by securely passing the [widget parameters](/customization/query-parameters).

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

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

    **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"
      }
    }'
    ```
  </Step>
</Steps>

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

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

### React Native WebView

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

<Steps>
  <Step title="Add Permissions">
    Add required camera and media permissions for KYC verification in Android and iOS.

    <CodeBlocks>
      ```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>
      ```
    </CodeBlocks>
  </Step>

  <Step title="Install react-native-webview">
    Install the WebView package:

    ```bash
    npm i react-native-webview
    ```
  </Step>

  <Step title="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}
    />
    ```

    <Frame>
      <div>
        These props should not be passed for Apple Pay to function properly.

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

          <li>
            `injectedJavaScript`
          </li>

          <li>
            `injectedJavaScriptBeforeContentLoaded`
          </li>
        </ul>
      </div>
    </Frame>
  </Step>

  <Step title="Create a Widget URL (Backend Only)">
    Call the [Create Widget URL](/api/public/create-widget-url) to generate a Widget URL by securely passing the [widget parameters](/customization/query-parameters).

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

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

    **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"
      }
    }'
    ```
  </Step>
</Steps>