AI建站做电商，商品管理和支付接口怎么接入？

学完这篇，你能拿到一套可跑通的最小电商链路：用 AI 生成前台页面、用 Supabase 管商品、用 Stripe 收款，并且知道换成微信支付／支付宝时要改哪几个地方。

第一步：先定好「钱」的规则，再让 AI 写页面

这一步的目标是把商品数据结构和金额单位定死，否则 AI 生成的页面和数据库对不上。

选一个后端即服务，本文用 Supabase（免费版够测试）。新建项目后，左侧菜单点 Table Editor → New table，表名 products，字段如下：

注意：金额一律存整数「分」或用 numeric(10,2)，绝不要用浮点数存价格。6790 表示 67.90 元。用 float 迟早会出现 0.30000000000000004 这种账。

建完表后，在同一页面右上角点 RLS 开启行级安全，加两条策略：SELECT 允许匿名读（前台展示用），INSERT/UPDATE/DELETE 只允许登录用户（你自己后台用）。

第二步：给商品做一个能改的后台入口

这一步要得到的是「不写代码也能上下架商品」的能力，最省事的办法是直接用 Supabase 自带的表格编辑。

在 Table Editor 里点 products 表，直接用 Insert row 加三条测试数据。图片先传到左侧 Storage → New bucket，建一个公开桶 product-img，上传后点文件 → Get URL 复制地址填进 image_url。

这一步不需要 AI 参与——AI 生成一个后台 CRUD 界面要花不少 token，而且改数据时你还得先信任它。测试阶段用官方控制台最快。

第三步：让 AI 生成前台页面并接上数据库

这一步要得到的是「访问首页能看到商品列表、点进去能看到详情」的页面。

在项目里执行：

npx create-next-app@latest shop --app --ts
cd shop
npm install @supabase/supabase-js

根目录新建 .env.local，填 Supabase 的 Settings → API 里的两个值：

NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...

然后用 AI（Cursor、v0 都行）下这样的指令：

用 Next.js 15 App Router 写 app/page.tsx，用 @supabase/supabase-js v2 的 createClient 从 products 表查全部商品，渲染成响应式卡片网格，价格显示为 price_cents / 100 保留两位小数，每张卡片链接到 /product/[id]。

生成后你只做一件事：检查 createClient 是否用了环境变量而不是硬编码 URL。

注意：AI 常把 price_cents 直接当元显示，或者写 price / 100 后不格式化。前端只负责展示，价格计算必须在服务端做，见下一步。

第四步：接入支付（Stripe Checkout）

这一步要得到的是「点购买 → 跳转收银台 → 付完回站 → 订单生效」。

先装依赖并注册账号：

npm install stripe

在 Stripe 后台右上角切到 测试模式，进 Developers → API keys，点 Secret key 的 Reveal 复制，写进 .env.local：

STRIPE_SECRET_KEY=sk_test_xxx

新建 app/api/checkout/route.ts，核心逻辑是：

const session = await stripe.checkout.sessions.create({
  mode: 'payment',
  line_items: [{ price_data: {
    currency: 'cny',
    product_data: { name: product.name },
    unit_amount: product.price_cents,   // 服务端从数据库重查，不信前端传的价
  }, quantity: 1 }],
  success_url: `${origin}/success?id={CHECKOUT_SESSION_ID}`,
  cancel_url: `${origin}/cart`,
})
return Response.redirect(session.url!)

关键点：unit_amount 必须用 id 去数据库查出来的价格，不能让前端把价格传上来。

然后处理回调。Stripe 后台 Developers → Webhooks → Add endpoint，URL 填 https://你的域名/api/webhook，事件勾选 checkout.session.completed，拿到 signing secret 写进 STRIPE_WEBHOOK_SECRET。

本地调试用 Stripe CLI：

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

webhook 里必须验签，并且做幂等——用 session.id 存一张 orders 表，已存在就直接返回 200，避免重复扣库存。

注意：checkout.session.completed 可能重复投递。不做幂等，用户付一次你发两件货。另外别用 success_url 当作「支付成功」的判定依据，用户手动访问那个地址也会触发。

第五步：换成国内支付要动什么

Stripe 对个人开发者友好，但国内用户付款体验差。换成微信支付 V3 或支付宝，改动集中在这几处：

1. 商户资质：两者都需要企业营业执照 + 已备案域名，个人主体无法申请。
2. 签名方式：微信支付 V3 用 SHA256-RSA2048 + APIv3 密钥，支付宝用 RSA2，都要在服务端做。
3. 回调：微信是 /api/wxpay/notify，必须返回 {"code":"SUCCESS"} 的 JSON，且要验 Wechatpay-Signature 头。
4. 前端：不能再用跳转托管收银台，通常改成扫码支付，需要轮询订单状态。

个人开发者暂时拿不到资质的话，先接 Stripe 或 PayPal 跑通流程，代码结构不用改。

小结

• 价格用「分」存整数，所有金额计算只在服务端做。
• 商品管理先用 Supabase 控制台顶住，别急着让 AI 写后台。
• AI 适合生成列表页、详情页这类视图代码，unit_amount、验签、幂等这三处必须人工写。
• 支付成功以 webhook 为准，不用 success_url 判断。
• 换国内支付只换签名和回调协议，业务表结构不用动。