为什么在 ajax 请求后 Google Pay 无法在 iPhone Safari 上运行？

Question

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

有一个代码：

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

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

Answer 1

感谢您提供 jsfiddle。

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

看起来当您在点击处理程序中发出 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 调用。如果您可以在单击按钮之前获取数据，请执行此操作。

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