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

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