Flutter 将 Paypal 按钮与 WebView 集成

Question

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

我的问题是，在 PayPal 订阅过程的某个阶段（准确地说是最后一步），PayPal window 一直保持 "Processing"。

首先，让我展示一下我的 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 通道来从 JavaScript.

调用我的 Dart 代码中的函数

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

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

我可以登录 Paypal，所有这些步骤都正常。

太棒了，但让我向您展示在我按下 "Agree and Subscribe" 后连续发生的情况（只是这最后一步表现得很奇怪）：

正在开始处理...

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

然后在 Android 上进入空白屏幕：

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

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

有人看过这个吗？跟PayPal打开的"popup"有关系吗？

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

任何帮助将不胜感激！

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

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

Answer 1

如日志所述，您发送的请求来自 Origin null。这意味着请求的来源来自本地页面，而不是需要在您的 paypal 帐户中定义的可信来源。 Paypal 的 api 应该在为您提供此网页的服务器上实施 paypal 上的端点不接受。在这里阅读更多：Paypal Access-Control-Allow-Origin

Answer 2

因此，经过许多小时的谷歌搜索和寻找替代方案后，我有了完全不使用 WebView 的想法。而不是使用 webview_flutter plugin, which is limited in this case, I am now using url_launcher and uni_links.

我首先调用 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;
        });
}

所以基本上发生了什么，是我打开了一个合适的浏览器 window。然后使用正常的 HTML 和 Javascript，我仍然检测到 PayPal onApprove() 函数等。但是，然后函数执行，我打开 uni link，结果打开了应用程序我们离开的地方。

如果 WebView 给您带来问题，这是一个很好的选择。配置更多，但对我来说效果很好。

我仍然对任何其他建议持开放态度 :) - 尽管我已经离开了这个 - 会很有趣地了解更多！

Flutter 将 Paypal 按钮与 WebView 集成

Flutter Integrate Paypal Buttons with WebView

paypal-subscriptions

android-webview

dart

wkwebview

flutter