在iframe中集成Apple Pay的问题

Question

问题摘要：我最近开始将Apple Pay集成到我的网站中，实际上是在iframe中加载支付视图。

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

实际的问题是，当我试图创建Apple Pay会话时，我收到一个错误InvalidAccessError。Trying to start an Apple Pay session from a document with an different security origin than its top-level frame." 试图从一个安全来源与顶层框架不同的文档启动Apple Pay会话。" 我之前没有看到有人面临这种情况。

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

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，这就是我收到错误的地方。

请让我知道，如果有人面临这个问题，你是如何解决的。先谢谢你。

注意：请理解这个问题可能不符合stackoverflow定义问题的标准。但是，这是一个真正的、复杂的问题，我从过去几天开始就面临这个问题，但我在任何地方都没有看到答案。

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' });