iOS | Transak | Documentation

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

Add Camera Permission

Update your Info.plist to include camera permission (required for KYC verification):

1 <key>NSCameraUsageDescription</key>
2 <string>Permission required for Camera Access.</string>

Implement WebView in View Controller

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

1 import SwiftUI
2 import WebKit
3 
4 struct WebView: UIViewRepresentable {
5     let url: URL
6 
7     func makeUIView(context: Context) -> WKWebView {
8         let webview = WKWebView()
9         return webview
10     }
11 
12     func updateUIView(_ uiView: WKWebView, context: Context) {
13         let request = URLRequest(url: url)
14         uiView.load(request)
15     }
16 }
17 
18 struct ContentView: View {
19     var body: some View {
20         WebView(url: URL(string: "https://global-stg.transak.com?apiKey=<YOUR_API_KEY>&sessionId=<YOUR_SESSION_ID>")!)
21         .edgesIgnoringSafeArea(.all)
22         .padding(10)
23     }
24 }

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

Feature	Approach
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

Deeplink

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

Register Deeplink in Info.plist

Add the URL scheme to your Info.plist to handle the deeplink

1 <key>CFBundleURLTypes</key>
2 <array>
3     <dict>
4         <key>CFBundleURLSchemes</key>
5         <array>
6             <string>myapp</string>
7         </array>
8     </dict>
9 </array>

Handle Deeplink and Parse Parameters

Listen for the deeplink and parse the returned parameters in your App

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

1 @main
2 struct SampleApp: App {
3      @State private var deepLinkPath: URL?
4 
5      var body: some Scene {
6          WindowGroup {
7              ContentView()
8              NavigationView {
9                  if let deepLinkPath = deepLinkPath {
10                    // handle deeplink query parameters
11                  } else {
12                    ContentView()
13                  }
14              }
15              .onOpenURL { url in
16                  if url.scheme == "myapp" {
17                      deepLinkPath = url
18                  }
19              }
20          }
21      }
22 }

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 iOS 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 iOS WebViews.

Add a script message handler to your WebView using the handler name IosWebview to listen for all frontend events.

1 struct WebView: UIViewRepresentable {
2     let url: URL
3 
4     func makeCoordinator() -> WebViewCoordinator {
5         return WebViewCoordinator(self)
6     }
7 
8     func makeUIView(context: Context) -> WKWebView {
9         let contentController = WKUserContentController()
10         contentController.add(context.coordinator, name: "IosWebview")
11 
12         let config = WKWebViewConfiguration()
13         config.userContentController = contentController
14 
15         let webView = WKWebView(frame: .zero, configuration: config)
16         webView.navigationDelegate = context.coordinator
17         webView.load(URLRequest(url: url))
18 
19         return webView
20     }
21 
22     func updateUIView(_ webView: WKWebView, context: Context) {}
23 
24     class WebViewCoordinator: NSObject, WKNavigationDelegate, WKScriptMessageHandler {
25         var parent: WebView
26 
27         init(_ parent: WebView) {
28             self.parent = parent
29         }
30 
31         func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
32             if message.name == "IosWebview", let body = message.body as? String {
33                 print(body)
34             }
35         }
36     }
37 }

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