React集成Stripe报错：clientSecret格式合规却提示无效

后端返回的clientSecret格式符合${id}_secret_${secret}要求（实际值为cs_test_firstStringOfChars_secret_secondStringOfChars，会话ID与前缀匹配），且和前端传入Elements的完全一致，但仍提示clientSecret无效。

前端代码 #

function Payment () {

  const [clientSecret, setClientSecret] = useState('');
  const stripePromise = loadStripe('pk_test_51QxRTwCGr4KIB7NcBkCAmeZQSwZX5sNq0V0O4OaOdnzxnJ3xAyWRT9hOE0nKN73f6lsrQfpSM0cuIu6wTrNNbBr500rorDyi3Z');
  const { name, image, price } = useLocation().state.from;

  useEffect( () => {
      requestCheckout({name, price}).then( secret => {
        setClientSecret(secret);
      }) }, []);

  return (
    <div id="payment">
      <RoomZoom/>
      { stripePromise && clientSecret && (
      <Elements stripe={stripePromise} options={{clientSecret}}>
        <Checkout name={name} price={price}/>
      </Elements>
      )}
    </div>
  )
}

export default Payment

后端代码 #

async function checkOut (req, res) {
  try {
    const session = await stripe.checkout.sessions.create({
      mode: 'payment',
      ui_mode: 'embedded',
      payment_method_types: ['card'],
      line_items: [
        {
          price_data: {
            currency: 'isk',
            product_data: {
              name: req.body.name,
            },
            unit_amount: req.body.price,
          },
          quantity: 1
        },
      ],
      return_url: 'http://localhost:5173'
    });
    res.status(201).json({clientSecret: session.client_secret});
  }
  catch (err) {
    console.log(err);
  }
}

可能的原因及修复方案 #

• 前端接收数据错误：后端返回的是包含clientSecret字段的对象，但前端requestCheckout的回调里直接将返回值赋值给clientSecret状态。如果requestCheckout返回的是完整响应对象而非clientSecret字符串，就会导致传入Elements的是对象而非正确的字符串。
  修复：修改useEffect内的代码为：

  requestCheckout({name, price}).then( res => {
    setClientSecret(res.clientSecret);
  })
  

• Stripe SDK与API版本不兼容：嵌入式结账（ui_mode: 'embedded'）对版本有要求，需确保前端@stripe/react-stripe-js、@stripe/stripe-js版本与后端Stripe API版本匹配。如果后端使用了较新的API版本，前端需同步升级SDK。
• 货币单位格式错误：unit_amount要求传入最小货币单位的整数，冰岛克朗（ISK）无小数，需确认req.body.price是整数类型。若传入带小数的数值，会导致会话创建异常，进而使clientSecret失效。
• 异步时序问题：虽然有stripePromise && clientSecret的判断，但stripePromise是异步加载的，可能存在clientSecret先设置完成但Stripe SDK未加载完毕的情况，导致Elements初始化异常。可尝试将stripePromise的加载逻辑提前，或使用useStripe钩子确保SDK加载完成后再初始化Elements。

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