***

title: Android
slug: integration/mobile/native-android
subtitle: Seamless Transak integration for Android applications
---------------------------------------------------------------

The Transak Android integration allows you to embed a fully functional interface directly into your native Android application using Webview.

<Steps>
  <Step title="Add Permissions in Manifest File">
    Update your `AndroidManifest.xml` to include required permissions for internet access and camera (for KYC verification):

    ```xml
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.CAMERA"/>
    ```
  </Step>

  <Step title="Implement WebView in Activity">
    Configure your MainActivity to load the Transak widget URL using your preferred implementation:

    <CodeBlocks>
      ```kotlin title="Compose"
      import android.webkit.PermissionRequest
      import android.webkit.WebChromeClient
      import android.webkit.WebView
      ...

      AndroidView(
          factory = {
              WebView(it).apply {

                  this.layoutParams =
                      ViewGroup.LayoutParams(
                          ViewGroup.LayoutParams.MATCH_PARENT,
                          ViewGroup.LayoutParams.MATCH_PARENT
                      )

                  this.settings.javaScriptEnabled = true
                  this.settings.domStorageEnabled = true

                  this.webChromeClient = object : WebChromeClient() {
                      override fun onPermissionRequest(request: PermissionRequest) {
                          request.grant(request.resources)
                      }
                  }
              }
          },
          update = {
              it.loadUrl(
                  "https://global-stg.transak.com?apiKey=<YOUR_API_KEY>&sessionId=<YOUR_SESSION_ID>"
              )
          }
      )
      ```

      ```kotlin title="Kotlin"
      import android.webkit.PermissionRequest
      import android.webkit.WebChromeClient
      ...

      transakWidgetView.run {
        this.settings.javaScriptEnabled = true
        this.settings.domStorageEnabled = true

        this.webChromeClient = object : WebChromeClient() {
            override fun onPermissionRequest(request: PermissionRequest) {
                request.grant(request.resources)
            }
        }

        loadUrl("https://global-stg.transak.com?apiKey=<YOUR_API_KEY>&sessionId=<YOUR_SESSION_ID>")
      }
      ```

      ```java title="Java"
      import android.webkit.WebView;
      ...

      webView = (WebView) findViewById(R.id.transakWidgetView);

      webView.getSettings().setJavaScriptEnabled(true);
      webView.getSettings().setDomStorageEnabled(true);

      webView.setWebChromeClient(new WebChromeClient() {
         @Override
         public void onPermissionRequest(PermissionRequest request) {
            super.onPermissionRequest(request);
            request.grant(request.getResources());
         }
      });

      webView.loadUrl("https://global-stg.transak.com?apiKey=<YOUR_API_KEY>&sessionId=<YOUR_SESSION_ID>");
      ```
    </CodeBlocks>
  </Step>

  <Step title="Configure XML Layout (Skip if using Compose)">
    Add the WebView to your `activity_main.xml` layout file:

    ```xml
    <WebView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/transakWidgetView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    ```
  </Step>

  <Step title="Create Widget URL (using 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 to load Transak in Android 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>

## Use cases

Use the table below to choose the right approach for redirects, order data, and WebView events.

<table>
  <thead>
    <tr>
      <th>
        Feature
      </th>

      <th>
        Approach
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        How to redirect users back to your app after a transaction
      </td>

      <td>
        [Deeplink](#deeplinking)
      </td>
    </tr>

    <tr>
      <td>
        How to get order data (e.g. status, order ID, amount)
      </td>

      <td>
        [Deeplink](#deeplinking), [Events](#events)
      </td>
    </tr>

    <tr>
      <td>
        Listen to WebView events (order created, widget close, etc.)
      </td>

      <td>
        [Events](#events)
      </td>
    </tr>
  </tbody>
</table>

### Deeplink

Transak supports deeplinking through the use of the `redirectURL` query parameter to enable seamless navigation after the purchase/sell process is completed.

<Steps>
  <Step title="Register Deeplink in AndroidManifest File">
    Add an intent filter to your AndroidManifest.xml to handle the deeplink:

    ```xml
    <activity android:name=".MainActivity">
        <intent-filter>
            <action android:name="android.intent.action.VIEW"/>
            <category android:name="android.intent.category.DEFAULT"/>
            <category android:name="android.intent.category.BROWSABLE"/>
            <data android:scheme="myapp"
                android:host="transak-redirect" />
        </intent-filter>
    </activity>
    ```
  </Step>

  <Step title="Handle Deeplink and Parse Parameters">
    Listen for the deeplink and parse the returned parameters in your Activity.

    When Transak redirects back, it includes additional query parameters appended to deeplink URL mentioned [here](/customization/query-parameters#redirecturl-1).

    ```kotlin
    override fun onNewIntent(intent: Intent?) {
        super.onNewIntent(intent)
        intent?.data?.let { uri ->
            val status = uri.getQueryParameter("status")
            val orderId = uri.getQueryParameter("order_id")
            val cryptoAmount = uri.getQueryParameter("cryptoAmount")
            // Handle more parameters
        }
    }
    ```
  </Step>

  <Step title="Pass redirectURL in Create Widget URL API">
    Call the [Create Widget URL](/api/public/create-widget-url) to generate a Widget URL by securely passing the [widget parameters](/customization/query-parameters) along with the `redirectURL` parameter.

    The response returns a `widgetUrl` that should be used to load Transak in Android 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",
        "redirectURL": "myapp://transak-redirect"
      }
    }'
    ```
  </Step>
</Steps>

### Events

Transak allows listening of in-widget events (like order creation, completion, and widget close) through native event handlers in Android WebViews.

Add a JavaScript interface to your WebView using the handler name <Badge intent="success" minimal>Android</Badge> to listen for all frontend events.

```kotlin
import android.webkit.PermissionRequest
import android.webkit.WebChromeClient
...

transakWidgetView.run {
  this.settings.javaScriptEnabled = true
  this.settings.domStorageEnabled = true
  this.addJavascriptInterface(WebAppInterface(this@MainActivity), "Android")

  this.webChromeClient = object : WebChromeClient() {
      override fun onPermissionRequest(request: PermissionRequest) {
          request.grant(request.resources)
      }
  }

  loadUrl("https://global-stg.transak.com?apiKey=<YOUR_API_KEY>&sessionId=<YOUR_SESSION_ID>")
}

class WebAppInterface(private val context: Context) {
    @JavascriptInterface
    fun postMessage(eventData: String) {
        Log.d("WebViewEvent", "postMessage: $eventData")
    }
}
```

#### 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_WIDGET_OPEN
        </code>
      </td>

      <td>
        Widget fully loaded
      </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_WIDGET_CLOSE
        </code>
      </td>

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