尝试使用 Apple Pay 创建 PaymentRequest 时出现类型错误

Question

我们正在尝试为我们的 Web 应用程序启用 Web 上的 Apple Pay。

遵循网络上的示例，包括支付请求 API 的官方 Apple Pay 演示，以下 HTML 是我们定义 Apple Pay 按钮的方式：

<script async crossorigin
        src="https://applepay.cdn-apple.com/jsapi/v1.1.0/apple-pay-sdk.js"
        ></script>
...
        <apple-pay-button buttonstyle="black" type="plain" locale="en-US" onclick="startApplePay();"></apple-pay-button>

我有一台 iPad 连接到添加了测试卡的沙盒帐户。我正在通过带有受信任证书的 SSL 验证域来提供我的应用程序，并且该按钮确实出现在该设备上的 Safari 上，而在满足所有条件之前它不会出现。

onclick

为该按钮调用的代码是这样的：

    async function startApplePay() {
        alert("startApplePay: " + window.ApplePaySession + ": " + ApplePaySession.canMakePayments());

        if (!window.PaymentRequest) {
            alert("PaymentRequest not available");
            return;
        }

        alert("window.PaymentRequest");

        const applePayMethod = {
            supportedMethods: "https://apple.com/apple-pay",
            data: {
                version: 10,
                merchantIdentifier: "merchant.gov.azmvdnow.payment",
                merchantCapabilities: [
                    "supports3DS"
                ],
                supportedNetworks: [
                    "amex",
                    "discover",
                    "masterCard",
                    "visa"
                ],
                countryCode: "US"
            }
        };

        alert(JSON.stringify(applePayMethod));

        const paymentDetails = {
            total: {
                label: "Demo (Card is not charged)",
                amount: { value: "27.50", currency: "USD" }
            },
            displayItems: [{
                label: "Item 1",
                amount: { value: "27.50", currency: "USD" }
            }]
        };

        alert(JSON.stringify(paymentDetails));

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

        catch (e) {
            alert(e + ": " + e.stack + ": " + e.cause);
        }
    }

（我也尝试了不同的

version

值，回到链接示例使用的版本 3。）

警报表明我们正处于具备这些功能的路径中：

startApplePay: function ApplePaySession() { [本机代码] }: true

然后：

窗口：付款请求

然后两组：

{ ... JSON 匹配设置的内容 }

表明“JSON.stringify()”没有问题。

仅创建请求对象，尚未尝试使用它执行后续步骤，

catch

会触发以下内容：

TypeError：类型错误：PaymentRequest@[本机代码] 启动ApplePay@https:-myurl-:319:47 onclick@https://-myurl-:606:14:未定义

我对此是全新的，所以我认为我错过了一些基本的初始步骤，但我找不到任何关于此错误的搜索。由于我还无法访问 Mac，因此无法进行任何更复杂的浏览器调试/故障排除。

编辑：我现在有一台可以在浏览器中调试的 Mac，但到目前为止我还没有看到任何可以帮助我解决这个问题的东西。

Answer 1

令人烦恼的微小答案是

PaymentRequest

构造函数的第一个参数应该是一个数组。

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

（或者，从一开始就将变量设置为数组。两个链接的示例使用这两种方法，我错过了第一个后面的数组括号。）