iframe 中的 Apple Pay 集成问题

Question

问题总结：

我最近开始将 Apple Pay 集成到我的网站中，该网站实际上在 iframe 中加载了支付视图。这里的问题是我的 iframe 在与我的网站不同的域中加载。我按照 developer.apple.com 网站将 Apple Pay 集成到我的网站并创建了所有必要的证书和标识符。

实际问题是当我尝试创建 Apple Pay 会话时，我收到错误 InvalidAccessError：尝试从安全源与其顶级框架不同的文档启动 Apple Pay 会话。 " 我以前从未见过有人遇到过这种情况。

下面是我尝试创建 Apple 会话的代码。

var merchantIdentifier = 'my merchant identifier registered in developer account';
var promise = ApplePaySession.canMakePaymentsWithActiveCard(merchantIdentifier);
var canMakePayments = false;
promise.then(function (canMakePayments) {
    if(canMakePayments) {
        var session = new ApplePaySession(3, request);
    }
}, function(error) {
       alert(error);
});

一旦 canMakePayments true 行命中，代码就会尝试创建 ApplePaySession，这就是我收到错误的地方。

如果有人遇到过这个问题，请告诉我您是如何解决的。提前致谢。

注意：请理解这个问题可能不遵循定义问题的Whosebug标准。但是，这是我最近几天以来面临的一个真正而复杂的问题，而且我在任何地方都看不到答案。

Answer 1

唯一的办法是运行在顶部框架上放置一些 JS，并在它们之间使用消息进行通信。

例如在顶部框架中

window.addEventListener('message', (event) => {
  if(event.data.type === 'applepay') {
    const session = new ApplePaySession(...);

    ...

    session.onpaymentauthorized = (event) => {
      event.source.postMessage({ type: 'paymentauthorized', payment: event.payment});
    }

  }
});

在 iframe 中

window.addEventListener('message', (event) => {
  if(event.data.type ==== 'paymentauthorized') {
    // do something with the event.data.payment data you received
  }
});
iframe.postMessage({type: 'applepay' });

iframe 中的 Apple Pay 集成问题

Issue with Apple Pay integration in iframe

javascript

web

applepay

applepayjs