iframe 中的 Apple Pay 集成问题答案

【问题标题】：Issue with Apple Pay integration in iframeiframe 中的 Apple Pay 集成问题
【发布时间】：2020-09-05 20:21:12
【问题描述】：

问题总结：

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

实际问题是，当我尝试创建 Apple Pay 会话时，我收到错误 InvalidAccessError: Trying to start an Apple Pay session from an document with different security origin than its top-level frame。” I '以前从未见过有人遇到过这种情况。

以下是我尝试创建 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，这就是我收到错误的地方。

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

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

【问题讨论】：

标签： javascript web applepay applepayjs

【解决方案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' });

【讨论】：