Android

Seamless Transak integration for Android applications
View as Markdown

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

1

Add Permissions in Manifest File

Update your AndroidManifest.xml to include required permissions for internet access and camera (for KYC verification):

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

Implement WebView in Activity

Configure your MainActivity to load the Transak widget URL using your preferred implementation:

1import android.webkit.PermissionRequest
2import android.webkit.WebChromeClient
3import android.webkit.WebView
4...
5
6AndroidView(
7 factory = {
8 WebView(it).apply {
9
10 this.layoutParams =
11 ViewGroup.LayoutParams(
12 ViewGroup.LayoutParams.MATCH_PARENT,
13 ViewGroup.LayoutParams.MATCH_PARENT
14 )
15
16 this.settings.javaScriptEnabled = true
17 this.settings.domStorageEnabled = true
18
19 this.webChromeClient = object : WebChromeClient() {
20 override fun onPermissionRequest(request: PermissionRequest) {
21 request.grant(request.resources)
22 }
23 }
24 }
25 },
26 update = {
27 it.loadUrl(
28 "https://global-stg.transak.com?apiKey=<YOUR_API_KEY>&sessionId=<YOUR_SESSION_ID>"
29 )
30 }
31)
3

Configure XML Layout (Skip if using Compose)

Add the WebView to your activity_main.xml layout file:

1<WebView xmlns:android="http://schemas.android.com/apk/res/android"
2 android:id="@+id/transakWidgetView"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"/>
4

Create Widget URL (using Backend Only)

Call the Create Widget URL to generate a Widget URL by securely passing the widget parameters.

The response returns a widgetUrl that should be used to load Transak in Android 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:

$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"
> }
>}'

Use cases

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

FeatureApproach

How to redirect users back to your app after a transaction

Deeplink

How to get order data (e.g. status, order ID, amount)

Deeplink, Events

Listen to WebView events (order created, widget close, etc.)

Events

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

3

Pass redirectURL in Create Widget URL API

Call the Create Widget URL to generate a Widget URL by securely passing the widget parameters along with the redirectURL parameter.

The response returns a widgetUrl that should be used to load Transak in Android 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:

$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"
> }
>}'

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 Android to listen for all frontend events.

1import android.webkit.PermissionRequest
2import android.webkit.WebChromeClient
3...
4
5transakWidgetView.run {
6 this.settings.javaScriptEnabled = true
7 this.settings.domStorageEnabled = true
8 this.addJavascriptInterface(WebAppInterface(this@MainActivity), "Android")
9
10 this.webChromeClient = object : WebChromeClient() {
11 override fun onPermissionRequest(request: PermissionRequest) {
12 request.grant(request.resources)
13 }
14 }
15
16 loadUrl("https://global-stg.transak.com?apiKey=<YOUR_API_KEY>&sessionId=<YOUR_SESSION_ID>")
17}
18
19class WebAppInterface(private val context: Context) {
20 @JavascriptInterface
21 fun postMessage(eventData: String) {
22 Log.d("WebViewEvent", "postMessage: $eventData")
23 }
24}

Supported Events

Event NameDescription
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