如何在Vite+ViteSSG项目中创建服务端API路由实现Stripe安全支付

实现方案 #

注意：ViteSSG是构建时预渲染工具，仅在打包阶段运行生成静态HTML，没有运行时的服务端监听能力，无法直接处理用户的动态接口请求。

结合你当前部署在Netlify的情况，用Netlify自带的Serverless Functions实现是成本最低的方案，不需要额外搭建后端，也不用修改现有客户端的调用逻辑，具体步骤如下：

步骤1：配置服务端函数与路由重写 #

• 在项目根目录新建netlify/functions文件夹，Netlify会自动识别这个目录下的文件为服务端函数
• 新建netlify/functions/create-checkout-session.js，把你写的API逻辑挪进去，注意补全async/await语法，敏感密钥通过环境变量读取不要硬编码：

// netlify/functions/create-checkout-session.js
import Stripe from 'stripe'
import { useAPI } from '@/utils/GraphCMS'

const graphcms = useAPI()
// Stripe密钥存在环境变量中，不要硬编码到代码里
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)

exports.handler = async (event) => {
  // 仅允许POST请求
  if (event.httpMethod !== 'POST') {
    return {
      statusCode: 405,
      body: JSON.stringify({ error: 'Method not allowed' })
    }
  }

  try {
    const { slug } = JSON.parse(event.body)
    // 从GraphCMS拉取最新的商品数据，避免客户端篡改
    const product = await graphcms.getSingleProduct(slug)

    const session = await stripe.checkout.sessions.create({
      success_url: `${process.env.VITE_SITE_URL}/?id={CHECKOUT_SESSION_ID}`,
      cancel_url: `${process.env.VITE_SITE_URL}/services/${slug}`,
      payment_method_types: ['card'],
      line_items: [
        {
          price_data: {
            currency: 'cny', // 换成你实际使用的货币编码
            product_data: {
              name: product.name,
              description: product.description
            },
            unit_amount: product.price * 100 // Stripe金额单位为分
          },
          quantity: 1
        }
      ],
      mode: 'payment'
    })

    return {
      statusCode: 200,
      body: JSON.stringify(session)
    }
  } catch(e) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error: { message: e.message } })
    }
  }
}

• 根目录新建netlify.toml配置文件，指定函数目录和路由重写规则，让请求路径和你预期的/api/*格式一致：

[build]
  functions = "netlify/functions"
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200

配置完成后你现有的客户端调用代码不需要做任何修改，直接就能正常调用接口。

步骤2：本地开发适配 #

要在本地模拟Netlify Functions的运行效果，安装官方的Netlify CLI工具：

npm install -g netlify-cli

之后把本地启动命令从vite改成ntl dev，工具会同时启动Vite开发服务和本地函数模拟服务，本地访问/api/create-checkout-session的行为和线上完全一致。

步骤3：环境变量配置 #

把Stripe密钥、站点域名等敏感配置，放在Netlify后台的项目环境变量管理页中，本地开发时在根目录新建.env文件存储即可，注意不要把.env文件提交到Git仓库。

如果后续你要切换到Vercel部署，逻辑完全一致，只要把函数放在项目根目录的api/文件夹下，按照Vercel Functions的语法格式调整即可，客户端的调用代码不需要做任何改动。

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