自定义表单集成Stripe：复刻捐赠表单后端实现求助

一、先选好适合新手的技术栈 #

• 后端框架：Node.js + Express（上手快，文档全，遇到问题能搜到一堆解决方案）
• 支付服务：Stripe（官方自带跳转式Checkout，不用自己写支付页面，省超多事）
• 必备依赖包：stripe（Stripe官方SDK）、cors（解决前后端跨域问题）、dotenv（安全存密钥）

二、一步步来实现 #

1. 前期准备 #

• 去Stripe官网注册账号，进入后台的「API密钥」页面，复制Secret Key和Publishable Key，这俩是支付对接的核心凭证，别随便泄露
• 电脑上装Node.js和npm，官网下载傻瓜式安装就行

2. 初始化后端项目 #

• 新建一个文件夹，打开终端执行：

  npm init -y
  npm install express stripe cors dotenv
  

• 在文件夹里新建.env文件，写入：

  STRIPE_SECRET_KEY=你的Stripe Secret Key
  PORT=3000
  

3. 写后端核心代码（新建server.js文件） #

require('dotenv').config();
const express = require('express');
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

// 创建Stripe支付会话的接口，前端提交数据后调用这个接口
app.post('/create-checkout-session', async (req, res) => {
  try {
    // 接收前端传过来的捐赠金额和用户表单数据
    const { amount, userData } = req.body;

    // 这里可以把用户数据存到数据库（比如MongoDB/MySQL，新手可以先跳过，后面再加）
    // 示例：console.log('捐赠用户信息:', userData);

    // 创建Stripe支付会话
    const session = await stripe.checkout.sessions.create({
      payment_method_types: ['card'],
      line_items: [
        {
          price_data: {
            currency: 'ron', // 和目标网站一致用罗马尼亚列伊
            product_data: {
              name: 'Donatie pentru Hope and Homes', // 捐赠项目名称
            },
            unit_amount: Math.round(amount * 100), // Stripe要求金额以分为单位，所以乘以100
          },
          quantity: 1,
        },
      ],
      mode: 'payment',
      success_url: 'https://你的域名/success', // 支付成功后跳转的页面
      cancel_url: 'https://你的域名/cancel', // 用户取消支付跳转的页面
      // 可选：把用户数据附到会话里，方便后续在Stripe后台查看
      metadata: {
        ...userData
      }
    });

    // 把会话ID返回给前端，前端用这个跳转到Stripe的支付页面
    res.json({ id: session.id });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// 启动服务器
app.listen(process.env.PORT, () => {
  console.log(`服务器跑在端口${process.env.PORT}上了`);
});

4. 前端对接关键逻辑（你懂前端，这里补核心步骤） #

• 先在页面引入Stripe的前端脚本：

  <script src="https://js.stripe.com/v3/"></script>
  

• 表单提交时，收集用户数据和捐赠金额，调用后端接口获取会话ID，再跳转Stripe：

  const stripe = Stripe('你的Stripe Publishable Key');
  const donationForm = document.getElementById('donation-form');
  
  donationForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    // 收集表单数据
    const amount = document.getElementById('donation-amount').value;
    const userData = {
      name: document.getElementById('user-name').value,
      email: document.getElementById('user-email').value,
      // 其他需要的表单字段，比如电话、捐赠备注等
    };
  
    // 调用后端接口创建支付会话
    const response = await fetch('http://localhost:3000/create-checkout-session', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ amount, userData }),
    });
  
    const session = await response.json();
    // 跳转到Stripe的支付页面
    const result = await stripe.redirectToCheckout({ sessionId: session.id });
  
    // 如果跳转失败，提示用户
    if (result.error) {
      alert(result.error.message);
    }
  });
  

5. 测试和部署 #

• 测试：用Stripe提供的测试卡号（比如4242 4242 4242 4242，过期日期随便填未来的，CVC填123）就能模拟支付流程
• 部署：后端可以用Vercel、Render或者Heroku免费部署，记得把.env里的环境变量配置到平台上，别直接把密钥写进代码里

三、新手必注意的坑 #

• 金额单位：Stripe要求金额用最小货币单位（比如RON的分），所以一定要把输入的金额乘以100再传入
• 跨域问题：开发阶段用cors中间件没问题，生产环境要改成只允许你的前端域名访问，别用通配符
• 用户数据存储：如果需要留存捐赠用户信息，可以加个数据库（比如MongoDB Atlas，免费额度足够新手用）
• Webhook（可选）：如果想在支付成功后自动发感谢邮件、更新捐赠统计，可以配置Stripe的Webhook，监听checkout.session.completed事件

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