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

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

import SwiftUI
import WebKit

struct WebView: UIViewRepresentable {
    let url: URL

    func makeUIView(context: Context) -> WKWebView {
        let webview = WKWebView()
        return webview
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        let request = URLRequest(url: url)
        uiView.load(request)
    }
}

struct ContentView: View {
    var body: some View {
        WebView(url: URL(string: "https://global-stg.transak.com?apiKey=<YOUR_API_KEY>&environment=STAGING&productsAvailed=BUY,SELL")!)
        .edgesIgnoringSafeArea(.all)
        .padding(10)
    }
}

import UIKit
import WebKit

class WebViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {
    @IBOutlet weak var webView: WKWebView!

    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        webView.navigationDelegate = self
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        let myURL = URL(string: "https://global-stg.transak.com?apiKey=<YOUR_API_KEY>&environment=STAGING&productsAvailed=BUY,SELL")
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }

    func webView(_ webView: WKWebView, didReceive challenge: URLAuthenticationChallenge, completionHandler: @escaping (URLSession.AuthChallengeDisposition, URLCredential?) -> Void) {
        if let serverTrust = challenge.protectionSpace.serverTrust {
            completionHandler(.useCredential, URLCredential(trust: serverTrust))
        }
    }
}

Provide permission in Info.plist

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

Deeplinking

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

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 in Info.plist

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>

Listen and parse parameters when deeplink is invoked

@main
struct SampleApp: App {
     @State private var deepLinkPath: URL?  // Store deep link path
     
     var body: some Scene {
         WindowGroup {
             ContentView()
             NavigationView {
                 if let deepLinkPath = deepLinkPath {
                   //handle deeplink query parameters
                 } else {
                   ContentView()
                 }
             }
             .onOpenURL { url in
                 // Handle deeplink path
                 if url.scheme == "myapp" {
                     deepLinkPath = url
                 }
             }
         }
     }
}

Events

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

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

struct WebView: UIViewRepresentable {
    let url: URL
 
    func makeCoordinator() -> WebViewCoordinator {
        return WebViewCoordinator(self)
    }
    
    func makeUIView(context: Context) -> WKWebView {
        let contentController = WKUserContentController()
        contentController.add(context.coordinator, name: "IosWebview")
        
        let config = WKWebViewConfiguration()
        config.userContentController = contentController
        
        let webView = WKWebView(frame: .zero, configuration: config)
        webView.navigationDelegate = context.coordinator
        webView.load(URLRequest(url: url))
        
        return webView
    }
    
    func updateUIView(_ webView: WKWebView, context: Context) {}
    
    class WebViewCoordinator: NSObject, WKNavigationDelegate, WKScriptMessageHandler {
        var parent: WebView
        
        init(_ parent: WebView) {
            self.parent = parent
        }
        
        func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
            if message.name == "IosWebview", let body = message.body as? String {
                print(body)
            }
        }
    }
}

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