跳转到内容
OBISCR

Next.js Stripe Supabase Starter - 一个完整的电子商务演示

nextjs-stripe-supabase-starter 一个基于Next.js、Stripe Checkout和Supabase构建的完整电子商务演示系统，包含用户认证、产品管理、安全支付处理及自动购买跟踪功能。
在线案例 Next.js、Stripe 和 Supabase 启动模板的实时演示

特性

Section titled “特性”
  • 用户身份验证：使用 Supabase Auth 的电子邮件/密码登录
  • 3 个产品类别：高级会员、云存储和 API 访问
  • 多种定价选项：一次性支付和订阅
  • Stripe Checkout 集成：安全的托管支付页面
  • 数据库集成：Supabase 用于用户数据和购买记录
  • Webhook 处理：自动支付确认和数据库更新
  • 购买跟踪：从数据库获取实时购买状态
  • 响应式设计：移动友好界面
  • TypeScript：完整的类型安全

技术栈

Section titled “技术栈”
  • 前端：Next.js 15 (App Router)
  • 数据库：Supabase (PostgreSQL)
  • 身份验证：Supabase Auth
  • 支付：Stripe Checkout
  • 样式：Tailwind CSS
  • 语言：TypeScript
  • 部署：Vercel (推荐)

产品结构

Section titled “产品结构”

Premium Membership

  • 月度计划：$29.99
  • 年度计划：$99.99
  • 终身计划：$199.99

Cloud Storage

  • 50GB 存储：$9.99
  • 100GB 存储：$19.99
  • 500GB 存储：$49.99

API Access

  • 基本 API：$19.99
  • 专业 API：$49.99
  • 企业 API：$99.99

完整设置指南

Section titled “完整设置指南”

按照以下步骤从零开始设置项目：

步骤 1：克隆并安装依赖项

Section titled “步骤 1：克隆并安装依赖项”
Terminal window
# 克隆仓库
git clone https://github.com/obiscr/nextjs-stripe-supabase-starter.git
cd nextjs-stripe-supabase-starter


# 安装依赖
npm install

步骤 2：创建 .env.local 文件

Section titled “步骤 2：创建 .env.local 文件”

在根目录下创建一个 .env.local 文件。

  • 文件夹nextjs-stripe-supabase-starter
    • 文件夹src/
      • …
    • .env.local create this file
    • ...

步骤 3：创建 Supabase 账户

Section titled “步骤 3：创建 Supabase 账户”

  1. 前往 Supabase 并创建一个免费账户

  2. 创建一个组织和一个新项目

  3. 前往 项目概览

    前往 项目概览

    将 Project URL / API Key 复制到 .env.local 文件中

    Terminal window
    # Supabase 密钥 (从 Supabase 项目仪表板 > 项目设置 > API 密钥获取)
    NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
    NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here

  4. 前往 项目设置 > API 密钥

    前往 项目设置 > API 密钥 将 service_role 密钥复制到 .env.local 文件中

    Terminal window
    # Supabase 密钥 (从 Supabase 项目仪表板 > 项目设置 > API 密钥获取)
    2 collapsed lines
    NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
    NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
    SUPABASE_SERVICE_ROLE_KEY=your-service-role-key-here

    Note

    请保持 SERVICE_ROLE_KEY 私密，不要与任何人分享。

步骤 4：创建 Stripe 账户

Section titled “步骤 4：创建 Stripe 账户”

  1. 前往 Stripe 并创建一个免费账户

  2. 完成账户设置流程

  3. 前往 Stripe 仪表板

  4. 导航到 开发者 > API 密钥

  5. 复制密钥

    将你的 发布密钥 和 秘密密钥 (用于开发) 复制到 .env.local 文件中

    Terminal window
    # Stripe 密钥
    NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_your_publishable_key_here
    STRIPE_SECRET_KEY=sk_test_your_secret_key_here

步骤 5：设置 Stripe Webhook 端点

Section titled “步骤 5：设置 Stripe Webhook 端点”

由于本地开发，Stripe 的 Webhook 无法直接访问，因此你需要使用 Stripe CLI 来监听 Webhook。打开终端并运行本地监听器。

Terminal window
> stripe listen --forward-to localhost:3000/api/webhooks/stripe
A newer version of the Stripe CLI is available, please update to: v1.28.0
> Ready! You are using Stripe API Version [2022-08-01]. Your webhook signing secret is whsec_xxxxx (^C to quit)

你将在终端中看到 Webhook 签名密钥。将其复制到 .env.local 文件中。

Terminal window
# 从 Stripe 仪表板获取: https://dashboard.stripe.com/apikeys
2 collapsed lines
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_your_publishable_key_here
STRIPE_SECRET_KEY=sk_test_your_secret_key_here
STRIPE_WEBHOOK_SECRET=whsec_xxxxx

步骤 6：初始化 Supabase

