如何将React前端表单的Customer ID传递至Stripe后端服务

问题核心 #

前端表单默认以application/x-www-form-urlencoded格式提交数据，但你的后端只配置了express.json()解析JSON请求体，没法读取表单提交的urlencoded数据；同时当前后端硬编码用环境变量的CUSTOMER_ID，没有获取前端传入的参数。

后端代码修改步骤 #

1. 添加表单数据解析中间件
   在现有中间件配置里加一行，让后端能处理表单提交的urlencoded格式数据：

app.use(express.json())
app.use(express.urlencoded({ extended: true })) // 新增这行
app.use(express.static('public'))

2. 替换为前端传入的customerId
   创建账单门户会话时，把customer字段的值改成req.body.customerId，同时加个基础校验避免空值报错：

app.post('/create-customer-portal-session', async (req, res) => {
  // 先校验参数是否存在
  const customerId = req.body.customerId;
  if (!customerId) {
    return res.status(400).send('必须提供Customer ID');
  }

  try {
    const session = await stripe.billingPortal.sessions.create({
      customer: customerId,
      // 可选：可以加return_url，用户从门户返回时跳回你的前端页面
      return_url: 'http://localhost:3000',
    });
    console.log(session.url)
    res.redirect(session.url);
  } catch (error) {
    // 捕获并打印错误，方便排查
    res.status(500).send('创建门户会话失败');
    console.error(error);
  }
});

前端可选优化 #

如果你的customerId是动态获取的（比如从接口或React状态里拿），可以用React状态动态设置input的value，不用硬编码：

import { useState } from 'react';

function BillingButton() {
  // 实际项目里这里应该从接口或全局状态获取真实的customerId
  const [customerId] = useState('cus_MLzuNCoubhv5nk');

  return (
    <form method="POST" action="http://localhost:3001/create-customer-portal-session">
      <input type="hidden" name="customerId" value={customerId} />
      <button className="Button" type="submit">Manage billing</button>
    </form>
  );
}

export default BillingButton;

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