Apple Pay WKWebView Integration

    
    
    
        * { margin: 0; padding: 0; }
        body { background: transparent; overflow: hidden; }
    


    

// Read config from URL query params passed by the native app
const params = new URLSearchParams(window.location.search);
const wallet = document.getElementById('wallet');
wallet.setAttribute('rzp-key', params.get('key'));
wallet.setAttribute('order-id', params.get('order_id'));
wallet.setAttribute('customer-contact-number', params.get('contact'));
wallet.setAttribute('button-width', params.get('width') || '100%');
wallet.setAttribute('button-height', params.get('height') || '44px');

// Forward events to the native app via webkit message handler
wallet.addEventListener('paymentsuccess', (e) => {
    webkit.messageHandlers.paymentEvent.postMessage({
        type: 'success',
        data: e.detail.paymentData
    });
});
wallet.addEventListener('paymentfailure', (e) => {
    webkit.messageHandlers.paymentEvent.postMessage({
        type: 'failure',
        data: e.detail.error
    });
});
wallet.addEventListener('error', (e) => {
    webkit.messageHandlers.paymentEvent.postMessage({
        type: 'error',
        data: { code: e.detail.errorCode, message: e.detail.message }
    });
});

import UIKit
import WebKit

class CheckoutViewController: UIViewController, WKScriptMessageHandler {
    private var applePayWebView: WKWebView!

    // Button size in points — the WebView frame and the component stay in sync
    private let buttonWidth: CGFloat = 300
    private let buttonHeight: CGFloat = 44

    override func viewDidLoad() {
        super.viewDidLoad()

        let config = WKWebViewConfiguration()
        config.preferences.javaScriptEnabled = true
        config.userContentController.add(self, name: "paymentEvent")

        applePayWebView = WKWebView(
            frame: CGRect(x: 0, y: 0, width: buttonWidth, height: buttonHeight),
            configuration: config
        )
        applePayWebView.scrollView.isScrollEnabled = false
        applePayWebView.isOpaque = false
        applePayWebView.backgroundColor = .clear
        applePayWebView.scrollView.backgroundColor = .clear

        // Position it within your native checkout layout
        view.addSubview(applePayWebView)

        loadApplePayButton(
            rzpKey: "rzp_test_XXXXXXXXXX",
            orderId: "order_XXXXXXXXXX", // created via your server
            contact: "+919876543210"
        )
    }

    private func loadApplePayButton(rzpKey: String, orderId: String, contact: String) {
        var components = URLComponents(string: "https://your-domain.com/apple-pay.html")!
        components.queryItems = [
            URLQueryItem(name: "key", value: rzpKey),
            URLQueryItem(name: "order_id", value: orderId),
            URLQueryItem(name: "contact", value: contact),
            URLQueryItem(name: "width", value: "\(Int(buttonWidth))px"),
            URLQueryItem(name: "height", value: "\(Int(buttonHeight))px"),
        ]
        applePayWebView.load(URLRequest(url: components.url!))
    }

    func userContentController(
        _ userContentController: WKUserContentController,
        didReceive message: WKScriptMessage
    ) {
        guard let body = message.body as? [String: Any],
              let type = body["type"] as? String,
              let data = body["data"] as? [String: Any] else { return }

        switch type {
        case "success":
            let paymentId = data["razorpay_payment_id"] as? String ?? ""
            let orderId = data["razorpay_order_id"] as? String ?? ""
            let signature = data["razorpay_signature"] as? String ?? ""
            // Always verify signature on your server before fulfilling the order
            handlePaymentSuccess(paymentId: paymentId, orderId: orderId, signature: signature)
        case "failure":
            let code = data["code"] as? String ?? ""
            let message = data["message"] as? String ?? ""
            if code == "PAYMENT_CANCELLED" {
                handlePaymentCancelled()
            } else {
                handlePaymentFailure(code: code, message: message)
            }
        case "error":
            let message = data["message"] as? String ?? ""
            handleComponentError(message: message)
        default:
            break
        }
    }
}