You can add the Transak widget to your Android app using the below code.

Make sure to add your apiKey, sessionId and customise using query parameters.

Create a Session (Backend Only):

Call the Create Session API to generate a sessionId by securely passing the widget parameters:

The response will return a sessionId.

Use the code as shown:

MainActivity.Java

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>")
  
}

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>&environment=STAGING&productsAvailed=BUY,SELL"
        )
    }
)

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>&environment=STAGING&productsAvailed=BUY,SELL");

activity_main.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"/>

Provide permissions in AndroidManifest.XML

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

Deeplinking

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

You can pass your custom deeplink URL by including it as the redirectURL parameter in sessionIdparameter.

https://global-stg.transak.com?apiKey=<YOUR_API_KEY>&sessionId=<YOUR_SESSION_ID>

"widgetParams": {
redirectURL=myapp\://transak-redirect,
  }

When Transak redirects back, it includes additional query parameters appended to deeplink URL mentioned here.

Register deeplink using intent filter in AndroidManifest.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"/>
        <dataandroid:scheme="myapp"
            android:host="transak-redirect" />
    </intent-filter>
</activity>

Listen and parse parameters when deeplink is invoked

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

Events

Transak allows listening of in-widget events (like order creation, completion, and widget close) through native event handlers in Android WebViews. This enables mobile apps to respond to user actions in real-time without relying on manual JavaScript injections.

Use the handler name 'Android' in the JavaScript interface to listen all frontend events

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

Event Name	Description
`TRANSAK_WIDGET_INITIALISED`	Widget initialised with query params
`TRANSAK_WIDGET_OPEN`	Widget fully loaded
`TRANSAK_ORDER_CREATED`	Order created by user
`TRANSAK_ORDER_SUCCESSFUL`	Order is successful
`TRANSAK_ORDER_CANCELLED`	Order is cancelled
`TRANSAK_ORDER_FAILED`	Order is failed
`TRANSAK_WIDGET_CLOSE`	Widget is about to close