React Stripe Checkout 如何传递多商品明细完成单笔合并支付

方案1：适配现有Payment Intent逻辑的最小改动 #

你当前使用的是直接创建Payment Intent的模式，只需要调整传参和商品信息处理逻辑即可：

• 前端调整：发起请求时把整个items商品数组和支付凭证id一起传给后端，不要直接传递前端计算的总金额，避免前端被篡改价格。
• 后端调整：
  1. 接收items数组后自行计算总金额，注意Stripe金额单位为对应货币的最小单位（美元为美分，示例里的200美元需要转成20000传入）
  2. 拼接所有商品信息作为description，同时把完整的商品数组存入metadata字段方便后续对账

修改后的后端代码如下：

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)

export default async (req, res) => {
  const { id, items } = req.body

  try {
    // 后端计算总金额，避免前端篡改
    const totalAmount = items.reduce((sum, item) => {
      // 若前端传的amount为美元单位，需乘以100转成美分
      return sum + (item.amount * 100 * item.qty)
    }, 0)
    // 拼接商品描述
    const description = items.map(item => `${item.qty}x ${item.description}`).join(', ')
    const payment = await stripe.paymentIntents.create({
      amount: totalAmount,
      currency: 'USD',
      description: description,
      // 存完整商品信息到metadata，方便后续查询对账
      metadata: {
        items: JSON.stringify(items)
      },
      payment_method: id,
      confirm: true,
    })
    console.log(payment)

    return res.status(200).json({
      confirm: payment.client_secret,
    })
  } catch (error) {
    return res.status(400).json({
      error: error.message
    })
  }
}

方案2：更推荐的Stripe Checkout原生多商品方案 #

因为你已经接入了Stripe Checkout，更建议用Stripe官方的Checkout Session模式，原生支持line_items参数配置多商品，不需要自行拼接描述，Stripe后台会直接展示每一项商品明细，对账和退款都更方便。
对应的后端核心代码示例：

const session = await stripe.checkout.sessions.create({
  payment_method_types: ['card'],
  line_items: items.map(item => ({
    price_data: {
      currency: 'usd',
      product_data: {
        name: item.description,
      },
      // 单位为美分
      unit_amount: item.amount * 100,
    },
    quantity: item.qty,
  })),
  mode: 'payment',
  success_url: `${process.env.YOUR_DOMAIN}/success?session_id={CHECKOUT_SESSION_ID}`,
  cancel_url: `${process.env.YOUR_DOMAIN}/cancel`,
})

前端只需要跳转Stripe返回的session url即可完成支付，不需要自行处理支付表单逻辑，安全性和适配性更高。

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