如何将Stripe支付网关从本地环境迁移至生产环境

我使用React开发电商Web应用，跟随教程搭建了Stripe支付网关，本地环境可正常运行。目前前端已部署在Netlify、后端SQL数据库部署在Heroku且运行正常，但支付流程仍指向localhost:3001，导致报错。需要修改哪些代码来适配生产环境？（顶点项目，无需真实支付，仅需让已连接前后端的前端能通过Stripe测试卡完成支付校验）

后端Node.js代码修改 #

1. 替换硬编码密钥，改用环境变量读取Stripe密钥 #

原代码硬写的密钥存在泄露风险，且混淆了Stripe密钥类型（后端需用Secret Key，而非公钥），改为从环境变量读取：

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

操作说明：在Heroku后台的应用「设置」→「配置变量」中添加STRIPE_SECRET_KEY，值为你的Stripe测试环境Secret Key（格式为sk_test_xxx）。

2. 更新CORS配置，允许生产环境前端域名访问 #

原CORS仅允许本地域名，需替换为Netlify部署的前端域名，同时兼容本地开发：

const corsOptions = {
  origin: process.env.NODE_ENV === 'production' 
    ? 'https://your-netlify-site.netlify.app' // 替换为你的Netlify域名
    : 'http://localhost:8000',
  credentials: true,
  optionSuccessStatus: 200
};
app.use(cors(corsOptions));

如果需要支持多域名，可改用动态判断：

const allowedOrigins = process.env.ALLOWED_ORIGINS.split(',');
const corsOptions = {
  origin: (origin, callback) => {
    if (allowedOrigins.includes(origin) || !origin) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  credentials: true,
  optionSuccessStatus: 200
};
app.use(cors(corsOptions));

操作说明：在Heroku配置变量中添加ALLOWED_ORIGINS，值为https://your-netlify-site.netlify.app,http://localhost:8000。

3. 修改端口监听为Heroku动态端口 #

Heroku会分配动态端口，不能硬写3001：

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log('Server listening port', PORT);
});

前端React组件（payment-form.js）修改 #

替换axios请求的本地地址为Heroku后端域名 #

把硬写的localhost:3001替换为Heroku部署的后端域名，建议用环境变量区分开发/生产环境：

// React环境变量需以REACT_APP_开头，在Netlify后台配置REACT_APP_API_URL
const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:3001';

const handleSubmitPayment = async (e) => {
  e.preventDefault();
  const {error, paymentMethod} = await stripe.createPaymentMethod({
    type: "card",
    card: elements.getElement(CardElement),
  });
  setLoading(true);
  if (!error) {
    console.log("paymentMethod", paymentMethod);
    const { id } = paymentMethod;
    try{
      const { data } = await axios.post(`${API_URL}/api/checkout`, {
        id,
        amount: ((props.myCart.reduce((amount, item) => parseFloat(item.price) + parseFloat(amount), 0)).toFixed(2) * 100)
      }, { withCredentials: true });
      props.updateMessage(data.message);
      elements.getElement(CardElement).clear();
      props.handleNext();
    }
    catch(err){console.log("error from axios", err)} // 修复原代码变量名错误（原写为error）
  }
  setLoading(false);
}

操作说明：在Netlify后台的「Site settings」→「Environment variables」中添加REACT_APP_API_URL，值为你的Heroku后端域名（格式为https://your-heroku-app.herokuapp.com）。

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