在React中使用Stripe支付时持续出现500状态码请求失败错误

提交支付信息时始终返回500错误，以下是前端和后端代码，以及对应的修复方案：

前端React代码 #

const Pay = () => {

  const [stripeToken, setStripeToken] = useState(null) 

  const onToken = (token) => {
    setStripeToken(token)
  }

  useEffect(() => {
    const makeRequest = async () => {
      // 先判断stripeToken是否存在，避免初始渲染时stripeToken.id报错
      if (!stripeToken) return;
      try {
        const res = await axios.post('http://localhost:5000/api/checkout/payment', {
          tokenId : stripeToken.id,
          amount: 2000,
        })
        console.log('支付成功:', res.data);
      } catch (err) {
        console.error('支付失败:', err.response?.data || err.message);
      }
    }
    makeRequest()
  }, [stripeToken])

  return (
    <div style={{
      display: "flex", 
      alignItems: "center", 
      justifyContent: "center",
      width: "100%",
      height: "100vh"
      }}>
      <StripeCheckout
        name='Afsal shop'
        billingAddress
        shippingAddress
        description='your total is $20'
        amount={2000}
        token={onToken}
        stripeKey={KEY}
      >
        <button style={{
            padding: "10px 20px", 
            background: "black", 
            color: "#fff", 
            cursor: "pointer", 
            borderRadius: "5px",
            fontSize: "25px"
        }}>Pay</button>      
      </StripeCheckout>
    </div>
  )
}

后端服务器代码（问题版本） #

router.post('/payment', async (req, res) => {
    await stripe.paymentIntents.create({
        source: req.body.tokenId,
        amount: req.body.amount,
        currency: "usd",
        automatic_payment_methods: {enabled: true},
    }, (stripeErr, stripeRes) => {
        if(stripeErr){
            return res.status(500).json(stripeErr)
        }else{
            return res.status(200).json(stripeRes)
        }
    })
})

核心问题与修复方案 #

1. 异步代码混用导致异常未捕获 #

同时使用await和回调函数处理stripe.paymentIntents.create会打乱异步流程，导致错误无法被正确捕获。必须统一使用一种异步处理方式，推荐用async/await。

2. PaymentIntents参数错误 #

source是旧版Charges API的参数，PaymentIntents API不支持该参数。如果要继续使用Stripe Checkout返回的token，有两种修复方案：

方案一：改用Charges API适配旧token

router.post('/payment', async (req, res) => {
  try {
    const charge = await stripe.charges.create({
      amount: req.body.amount,
      currency: 'usd',
      source: req.body.tokenId, // 该参数对Charges API有效
      description: 'Afsal shop payment'
    });
    res.status(200).json(charge);
  } catch (stripeErr) {
    console.error('Stripe错误:', stripeErr);
    res.status(500).json(stripeErr);
  }
});

方案二：使用PaymentIntents正确流程

先将token转为payment method，再创建并确认PaymentIntent：

router.post('/payment', async (req, res) => {
  try {
    // 将card token转为payment method
    const paymentMethod = await stripe.paymentMethods.create({
      type: 'card',
      card: {token: req.body.tokenId},
    });

    // 创建并确认PaymentIntent
    const paymentIntent = await stripe.paymentIntents.create({
      amount: req.body.amount,
      currency: 'usd',
      payment_method: paymentMethod.id,
      confirm: true,
      automatic_payment_methods: {enabled: true},
    });

    res.status(200).json(paymentIntent);
  } catch (stripeErr) {
    console.error('Stripe错误:', stripeErr);
    res.status(500).json(stripeErr);
  }
});

3. 额外排查点 #

• 确认服务器端使用的是Stripe的Secret Key，而非Publishable Key
• 查看服务器控制台的错误日志，Stripe会返回具体的错误原因（比如参数无效、密钥错误）
• 前端添加stripeToken存在性判断，避免初始渲染时调用API导致stripeToken.id报错

内容的提问来源于stack exchange，提问作者Afsal P U