Stripe新PaymentElement前端无法正常配置FPX支付方式问题咨询

• 确认测试模式下FPX已在Stripe后台激活：登录Stripe后台，进入「设置」-「支付方法」页面，找到FPX选项，开启测试模式的使用权限，确认你当前使用的API密钥归属的账户和开通FPX的账户一致，避免多账户混淆。
• 验证交易金额符合FPX要求：FPX最低交易门槛为1 MYR，对应你后端传入的以分为单位的amount值需≥100，低于该阈值时Stripe会自动将FPX从可选支付方式中剔除，可先测试传入200（对应2 MYR）验证是否能正常加载。
• 升级Stripe相关依赖到最新版本：
  1. 后端升级Python Stripe SDK：执行pip install --upgrade stripe
  2. 前端升级Stripe相关包：执行npm upgrade @stripe/react-stripe-js @stripe/stripe-js
• 补充Elements初始化配置：在初始化options中明确指定支付方式和呈现地区，修改你的options配置如下：

setOptions({
    clientSecret: clientSecret,
    appearance : {
        theme: 'stripe'
    },
    locale: 'ms-MY',
    paymentMethodTypes: ['card', 'fpx', 'grabpay', 'alipay']
})

• 测试环境强制指定地区：如果你的测试IP不在马来西亚，可在浏览器开发者工具中修改位置为马来西亚，或者切换到马来西亚节点后再测试，测试模式下Stripe会根据IP过滤区域性支付方式。

补充代码可修正的小问题 #

1. placeorder.js中加载Stripe公钥的代码缺少闭合单引号，修正为const stripePromise = loadStripe('pk_test_<<PUBLISHABLE_KEY>>');
2. Checkout.js中confirmPayment的回调语法有误，你把if判断写进了confirmPayment的参数里，修正后的handleSubmit逻辑如下：

const handleSubmit = async (e) => {
    e.preventDefault();
    if (!stripe || !elements) {
        setError("Stripe或Stripe组件尚未加载完成")
        return;
    }
    const {error} = await stripe.confirmPayment({
        elements,
        confirmParams: {
            return_url: '/placeorder',
        },
    });
    if (error) {
        setError("Error: 支付请求出现异常")
    }
}

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