flutter - Flutter 将 Paypal 按钮与 WebView 集成

问题描述

我的 PayPal 集成到webview_flutter时遇到了一个奇怪的问题。这似乎与 WebView 有关，因为当我在 iOS Safari 或 Chrome 中打开它时，它工作正常。

我的问题是，在 PayPal 订阅过程的某个阶段（准确地说是最后一步），PayPal 窗口只是保持“处理中”。

首先，让我展示一下我的 WebView 部分：

    WebView(
      initialUrl: builtURL,
      javascriptMode: JavascriptMode.unrestricted,
      onWebViewCreated: (WebViewController webViewController) {
        _controller = webViewController;
      },
      javascriptChannels: Set.from(
        [
          JavascriptChannel(
              name: 'OnApprove',
              onMessageReceived: (JavascriptMessage message) async {

              }),
          JavascriptChannel(
              name: 'OnSuccess',
              onMessageReceived: (JavascriptMessage message) {

              }),
          JavascriptChannel(
              name: 'OnCancel',
              onMessageReceived: (JavascriptMessage message) {

              }),
          JavascriptChannel(
              name: 'OnError',
              onMessageReceived: (JavascriptMessage message) {

              }),
        ],
      ),
    )

我使用 Javascript Channels 能够从 JavaScript 调用我的 Dart 代码中的函数。

一切正常，我可以看到我的 PayPal 按钮，如下所示：

我也可以点击（按）它们。

我可以登录 Paypal，所有这些步骤都运行良好。

太好了，但是让我向您展示在我按下“同意并订阅”之后会发生什么（只是最后一步的行为很奇怪）：

正在开始处理...

这就是它卡在 iOS 上的地方（只是说......）：

在 Android 上，它会进入一个空白屏幕：

现在，我可以无限等待，什么都不会发生——它只是停留在每个平台的相应屏幕上。

如前所述，如果我在这些设备上的浏览器中打开它，它确实可以正常加载并正确完成 PayPal 流程，并返回到主 WebView 屏幕。

有没有人见过这个？它与PayPal打开的“弹出窗口”有什么关系吗？

需要注意的是，如果我按右上角的“X”关闭 PayPal 弹出窗口，它仍然会触发“onCancel”事件 - 所以它不像被卡住 - 也许它只是无法加载页面或其他东西。 ..

任何帮助将不胜感激！

编辑 1：我设法在 Safari 中调试 WebView，这是我收到的错误消息。这些错误消息是有道理的。特别是 SAMEORIGIN 问题。也许这就是它最有可能失败的原因。这是输出：

有谁可能知道如何使用 WebView 解决这个问题？提前致谢！

标签： flutterdartandroid-webviewwkwebviewpaypal-subscriptions

解决方案

因此，经过许多小时的谷歌搜索和寻找替代方案后，我产生了根本不使用 WebView 的想法。我现在使用的是url_launcher和uni_links ，而不是使用在这种情况下受限的webview_flutter插件。

我首先调用url_launcher打开浏览器，其中包含托管在我们域某处的 HTML 页面。这个 html 页面被构建为仅从移动应用程序中显示。

使用uni_links，当组件didChangeDependencies（当然在配置和中的链接之后Info.plist）AndroidManifest.xml时，我像这样初始化它们：

Future<Null> initUniLinks() async {
    _sub = getUriLinksStream().listen((Uri uri) async {
        //Do something with uri... for example...
        
        Map<String, String> queryParameters = uri.queryParameters;
        String action = queryParameters["action"];

        switch (action) {
            case "onSuccess":
                //Do something...
            break;
        });
}

所以基本上发生了什么，我正在打开一个正确的浏览器窗口。然后使用普通的 HTML 和 Javascript，我仍然检测到 PayPalonApprove()功能等。但是，然后执行这些功能，我打开了uni link，这导致打开了我们离开的应用程序。

如果 WebView 给您带来问题，这是一个很好的选择。更多配置，但它适用于我的情况。

我仍然对任何其他建议持开放态度:) - 即使我已经从这个开始 - 了解更多信息会很有趣！

flutter - Flutter 将 Paypal 按钮与 WebView 集成

问题描述

解决方案

推荐阅读