创建Apple Pay的PaymentRequest时触发TypeError错误求助

问题详情 #

我们正尝试为自有Web应用启用Apple Pay网页支付功能，参考Apple官方Payment Request API Demo及其他Web示例实现，但在创建PaymentRequest对象时触发TypeError，具体情况如下：

1. 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>

2. 点击触发的JS逻辑 #

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值，包括示例中的version 3）

3. 环境验证结果 #

• iPad绑定了添加测试卡的Sandbox账号
• 应用部署在已验证SSL证书的域名下，Safari中Apple Pay按钮正常显示
• 弹窗确认环境支持相关能力：

  startApplePay: function ApplePaySession() { [native code] }: true
  window:PaymentRequest

• 两个JSON弹窗均正常展示内容

4. 错误信息 #

创建PaymentRequest对象时直接触发catch块，抛出错误：

TypeError: Type error: PaymentRequest@[native code]
startApplePay@https:-myurl-:319:47
onclick@https://-myurl-:606:14:undefined

作为Apple Pay网页支付新手，我们推测遗漏了基础步骤，但未找到相关错误的排查信息，已使用Mac进行浏览器调试仍无进展。

解决方案 #

1. 修正PaymentRequest构造函数参数格式 #

PaymentRequest的第一个参数要求是支付方式数组，而非单个支付方式对象。你当前直接传入了applePayMethod单个对象，这是触发TypeError的核心原因，修改代码如下：

// 将单个对象改为数组形式
const request = new PaymentRequest([applePayMethod], paymentDetails);

2. 验证商户标识符配置 #

确认merchant.gov.azmvdnow.payment已在Apple开发者后台完成以下配置：

• 正确注册为Apple Pay商户标识符
• 完成对应域名的验证（即使按钮能显示，也可能存在配置细节遗漏）

3. 调整商户能力参数 #

Sandbox环境下，可尝试扩展merchantCapabilities的取值，确保覆盖测试卡支持的类型：

merchantCapabilities: ["supports3DS", "supportsCredit", "supportsDebit"]

4. 切换为ApplePaySession原生流程（备选） #

若通用PaymentRequestAPI仍有问题，可改用Apple官方推荐的ApplePaySession流程，示例代码如下：

async function startApplePay() {
    if (!ApplePaySession.canMakePayments()) {
        alert("Apple Pay not available");
        return;
    }

    const paymentRequest = {
        version: 10,
        merchantIdentifier: "merchant.gov.azmvdnow.payment",
        merchantCapabilities: ["supports3DS"],
        supportedNetworks: ["amex", "discover", "masterCard", "visa"],
        countryCode: "US",
        total: {
            label: "Demo (Card is not charged)",
            amount: { value: "27.50", currency: "USD" }
        },
        displayItems: [{
            label: "Item 1",
            amount: { value: "27.50", currency: "USD" }
        }]
    };

    const session = new ApplePaySession(10, paymentRequest);

    // 商户验证回调
    session.onvalidatemerchant = (event) => {
        // 调用后端接口完成商户验证，返回Apple Pay会话数据
        fetch("/your-merchant-validation-endpoint", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ validationURL: event.validationURL })
        })
        .then(res => res.json())
        .then(merchantSession => session.completeMerchantValidation(merchantSession))
        .catch(err => session.abort());
    };

    // 支付授权回调
    session.onpaymentauthorized = (event) => {
        // 处理支付授权逻辑，比如提交订单到后端
        session.completePayment(ApplePaySession.STATUS_SUCCESS);
    };

    session.begin();
}

内容的提问来源于stack exchange，提问作者Doug Breaux