Payment Request API银行卡支付报错与配置咨询

你碰到的Invalid payment method identifier format报错，是因为Chrome从96版本开始就彻底移除了旧版basic-card支付方式的支持，2021年之前的Payment Request API教程里写的直接传basic-card、卡组织名称作为supportedMethods的写法已经完全失效，现在API要求所有支付方式标识必须是符合规范的URL格式，不存在通用的内置银行卡支付选项。

• 不需要单独找Visa、Mastercard等卡组织的独立标识URL，卡组织本身不直接面向商户提供PR API的接入标识，所有银行卡类的PR API对接，supportedMethods字段都要填你签约的收单支付服务商（也就是你用的Worldpay）提供的专属支付方式URL，对应data字段的参数规则也完全由Worldpay定义，没有通用配置，直接找Worldpay的技术支持索要PR API接入文档即可。
• 如果Worldpay暂时没有提供适配PR API的自定义支付方式，你可以直接用W3C标准化的安全支付确认（SPC）方案对接，这个方案是目前浏览器原生支持的通用银行卡无跳转支付方案，supportedMethods固定填"secure-payment-confirmation"即可，不需要依赖支付服务商的自定义URL，只要Worldpay支持SPC协议就能完成对接。

const paymentMethods = [
    {
        supportedMethods: "secure-payment-confirmation",
        data: {
            // 以下参数从Worldpay的支付接口侧获取对应值
            challenge: new Uint8Array([]), // 支付接口返回的验证挑战值
            rpId: window.location.hostname,
            credentialIds: [], // 用户已绑定银行卡的支付凭证ID数组
            payeeName: "你的站点名称",
            timeout: 60000
        }
    }
];

const details = {
    total: {
        label: 'Test payment',
        amount: { currency: 'GBP', value: '1.00' }
    }
};

const request = new PaymentRequest(paymentMethods, details);
request.show()
    .then(response => {
        // 将支付响应回传给Worldpay完成扣款验证
        console.log('获取支付响应成功', response);
        response.complete('success');
    })
    .catch(err => {
        console.error('支付流程异常', err);
    });

• 不要浪费时间搜网上所谓的“Visa/Mastercard通用PR API标识”，这类公开通用标识不存在，非SPC场景下的支付标识只有你的签约收单方有权提供。
• 你用的Chrome 103版本已经完整支持SPC方案，不需要升级浏览器就能直接调试。
• 所有2021年之前发布的PR API教程涉及basic-card的内容都已经完全过时，没有参考价值，直接看最新的W3C标准或者你的支付服务商提供的接入文档即可。

内容的提问来源于stack exchange，提问作者El Guapo