如何获取HTML表单数据传入server.js的Stripe支付接口

完全支持通过原生form表单提交传递数据，不需要强制使用fetch方法。
你之前将${AMOUNT}替换为req.body.amount不生效，核心原因是没有为Express配置表单请求体的解析中间件，和传参方式本身没有关系。

修复步骤 #

• 首先在路由定义前添加Express内置的请求体解析中间件。原生表单默认以application/x-www-form-urlencoded编码提交数据，需要对应中间件才能解析出req.body上的字段：

// 放在所有app.post路由定义之前
app.use(express.urlencoded({ extended: true }));
// 若后续需要接收JSON格式请求，可额外加上JSON解析中间件
app.use(express.json());

• 替换金额字段时注意做类型转换和合法性校验：表单提交的所有字段默认是字符串类型，而Stripe要求unit_amount必须是整数类型（取值为对应货币的最小单位，比如HKD的单位是分），直接传字符串会触发接口报错。
• 给路由加上错误捕获，避免Stripe接口报错时服务直接崩溃。

修正后的完整服务端代码 #

const express = require('express');
const stripe = require('stripe')('替换为你的Stripe密钥');
const app = express();
const YOUR_DOMAIN = '替换为你的站点域名，本地调试可填http://localhost:4242';

// 注册请求体解析中间件
app.use(express.urlencoded({ extended: true }));

app.post('/create-checkout-session', async (req, res) => {
  try {
    // 读取表单传递的金额，转成整数并做合法性校验
    const amount = parseInt(req.body.amount, 10);
    if (isNaN(amount) || amount < 500) {
      return res.status(400).send('金额无效，最低支付金额为500港分（即5HKD）');
    }

    const session = await stripe.checkout.sessions.create({
      line_items: [
        {
          price_data: {
            currency: 'hkd',
            product_data: {
              name: "Test",
            },
            unit_amount: amount,
          },
          quantity: 1,
        },
      ],
      mode: 'payment',
      success_url: `${YOUR_DOMAIN}?success=true`,
      cancel_url: `${YOUR_DOMAIN}?canceled=true`,
    });
    res.redirect(303, session.url);
  } catch (err) {
    console.error('创建支付会话失败：', err);
    res.status(500).send('支付服务异常，请稍后重试');
  }
});

app.listen(4242, () => console.log('Running on port 4242'));

补充说明 #

你现有的HTML表单代码不需要修改，只要输入框配置了name="amount"属性，提交时就会自动把用户输入的金额携带到请求中。两种提交方式的区别仅在于：

• 原生表单提交：点击按钮后直接发起整页跳转，逻辑简单不需要额外写前端JS
• fetch提交：可以在不刷新页面的前提下发起请求，方便做更复杂的前置交互、自定义校验，适合交互复杂的场景
  两种方式都能正常实现Stripe结账流程，根据自身需求选择即可。

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