Apple Pay 付款请求 API iframe

Question

有一个页面实现了支付请求 API，它有一个 Applepay 按钮，一切正常。但是，一旦页面嵌入到 iframe 中，就会出现 SecurityError 错误： 尝试从安全源与其顶级框架不同的文档启动 Apple Pay 会话。

属性allow paymentrequest = 'true'

HTMLIFrameElement 接口的allowPaymentRequest 属性返回一个布尔值，指示是否可以在跨源iframe 上调用支付请求API。

两个页面都是 https。

example.com：

            const applePayMethod = {
                supportedMethods: "https://apple.com/apple-pay",
                data: {
                    version: 3,
                    merchantIdentifier: "somemerchantid",
                    merchantCapabilities: ["supports3DS",],
                    supportedNetworks: ["masterCard", "visa"],
                    countryCode: "US",
                },
            };

            const paymentDetails = {
                total: {
                    label: "My Merchant",
                    amount: { value: "27.50", currency: "USD" },
                },
            }

            try {
                const request = new PaymentRequest([applePayMethod], paymentDetails, {});

                const response = await request.show();
                const status = processResponse(response);
                response.complete(status);
            } catch (e) {
                console.log(e)
            }  

code-with-iframe.com

<iframe allowpaymentrequest='true' src="https://example.com/" frameborder="0"></iframe>

Answer 1

Allow paymentrequest 属性已弃用，浏览器不再支持

查看更多这里

Answer 2

从 Safari 17.0 开始，现在应该可以使用“allow= payment”属性，如下所示：

<iframe
  src="https://cross-origin.example"
  allow="payment">
</iframe>

https://www.w3.org/TR/ payment-request-1.1/#using-with-cross-origin-iframes