Section titled “步骤 6：初始化 Supabase”

  1. 登录 Supabase

    Terminal window
    > npx supabase login
    你好，Supabase！按 Enter 打开浏览器并自动登录。
    

    这是你的登录链接，如果浏览器没有打开 https://supabase.com/dashboard/cli/login?session_id=uuid&token_name=cli_@hostname&public_key=string
    

    Enter your verification code: c4d28d97
    Token cli_@hostname created successfully.
    

    You are now logged in. Happy coding!

  2. 初始化 Supabase

    Terminal window
    > npx supabase init
    Generate VS Code settings for Deno? [y/N] N
    Generate IntelliJ Settings for Deno? [y/N] N
    Finished supabase init.

  3. 链接到你的 Supabase 项目

    Terminal window
    > npx supabase link --project-ref your-project-id
    输入你的数据库密码 (或留空跳过): // 输入你的数据库密码
    30 collapsed lines
    Connecting to remote database...
    NOTICE (42P06): schema "supabase_migrations" already exists, skipping
    Finished supabase link.
    WARNING: Local config differs from linked project. Try updating supabase/config.toml
    diff supabase/config.toml your-project-id
    --- supabase/config.toml
    +++ your-project-id
    @@ -54,8 +54,8 @@
    

    [auth]
    enabled = true
    -site_url = "http://127.0.0.1:3000"
    -additional_redirect_urls = ["https://127.0.0.1:3000"]
    +site_url = "http://localhost:3000"
    +additional_redirect_urls = []
    jwt_expiry = 3600
    enable_refresh_token_rotation = true
    refresh_token_reuse_interval = 10
    @@ -96,9 +96,9 @@
    [auth.email]
    enable_signup = true
    double_confirm_changes = true
    -enable_confirmations = false
    +enable_confirmations = true
    secure_password_change = false
    -max_frequency = "1s"
    +max_frequency = "1m0s"
    otp_length = 6
    otp_expiry = 3600
    [auth.email.template]

  4. 应用迁移

    Terminal window
    > npx supabase db push
    Connecting to remote database...
    你想将这些迁移推送到远程数据库吗？
    • 20250710080949_init.sql
    

    [Y/n] Y
    NOTICE (42P06): schema "supabase_migrations" already exists, skipping
    NOTICE (42P07): relation "schema_migrations" already exists, skipping
    NOTICE (42701): column "statements" of relation "schema_migrations" already exists, skipping
    NOTICE (42701): column "name" of relation "schema_migrations" already exists, skipping
    Applying migration 20250710080949_init.sql...
    NOTICE (42710): extension "uuid-ossp" already exists, skipping
    Finished supabase db push.

步骤 7：初始化 Stripe 产品

Section titled “步骤 7：初始化 Stripe 产品”

运行自动化脚本来创建产品和服务在你的 Stripe 账户中：

Terminal window
> npm run stripe:init


# 你将看到以下输出。


> [email protected] stripe:init
> ts-node scripts/stripe-init.ts


