Stripe Checkout示例金额硬编码问题及动态订单参数咨询

Stripe官方的Express Checkout示例中，金额与货币采用硬编码方式，无法适配用户购买多件商品或切换货币的场景。虽然已经知道可以通过POST请求体传递金额、货币参数，但仍有以下两个疑问需要解答：

修改后的基础前后端代码（传递金额/货币） #

前端代码 #

expressCheckoutElement.on('confirm', async (event) => {
  const { error: submitError } = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // 传递金额与货币到后端
  const res = await fetch('/create-intent', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      amount: myamount,
      currency: mycurrency
    })
  });
  const { client_secret: clientSecret } = await res.json();

  const { error } = await stripe.confirmPayment({
    elements,
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    handleError(error);
  }
});

后端代码 #

const stripe = require("stripe")("your-stripe-secret-key");
const express = require('express');
const app = express();

app.use(express.static("."));
// 解析JSON请求体
app.use(express.json());

app.post('/create-intent', async (req, res) => {
  const intent = await stripe.paymentIntents.create({
    amount: req.body.amount,
    currency: req.body.currency,
    automatic_payment_methods: {enabled: true},
  });
  res.json({client_secret: intent.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});

疑问解答 #

1. 如何获取myamount、mycurrency变量？ #

不需要用全局变量，这些值应该从你的订单状态中获取，常见的实现方式有三种：

• 单页应用（React/Vue等）：在组件状态中维护购物车总额与选中的货币，比如const [cartTotal, setCartTotal] = useState(0)，const [selectedCurrency, setSelectedCurrency] = useState('usd')，在confirm事件中直接引用这些状态变量。
• 传统多页应用：将金额和货币存储在隐藏的DOM元素中，比如：

  <input type="hidden" id="order-amount" value="2599">
  <input type="hidden" id="order-currency" value="eur">
  

  然后在事件中读取：

  const myamount = document.getElementById('order-amount').value;
  const mycurrency = document.getElementById('order-currency').value;
  

• 订单对象存储：用户确认订单时生成一个订单对象（可以存在内存或localStorage），confirm时从该对象中提取金额和货币，比如const order = JSON.parse(localStorage.getItem('currentOrder'))，再取order.amount和order.currency。

2. 如何验证前端传递的订单详情？ #

永远不要信任前端传递的金额、货币等核心数据，必须在后端重新计算与验证，具体步骤：

1. 前端传递订单标识而非原始金额：前端不要直接传金额和货币，而是传订单ID或商品列表（比如[{productId: 1, quantity: 2}, ...]）。
2. 后端重新计算订单金额：根据订单ID从数据库取出订单记录，或根据商品ID从数据库获取单价，重新计算总金额与对应货币。
3. 验证一致性与合法性：
   • 验证前端传递的金额（如果传了）与后端计算的金额是否完全一致
   • 验证货币是否在你支持的币种列表内（比如只允许usd、eur、cny）
   • 验证金额是否大于0，且格式符合Stripe要求（必须是最小单位，比如美元用分，人民币用分）
4. 关联订单与PaymentIntent：在创建PaymentIntent时添加metadata字段关联订单ID，方便后续支付回调时处理订单状态。

示例：安全的后端验证代码

app.post('/create-intent', async (req, res) => {
  try {
    // 前端传递订单ID
    const { orderId } = req.body;

    // 从数据库查询订单详情（假设使用SQL数据库）
    const order = await db.query('SELECT total_amount, currency, status FROM orders WHERE id = $1', [orderId]);
    
    if (!order.rows.length) {
      return res.status(404).json({ error: '订单不存在' });
    }

    const { total_amount: calculatedAmount, currency: calculatedCurrency, status } = order.rows[0];

    // 验证订单状态是否为待支付
    if (status !== 'pending') {
      return res.status(400).json({ error: '订单状态异常，无法发起支付' });
    }

    // 创建PaymentIntent，使用后端计算的金额与货币
    const intent = await stripe.paymentIntents.create({
      amount: calculatedAmount,
      currency: calculatedCurrency,
      automatic_payment_methods: { enabled: true },
      metadata: { order_id: orderId } // 关联订单ID
    });

    res.json({ client_secret: intent.client_secret });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

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