Flutter WebView中Moneris支付Google Pay弹窗数据回传问题咨询

1. 拦截Google Pay跳转并在WebView内处理 #

利用webview_flutter的导航拦截能力，捕获Google Pay相关跳转请求，阻止其打开系统浏览器，改为在当前WebView环境内加载。

• 实现NavigationDelegate的onNavigationRequest方法，识别包含google.com/pay或Moneris跳转至Google Pay的特定URL。
• 对匹配URL返回NavigationDecision.prevent阻止默认行为，调用webViewController.loadRequest在当前WebView加载目标页面，或开启WebView多窗口支持让跳转在App内新窗口打开。
• 配置WebView权限：
  • Android：在WebViewWidget的android参数中启用javaScriptEnabled、domStorageEnabled，设置setAllowUniversalAccessFromFileURLs(true)。
  • iOS：在WebViewWidget的ios参数中开启preferences.javaScriptEnabled，允许跨域请求。

2. 注入JavaScript修改Google Pay按钮行为 #

通过WebView的JS注入能力，重写按钮点击逻辑，避免跳转，直接在当前页面调用Google Pay JS API发起请求。

• WebView加载完成后注入自定义脚本，监听Google Pay按钮点击并阻止默认跳转：

  webViewController.runJavascript('''
    document.querySelector('.google-pay-button').addEventListener('click', function(e) {
      e.preventDefault();
      const paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'});
      const paymentDataRequest = {/* 与原网页一致的支付请求参数 */};
      paymentsClient.loadPaymentData(paymentDataRequest).then(function(paymentData) {
        window.postMessage(paymentData, '*');
      }).catch(function(err) {
        console.error(err);
      });
    });
  ''');
  

• 确保原网页已加载Google Pay JS SDK，通过postMessage将支付数据传递给Moneris iframe，完成后续交互。

3. 配置WebView支持弹窗与多窗口 #

Google Pay在浏览器中通过window.open弹窗实现，WebView默认不支持弹窗会导致跳转系统浏览器，可配置允许弹窗并在App内加载。

• Android端：在WebViewWidget的android参数中设置WebSettings.setSupportMultipleWindows(true)，实现WebChromeClient的onCreateWindow方法创建新WebView实例加载弹窗内容。
• iOS端：在WKWebViewConfiguration中设置suppressesIncrementalRendering = false，实现WKUIDelegate的createWebViewWithConfiguration方法返回新WKWebView处理弹窗。

4. 采用WebView与原生混合通信传递支付数据 #

通过WebView和Flutter原生的通信机制，由原生调用Google Pay SDK完成支付，再将结果回传给网页。

• 步骤：
  1. 注入JS监听Google Pay按钮点击，通过JavaScriptChannel或callHandler向Flutter原生发送支付请求。
  2. Flutter原生调用Google Pay原生SDK（Android用com.google.android.gms:pay，iOS用GooglePay框架）发起支付。
  3. 支付完成后，Flutter通过runJavascript将结果传递给Moneris iframe，完成结账流程。

内容的提问来源于stack exchange，提问作者Sri Charan