怎么用AI建站给活动报名页加上支付和电子票？

照着做完这一篇，你就能让 AI 生成的报名页真正收得到钱、发得出票，并且到场能扫码验票。

第一步：先把技术路线定死，别让 AI 自由发挥

这一步要做的，是确定「页面用什么生成、钱进谁的口袋、数据存哪里」这三件事，定完之后后面每一步都不会返工。

推荐的组合（对新手最省事）：

• 页面：用 v0.dev 或 Bolt.new 生成 Next.js 14 页面
• 数据：Supabase 免费版（存报名人、票号、支付状态）
• 收款：Stripe Checkout（海外/支持信用卡），国内活动换成微信支付需企业资质
• 邮件：Resend（免费额度 3000 封/月）
• 二维码：npm 包 qrcode，本地生成，不依赖外部服务

注意：不要一上来就让 AI「做个带支付的报名页」，模型会编出假的支付接口。支付必须走 Stripe 官方托管页，你的代码只负责跳转和接收回调，绝不碰卡号。

第二步：用一句话提示词生成报名表单骨架

这一步做完，你会得到一个能填姓名、邮箱、票种的下单页。

在 v0.dev 输入框里粘贴：

用 Next.js 14 App Router + Tailwind 做一个活动报名页。
表单字段：姓名、邮箱、票种（普通票 99 元 / VIP 票 299 元，单选）。
提交按钮文案「去支付」。点击后调用 /api/checkout 接口。
页面顶部显示活动名称、时间、地点。

点右上角 Deploy 部署到 Vercel，拿到一个 xxx.vercel.app 域名。此时点「去支付」会报 404，正常。

第三步：接 Stripe，让按钮真的跳转到付款页

这一步的目标是：用户点按钮后跳转到 Stripe 托管收银台，付完钱自动回到你的成功页。

1. 登录 dashboard.stripe.com，右上角切到 测试模式（Test mode 开关）
2. 左侧 Developers → API keys，复制 Secret key（sk_test_ 开头）
3. 回到 Vercel 项目 → Settings → Environment Variables，新增 STRIPE_SECRET_KEY，粘贴后点 Save
4. 在本地终端执行：

npm install stripe

1. 在 app/api/checkout/route.ts 里写：

import Stripe from 'stripe'
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)

export async function POST(req: Request) {
  const { email, ticketType } = await req.json()
  const price = ticketType === 'vip' ? 29900 : 9900
  const session = await stripe.checkout.sessions.create({
    mode: 'payment',
    customer_email: email,
    line_items: [{ price_data: { currency: 'cny',
      product_data: { name: ticketType === 'vip' ? 'VIP票' : '普通票' },
      unit_amount: price }, quantity: 1 }],
    success_url: 'https://你的域名/success?id={CHECKOUT_SESSION_ID}',
    cancel_url: 'https://你的域名/',
    metadata: { ticketType }
  })
  return Response.json({ url: session.url })
}

前端 fetch('/api/checkout') 拿到 url 后 window.location.href = url。

注意：unit_amount 单位是「分」，99 元要写 9900。写成 99 会变成 0.99 元，这个坑每年都有人踩。

第四步：用 Webhook 发电子票，别信 success 页面

这一步做完，用户付款成功后邮箱会自动收到带二维码的电子票。

很多人把发票逻辑写在 /success 页面里，用户刷新一次就重发一张票。正确做法是监听 Stripe 的 checkout.session.completed 事件。

1. Stripe 后台 Developers → Webhooks → Add endpoint
2. Endpoint URL 填 https://你的域名/api/webhook
3. 事件勾选 checkout.session.completed，保存后复制 Signing secret（whsec_ 开头）
4. 在 Vercel 加环境变量 STRIPE_WEBHOOK_SECRET
5. 本地调试用：

stripe listen --forward-to localhost:3000/api/webhook

在 webhook 里生成票号（比如 EVT- + 6 位随机码），存进 Supabase，再用 Resend 发邮件，附件用 qrcode 生成 PNG：

npm install qrcode resend

const qr = await QRCode.toBuffer(`https://你的域名/checkin?ticket=${ticketId}`)

注意：webhook 必须返回 200，且要在 20 秒内响应。发邮件耗时较长时，先写库、立刻返回 200，把发信丢到异步任务里，否则 Stripe 会重试，用户收到 3 封一样的票。

第五步：做一个扫码验票页

这一步做完，门口工作人员用手机就能核销。

让 AI 再生成一个 /checkin 页面，读取 URL 里的 ticket 参数，去 Supabase 查这条记录：

• 状态是 paid 且 checked_in = false → 显示绿色「验证通过」，同时把 checked_in 改成 true
• 已经 true → 显示红色「此票已核销」
• 查不到 → 显示灰色「无效票」

第六步：上线前用测试卡跑一遍

Stripe 测试模式下的卡号：4242 4242 4242 4242，有效期随便填未来日期，CVC 填 123。走完整流程，确认：收银台能打开 → 邮箱收到票 → 扫码页显示通过 → 再扫一次显示已核销。

确认无误后，把 Stripe 后台右上角的 Test mode 关掉，换成 sk_live_ 开头的密钥重新部署。

小结

• 支付一定走 Stripe 托管页，代码只做跳转和回调
• 发电子票必须挂在 webhook 的 checkout.session.completed 上，不能写在 success 页面
• 金额单位是分，99 元写 9900
• webhook 先写库再异步发信，避免重复发票
• 二维码指向你自己的验票页，而不是把票号明文印上去