7 collapsed lines
(node:76080) ExperimentalWarning: Type Stripping is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:76080) [MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of file:///Users/obiscr/projects/nextjs-stripe-supabase-starter/scripts/stripe-init.ts is not specified and it doesn't parse as CommonJS.
Reparsing as ES module because module syntax was detected. This incurs a performance overhead.
To eliminate this warning, add "type": "module" to /Users/obiscr/projects/nextjs-stripe-supabase-starter/package.json.
[[email protected]] injecting env (7) from .env.local (tip: ⚙️  load multiple .env files with { path: ['.env.local', '.env'] })
🚀 Starting Stripe initialization...




📋 Processing product: Premium Membership
──────────────────────────────────────────────────
9 collapsed lines
📦 Creating product: Premium Membership
✅ Product created: ************** - Premium Membership
💰 Creating price: Premium Monthly - $29.99
✅ Price created: ************** - Premium Monthly
💰 Creating price: Premium Yearly - $99.99
✅ Price created: ************** - Premium Yearly
💰 Creating price: Premium Lifetime - $199.99
✅ Price created: ************** - Premium Lifetime
✨ Completed Premium Membership with 3 prices


📋 Processing product: Cloud Storage
──────────────────────────────────────────────────
9 collapsed lines
📦 Creating product: Cloud Storage
✅ Product created: ************** - Cloud Storage
💰 Creating price: 50GB Storage - $9.99
✅ Price created: ************** - 50GB Storage
💰 Creating price: 100GB Storage - $19.99
✅ Price created: ************** - 100GB Storage
💰 Creating price: 500GB Storage - $49.99
✅ Price created: ************** - 500GB Storage
✨ Completed Cloud Storage with 3 prices


📋 Processing product: API Access
──────────────────────────────────────────────────
9 collapsed lines
📦 Creating product: API Access
✅ Product created: ************** - API Access
💰 Creating price: Basic API - $19.99
✅ Price created: ************** - Basic API
💰 Creating price: Pro API - $49.99
✅ Price created: ************** - Pro API
💰 Creating price: Enterprise API - $99.99
✅ Price created: ************** - Enterprise API
✨ Completed API Access with 3 prices


🎉 Stripe initialization completed successfully!


📊 Summary:
────────────────────────────────────────────────────────────


🏷️  Premium Membership (**************)
   💰 Premium Monthly: ************** - $29.99
   💰 Premium Yearly: ************** - $99.99
   💰 Premium Lifetime: ************** - $199.99


🏷️  Cloud Storage (**************)
   💰 50GB Storage: ************** - $9.99
   💰 100GB Storage: ************** - $19.99
   💰 500GB Storage: ************** - $49.99


🏷️  API Access (**************)
   💰 Basic API: ************** - $19.99
   💰 Pro API: ************** - $49.99
   💰 Enterprise API: ************** - $99.99


✅ You can now run your application and see the products!
🔗 Stripe Dashboard: https://dashboard.stripe.com/products

这将创建配置中定义的所有产品和价格。你可以在 Stripe 仪表板中查看它们。

此时，你可以在 Stripe Webhook 仪表板中看到 Webhook 触发器。

Terminal window
A newer version of the Stripe CLI is available, please update to: v1.28.0
> Ready! You are using Stripe API Version [2022-08-01]. Your webhook signing secret is whsec_xxxxx (^C to quit)
2025-07-10 21:44:51   --> product.created [evt_******************]
2025-07-10 21:44:52   --> plan.created [evt_******************]
2025-07-10 21:44:52  <--  [200] POST http://localhost:3000/api/webhooks/stripe [evt_******************]
2025-07-10 21:44:52   --> price.created [evt_******************]
2025-07-10 21:44:53  <--  [200] POST http://localhost:3000/api/webhooks/stripe [evt_******************]
2025-07-10 21:44:53   --> plan.created [evt_******************]
2025-07-10 21:44:53  <--  [200] POST http://localhost:3000/api/webhooks/stripe [evt_******************]
2025-07-10 21:44:53   --> price.created [evt_******************]
2025-07-10 21:44:54  <--  [200] POST http://localhost:3000/api/webhooks/stripe [evt_******************]
2025-07-10 21:44:54   --> price.created [evt_******************]
2025-07-10 21:44:54  <--  [200] POST http://localhost:3000/api/webhooks/stripe [evt_******************]
2025-07-10 21:44:54   --> product.created [evt_******************]
2025-07-10 21:44:54  <--  [200] POST http://localhost:3000/api/webhooks/stripe [evt_******************]
2025-07-10 21:44:55  <--  [200] POST http://localhost:3000/api/webhooks/stripe [evt_******************]
2025-07-10 21:44:55   --> price.created [evt_******************]
2025-07-10 21:44:56  <--  [200] POST http://localhost:3000/api/webhooks/stripe [evt_******************]
2025-07-10 21:44:56   --> price.created [evt_******************]
2025-07-10 21:44:57   --> price.created [evt_******************]
2025-07-10 21:44:57  <--  [200] POST http://localhost:3000/api/webhooks/stripe [evt_******************]
2025-07-10 21:44:58   --> product.created [evt_******************]
2025-07-10 21:44:58  <--  [200] POST http://localhost:3000/api/webhooks/stripe [evt_******************]
2025-07-10 21:44:58  <--  [200] POST http://localhost:3000/api/webhooks/stripe [evt_******************]
2025-07-10 21:44:58   --> price.created [evt_******************]
2025-07-10 21:44:59   --> price.created [evt_******************]
2025-07-10 21:44:59  <--  [200] POST http://localhost:3000/api/webhooks/stripe [evt_******************]
2025-07-10 21:45:00   --> price.created [evt_******************]
2025-07-10 21:45:00  <--  [200] POST http://localhost:3000/api/webhooks/stripe [evt_******************]
2025-07-10 21:45:01  <--  [200] POST http://localhost:3000/api/webhooks/stripe [evt_******************]

If everything goes well, you will see the product and product item data in supabase.

步骤 8：生成数据类型

Section titled “步骤 8：生成数据类型”
> npm run supabase:gen-types


> [email protected] supabase:gen-types
> supabase gen types typescript --linked > lib/database.types.ts

步骤 9：启动开发服务器

Section titled “步骤 9：启动开发服务器”
Terminal window
npm run dev

在浏览器中打开 http://localhost:3000。

完成完整的购买流程

Section titled “完成完整的购买流程”

  1. 注册新用户

    • 点击 "登录" 按钮,
    • 切换到 "注册" 标签
    • 使用电子邮件和密码创建一个新帐户

  2. 浏览产品

    • 查看 3 个产品类别
    • 每个产品有多个定价层

  3. 进行测试购买

    • 点击任何产品上的 "立即购买"
    • 你将被重定向到 Stripe Checkout
    • 使用测试卡号: 4242 4242 4242 4242
    • 使用任何未来的到期日期和 CVC
    • 完成支付

  4. 支付成功

    • 你将被重定向到成功页面

  5. 验证购买

    • 返回主页
    • 购买的商品应显示 "已购买" 状态

总结

Section titled “总结”

这是一个使用 Stripe 和 Supabase 的简单示例。你可以使用它作为你自己的项目的起点。

你可以在以下位置找到源代码：

nextjs-stripe-supabase-starter 一个基于Next.js、Stripe Checkout和Supabase构建的完整电子商务演示系统，包含用户认证、产品管理、安全支付处理及自动购买跟踪功能。
在线案例 Next.js、Stripe 和 Supabase 启动模板的实时演示