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

Make sure to add your API key and customise using query parameters.

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

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

https://global-stg.transak.com?apiKey=<YOUR_API_KEY>&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>&environment=STAGING")
  
}

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