在 flutter webview 中打开支付弹出窗口

Question

我有一个 flutter 应用程序，它使用

webview_flutter

包来展示我的网站。该网站集成了 Moneris 支付网关，利用 Google Pay。在浏览器中，当用户单击 google pay 按钮时，它会打开一个弹出窗口，供用户选择要发送到 Moneris 的卡信息。支付网关还作为 iframe 嵌入到网络应用程序中。

但是在 webview 的情况下，当用户点击 google pay 按钮时，它会在浏览器中打开 google pay URL。问题是，用户选择卡后，需要将卡信息返回给 Moneris，但由于 Google Pay URL 在浏览器中打开，因此无法将数据发送回 web 应用程序中的 Moneris iframe。

我能想到的一个可行的解决方案是在应用程序内浏览器实例中的 webview 之外打开我的网站的网关页面以完成结账。但这感觉很糟糕的用户体验。

还有哪些其他可能的解决方案？除了在应用程序中实现本机支付网关之外。

谢谢

Answer 1

大多数支付网关限制嵌入式浏览器（如 WebView）中的支付。甚至可能在本机 WebView 上实现它也无济于事。我们最近在 Cashfree PG 上遇到了类似的问题，唯一可行的解决方案是实现他们的 flutter/Android SDK。然后，您可以从他们的 SDK（或您的后端）获取回调并继续实施。

Answer 2

解决方案：

将 Web 视图集成到 Flutter 应用程序中时，利用 flutter_inappwebview 包比传统的 webview 包更具优势。

在处理 Google Pay 等经常使用模式对话框的网站时，这种区别变得尤其明显。在 Flutter 应用程序中无缝处理这些模式需要配置 Web 视图以启用某些功能并使用 onCreateWindow 回调。

为了方便打开模式并适当处理它们，请确保在 InAppWebView 实例中设置以下属性：

javaScriptCanOpenWindowsAutomatically：true：此设置授权 JavaScript 自动打开新窗口。 supportMultipleWindows: true：启用对多个窗口的支持允许在 Web 视图中创建新窗口。 此外，实现 onCreateWindow 回调来拦截新窗口创建请求。在此回调中，您可以定义处理新窗口的行为。通常，这涉及将新的小部件推送到 Flutter 导航堆栈上，从而呈现根据您的应用程序的要求量身定制的自定义弹出小部件。