javascript - iframe 中的 Apple Pay 集成问题

Question

问题总结:

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

实际问题是，当我尝试创建 Apple Pay session 时，我收到一个错误 InvalidAccessError: Trying to start an Apple Pay session from an document with different security origin than its top-level frame。”我没有以前见过任何人面对这个问题。

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

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