Flutter 将 Paypal 按钮与 WebView 集成

标签 flutter dart android-webview wkwebview paypal-subscriptions

我在将 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 按钮,如下所示:

enter image description here

我也可以点击(按下)它们。

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

太棒了,但让我向您展示在我按下“同意并订阅”后连续发生的情况(只是这最后一步表现得很奇怪):

enter image description here

正在开始处理...

这就是它在 iOS 上卡住的地方(只是说...):

enter image description here

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

enter image description here

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

如前所述,如果我在这些设备上的浏览器中打开它,它会正常加载并正确结束 PayPal 进程,然后返回到主 WebView 屏幕。

有没有人看过这个? 和PayPal打开的“弹窗”有关系吗?

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

任何帮助将不胜感激!

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

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

最佳答案

因此,经过许多小时的谷歌搜索和寻找替代方案后,我有了完全不使用 WebView 的想法。而不是使用 webview_flutter插件,在这种情况下受到限制,我现在使用 url_launcheruni_links .

我首先调用 url_launcher 打开浏览器,其中包含一个托管在我们域中某处的 HTML 页面。此 html 页面仅用于在移动应用程序中显示。

使用uni_links,当组件didChangeDependencies时(当然是在Info.plistAndroidManifest.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,我仍然检测到 PayPal onApprove() 函数等。但是,函数执行后,我打开了 uni link,结果打开了我们离开的应用程序。

如果 WebView 给您带来问题,这是一个很好的选择。更多的配置,但它对我的情况来说工作得很好。

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

关于Flutter 将 Paypal 按钮与 WebView 集成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57390362/

相关文章:

android - 谷歌云端硬盘同意屏幕卡住

java - Flutter 应用程序体积太大

database - 如何在 Flutter 中的不同应用页面之间正确共享对象

Android WebView 中的 URL 重定向

javascript - 在 html (javascript) 中持久存储值

flutter :- How manage the backstack like in Android "SingleTask"?

android - 在flutter中使用List进行滚动或扩展或滚动的当前方式

text - 如何在给定宽度的小部件中移动文本

android - 如何在 Flutter 中将文件从本地存储导入到数据库中

android - 在 Android 版本的 phonegap 中不滚动 HTML 页面内的元素