为什么在 ajax 请求后 Google Pay 在 iPhone Safary 中不起作用？

Question

我尝试在网站上添加一个 Googla Pay 按钮。我遵循 Google 支付实施教程 (https://developers.google.com/pay/api/web/guides/tutorial)。

有一个密码：

var paymentsClient = getGooglePaymentsClient();
paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
    .then(function(response) {
        //...
    })
    .catch(function(err) {
        //...
    });

在调用上述代码之前，我需要从我的服务器端获取一些数据，所以我执行了 http post 请求。在我的 post 请求的成功处理程序中，我调用了上面的代码。它在我的 Android 浏览器和笔记本电脑浏览器中运行良好。但它不适用于 Safari。我收到“意外的开发人员错误，请稍后再试”错误。如果我在没有 ajax 请求的情况下调用它，它也可以在 Safari 中工作。有人可以提出解决方案吗？

Answer 1

感谢包括 jsfiddle。

它不起作用的原因是当您在 Safari 中调用 loadPaymentData 时，Google Pay 试图打开一个弹出窗口 window。当单击事件（用户启动的操作）触发新的 window 时，弹出窗口 window 按预期打开。当它由非用户启动的操作触发时，Google Pay 被加载到同一个 window 中，最终导致它失败。

当您在点击处理程序中发出 ajax 请求然后调用 loadPaymentData 时，Safari 似乎将其视为非用户启动的操作。

在 Safari 中查看以下 example：

const ajaxButton = document.getElementById('ajax');
const nojaxButton = document.getElementById('nojax');

ajaxButton.addEventListener('click', event => {
  $.get('/echo/json/', () => {
    window.open('about:blank');
  });
});

nojaxButton.addEventListener('click', event => {
  window.open('about:blank');
});

我建议避免在 loadPaymentData 之前对按钮单击事件进行任何 HTTP 调用。如果您可以在单击按钮之前获取数据，那么就这样做。

出于兴趣，你要获取什么样的数据？

为什么在 ajax 请求后 Google Pay 在 iPhone Safary 中不起作用？

Why Google Pay doesn't work from iPhone Safary after an ajax request?

iphone

mobile-safari

google-pay