Payment Widget installation and setup

import WebKit

final class PaymentViewController: UIViewController, WKScriptMessageHandler {

  var onComplete: ((Any?) -> Void)?
  var onCancel: (() -> Void)?
  var onError: ((Any?) -> Void)?

  private let webView: WKWebView = {
    let webView = WKWebView(frame: .zero)
    webView.translatesAutoresizingMaskIntoConstraints = false
    return webView
  }()

  override func viewDidLoad() {
    super.viewDidLoad()

    view.addSubview(webView)
    NSLayoutConstraint.activate([
      webView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
      webView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
      webView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
      webView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
    ])

    // Registers the exact handler name the Widget looks for
    webView.configuration.userContentController.add(self, name: "uphdPaymentWidget")

    Task {
      do {
        let session = try await createPaymentWidgetSession() // calls your backend

        guard let urlString = session["url"] as? String, let url = URL(string: urlString) else {
          onError?(["message": "Payment Widget session response is missing a valid 'url'"])
          return
        }

        webView.load(URLRequest(url: url))
      } catch {
        onError?(["message": "\(error)"])
      }
    }
  }

  // Replies to the Widget's "load" message with an "init" command carrying an options
  // object — same shape as the SDK's PaymentWidgetOptions. Empty here; see Configuration
  // reference to customize it.
  private func sendInitMessageToWidget() {
    let initMessage: [String: Any] = ["type": "init", "options": [:]]

    guard let data = try? JSONSerialization.data(withJSONObject: initMessage),
          let json = String(data: data, encoding: .utf8) else {
      return
    }

    webView.evaluateJavaScript("window.PaymentWidgetBridge.sendMessageToWidget(\(json));")
  }

  // Nudges the page's opacity to force a repaint — needed to work around a WKWebView
  // redraw bug when the Widget uses the View Transitions API.
  private func forceRepaintWidget() {
    webView.evaluateJavaScript("""
    document.documentElement.style.opacity = '0.99';
    setTimeout(() => { document.documentElement.style.opacity = '1'; }, 0);
    """)
  }

  func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    // The Widget JSON.stringifies its messages before posting them, so the body
    // arrives as a string rather than an already-decoded dictionary.
    guard message.name == "uphdPaymentWidget",
          let jsonString = message.body as? String,
          let data = jsonString.data(using: .utf8),
          let messageDict = try? JSONSerialization.jsonObject(with: data) as? [String: Any],
          let type = messageDict["type"] as? String else {
      return
    }

    switch type {
      case "load":          sendInitMessageToWidget()
      case "force_repaint": forceRepaintWidget()
      case "ready":          print("Payment Widget is ready")
      case "complete":       onComplete?(messageDict["value"])
      case "cancel":         onCancel?()
      case "error":          onError?(messageDict["error"])
      default: print("Unknown Payment Widget message type: \(type)")
    }
  }

  deinit {
    webView.configuration.userContentController.removeScriptMessageHandler(forName: "uphdPaymentWidget")
  }
}

import android.webkit.WebView
import androidx.webkit.JavaScriptReplyProxy
import androidx.webkit.WebViewCompat
import androidx.webkit.WebViewFeature
import org.json.JSONObject

class PaymentActivity : AppCompatActivity() {

  private lateinit var webView: WebView

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_payment)

    webView = findViewById(R.id.webview)
    webView.settings.javaScriptEnabled = true

    if (WebViewFeature.isFeatureSupported(WebViewFeature.WEB_MESSAGE_LISTENER)) {
      WebViewCompat.addWebMessageListener(
        webView,
        "uphdPaymentWidget",
        setOf(
          "https://payment-widget.enterprise.sandbox.uphold.com",
          "https://payment-widget.enterprise.uphold.com"
        )
      ) { _, message, _, _, replyProxy ->
        val body = JSONObject(message.data ?: return@addWebMessageListener)

        when (body.getString("type")) {
          "load" ->     sendInitMessageToWidget(replyProxy)
          "ready" ->    Log.d("Payment", "Payment Widget is ready")
          "complete" -> handlePaymentComplete(body.opt("value"))
          "cancel" ->   handlePaymentCancel()
          "error" ->    handlePaymentError(body.opt("error"))
          else -> Log.w("Payment", "Unknown Payment Widget message type: ${body.getString("type")}")
        }
      }
    } else {
      // Fall back to Setup Web SDK on WebViews that don't support WEB_MESSAGE_LISTENER.
    }

    lifecycleScope.launch {
      try {
        val session = createPaymentWidgetSession() // calls your backend
        webView.loadUrl(session.getString("url"))
      } catch (e: Exception) {
        handlePaymentError(e.message)
      }
    }
  }

  // Replies to the Widget's "load" message with an "init" command carrying an options
  // object — same shape as the SDK's PaymentWidgetOptions. Empty here; see Configuration
  // reference to customize it.
  private fun sendInitMessageToWidget(replyProxy: JavaScriptReplyProxy) {
    val initMessage = JSONObject()
      .put("type", "init")
      .put("options", JSONObject())

    replyProxy.postMessage(initMessage.toString())
  }

  private fun handlePaymentComplete(value: Any?) { /* navigate to success */ }
  private fun handlePaymentCancel() { /* return user to previous screen */ }
  private fun handlePaymentError(error: Any?) { /* show error UI */ }
}

import React, { useRef } from 'react';
import { WebView } from 'react-native-webview';

const PaymentScreen = ({ session }) => {
  const webViewRef = useRef(null);

  // Replies to the Widget's "load" message with an "init" command carrying an options
  // object.
  const sendInitMessageToWidget = () => {
    const initMessage = JSON.stringify({ options: {}, type: 'init' });

    webViewRef.current?.injectJavaScript(`window.PaymentWidgetBridge.sendMessageToWidget(${initMessage}); true;`);
  };

  const handleMessage = (event) => {
    const message = JSON.parse(event.nativeEvent.data);

    switch (message.type) {
      case 'load':     sendInitMessageToWidget(); break;
      case 'ready':     console.log('Payment Widget is ready'); break;
      case 'complete':  handlePaymentComplete(message.value); break;
      case 'cancel':    handlePaymentCancel(); break;
      case 'error':     handlePaymentError(message.error); break;
      default: console.log('Unknown Payment Widget message type:', message.type);
    }
  };

  const handlePaymentComplete = (value) => { /* navigate to success */ };
  const handlePaymentCancel = () => { /* return user to previous screen */ };
  const handlePaymentError = (error) => { /* show error UI */ };

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: session.url }}
      javaScriptEnabled
      onMessage={handleMessage}
    />
  );
};