iOS 13 Apple Pay button click throws error: "Must create a new ApplePaySession from a user gesture handler."

Question

在一个已与 Apple Pay 集成的网站上工作了大约一年，现在没有任何问题。我们注意到我们现在总是收到 iOS 13 台设备的错误。 iOS 12 及以下所有工作正常。

前端点击处理程序：

<div class="btn btn-apple">
  <div class="apple-pay-button apple-pay-button-white" lang="en" data-bind="click: intializeApplePaySession"></div>
</div>

JS 点击处理程序：

self.intializeApplePaySession = function() {
  new RestClient(RestClient.POST, "/rest/model/someController", {},
    //Success
    function(data, textStatus, jqXHR) {

      var session = new ApplePaySession(3,data.applePayPaymentRequest);
      initializeCallbacks(session);
      session.begin();
    },
...

"Must create a new ApplePaySession from a user gesture handler." 总是在

var session = new ApplePaySession(3,data.applePayPaymentRequest);

所有 iOS 13 台设备。 iOS 12 及以下使用相同的代码可以正常工作。

从我的调试中我可以看到正在处理的事件是一个对我有意义的 MouseEvent。关于为什么抛出这个的任何想法？

Answer 1

我们正在逐步摆脱让网站在没有用户输入的情况下进行跨域调用的做法。

这已经被锁定了一段时间的方法之一是您无法触发，例如，表单的提交按钮......除非您从 click() 处理程序中执行。因此，您可以在页面上放一张闪亮的大 "Buy now" 图片，然后通过单击该图片提交表单，但您不能只做 setTimeout(form.submit(), 100)

我认为您在此处也有相同的 class。 REST 调用在点击处理程序中，但 apple pay 调用在 REST 调用的回调中，因此实际上并不在 click() 处理程序中。

当然，您正在使用 REST 调用来生成要传递给 Apple 的数据。您可能必须推测性地生成该数据。但在进行基础设施工作之前，我会试验一下您的点击处理程序的异步版本是否通过了他们的健全性检查。

Answer 2

与 Jason 和 Woodrow 弟兄讨论后的工作片段

调用后端并获取当前购物车详细信息的同步函数。我们之前在成功回调中有这个的原因是因为我们使用的是 SPA 框架，所以购物车可以随时更改。当页面加载或数据可能过时时，我们不能调用它。

self.getApplePayData = function() {
  var self = this;
  new RestClient(RestClient.POST, "/rest/model/getApplePayPaymentRequest", {},
    function(data, textStatus, jqXHR) {
      self.applePayData = data;
    },
....

 self.intializeApplePaySession = function() {
  var self = this;
  self.getApplePayData();
  var session = new ApplePaySession(3,self.applePayData.applePayPaymentRequest);

我认为关键问题是我们正在从 rest 调用的成功回调中创建一个新的 ApplePaySession，而 Apple 似乎不再希望它成为可能。

Answer 3

参考自官方文档

You attempt to create the ApplePaySession outside of a user gesture handler. The exception error "Must create a new ApplePaySession from a user gesture handler" appears.

所以在你的情况下，你必须创建一个 apple pay 会话，比如

session = new window.ApplePaySession(version, request);

然后创建对服务器的请求并接收响应。

const data = async getSomeCheckoutData();

然后您可以继续付款 throw apple pay

...
session.begin();

主要思想是，首先创建一个会话。然后你可以做请求，然后开始苹果支付会话。

Answer 4

您必须在 class 上面声明 ApplePayInstance 变量，以欺骗 apple pay 会话，使其将其视为手势，也不要调用 promises

http://baiduhix.blogspot.com/2018/06/must-create-new-applepaysession-from.html

iOS 13 Apple Pay button click throws error: "Must create a new ApplePaySession from a user gesture handler."

iOS 13 Apple Pay button click throws error: "Must create a new ApplePaySession from a user gesture handler."

javascript

ios

knockout.js

applepay