這篇發給AI,Google登錄+Stripe支付就搞定了丨附提示詞
整理版優先睇
用AI(Codex)實作Google登錄+Stripe支付,全靠一個懶人提示詞
呢篇文章係阿星繼續分享出海支付系統嘅第二彈。上一期佢教咗Stripe接入同扣款,今次補返用戶登錄呢part——用Google OAuth登錄,結合Supabase做持久化,再配上Stripe訂閲。作者建議直接用佢提供嘅工程級提示詞,交畀AI編程助手(Codex)生成全套代碼,包括API routes、數據庫表結構同webhook邏輯,然後手動做三個配置步驟就得。
文章嘅懶人提示詞涵蓋咗所有技術要求:Google登錄、Stripe Checkout、Supabase表設計、環境變量校驗、前端賬號入口、安全同步、webhook冪等處理等等。生成完代碼後,只要喺Supabase Dashboard開Google Provider、去Google Cloud拎Client ID同Secret、最後喺Supabase同Vercel做簡單部署配置,就完成。
阿星反思話,大多數人唔使行專家路線,想做出海功能就直接同Codex傾偈,目的先行、逐個問題解決,反而學得更快。佢自己買咗七八套課,但最有效都係同AI對話,知道自己要學咩先,再去睇課效率更高。
- 用AI(Codex)配合一條工程級提示詞,可以零基礎實現Google登錄+Stripe訂閲,唔使全棧背景。
- 提示詞涵蓋咗所有技術要求:Supabase Auth OAuth、Stripe Checkout、webhook事件處理、環境變數校驗、前後端安全同步。
- 手動配置只需三大步:Supabase開Google Provider、Google Cloud拎OAuth credentials、保存設定後重新部署Vercel。
- 傳統做法要學好多理論,但呢度透過AI聊天方式,目的先行,直接解決問題,學習曲線更平。
- 作者建議:遇到唔識嘅功能就直接同Codex傾,傾完再睇返買咗嘅課程,效率會高好多。
工程級懶人提示詞(實現Google 登錄 + Stripe 訂閲)
將以下整段提示詞交畀AI編程助手(如Codex),即可生成完整嘅Google登錄、Stripe訂閲同Supabase持久化代碼,包括API routes、數據庫表、webhook處理同前端交互。
結構示例
# 工程級懶人提示詞(實現Google 登錄 + Stripe 訂閲)把下面整段交給你的 AI 編程助手即可:```text你是我的全棧工程師,請在現有靜態前端 + Vercel API 項目裏,完整實現“Google 登錄 + Stripe 訂閲 + Supabase 持久化”,並滿足以下硬性要求。【目標】1. 登錄方式:Google 登錄(基於 Supabase Auth OAuth)。
2. 支付方式:Stripe Checkout 訂閲(月/季/年)。
3. 會員真相源:後端 webhook + Supabase 表,不允許只靠 localStorage 判權限。
4. 交互要求:會員頁右上角必須有明顯賬號入口(頭像+郵箱),可查看賬號信息、管理訂閲、切換賬號、退出登錄。
5. 安全要求:每次點擊“購買/管理訂閲”前,強制同步當前 Google session 到後端,防止舊賬號 cookie 殘留導致串號下單。【技術棧和關鍵路由】- 前端:pricing.html(靜態頁)- API:
- GET /api/auth/config
- POST /api/auth/google-session
- POST /api/auth/logout
- GET /api/auth/me
- POST /api/payments/create-checkout-session
- POST /api/payments/customer-portal
- GET /api/payments/subscription-status
- POST /api/webhooks/stripe
- GET /api/health【數據表(Supabase)】必須使用兩張表:
- public.billing_users- public.subscriptions字段至少包含:
- billing_users: id/email/stripe_customer_id/subscription_status/created_at/updated_at- subscriptions: user_id/stripe_subscription_id/stripe_price_id/plan_key/status/current_period_end/cancel_at_period_end/updated_at 等【環境變量】必須讀取並校驗:SUPABASE_URLSUPABASE_ANON_KEYSUPABASE_SERVICE_ROLE_KEYAUTH_JWT_SECRETSTRIPE_SECRET_KEYSTRIPE_WEBHOOK_SECRETSTRIPE_PRICE_MONTHLYSTRIPE_PRICE_QUARTERLYSTRIPE_PRICE_YEARLYAPP_BASE_URLSTRIPE_TRIAL_DAYSSTRIPE_ALLOW_PROMO_CODESSTRIPE_PORTAL_ENABLED【前端行為要求】1. 未登錄時:購買按鈕可見,但點擊後先提示 Google 登錄。
2. 已登錄時:右上角顯示頭像+郵箱;賬號菜單可見。
3. 賬號信息彈窗顯示:郵箱、登錄方式、會員狀態、到期時間。
4. 手機端:賬號信息字體不可過小(至少 text-sm 以上,可讀)。
5. 購買前調用 ensureAuthenticatedUser(),內部必須“先強制同步 Google session -> 再讀後端 session”。【支付與會員邏輯】1. create-checkout-session 只接受已登錄用戶。
2. 首次支付自動創建 Stripe customer,並回寫 billing_users.stripe_customer_id。
3. webhook 監聽至少 5 個事件:
- checkout.session.completed
- invoice.paid
- invoice.payment_failed
- customer.subscription.updated
- customer.subscription.deleted4. webhook 驗籤失敗必須返回 400。
5. webhook 寫入 subscriptions,確保冪等(按 user_id 或 stripe_subscription_id upsert)。【缺表診斷】1. /api/health 必須返回 billing_users 和 subscriptions 的檢查結果。
2. 若缺表,錯誤信息必須明確提示“運行 supabase 建表 SQL 文件路徑”。【交付物】- 代碼修改- 一份可直接執行的 Supabase SQL 文件(如 xxxx/supabase/billing_schema.sql)- 一份部署檢查文檔(環境變量、Webhook、測試步驟)【驗收清單(你必須自測)】1. Google 登錄後右上角顯示郵箱。
2. 切換 Google 賬號後,再點購買時使用的是新賬號。
3. 未訂閲用戶可登錄,但會員狀態顯示“未訂閲”。
4. 完成 Stripe 測試支付後,會員狀態變為 active,且有 current_period_end。
5. 取消訂閲後狀態正確回落。
6. /api/health 返回成功幷包含兩張表檢查項。現在開始直接改代碼,不要只給方案。改完輸出:
- 修改了哪些文件- 每個文件的關鍵變更- 還需要我在 Dashboard 手動完成哪些配置
點解要做Google登錄?
阿星上篇文章教咗用Stripe收錢,但用戶登錄系統未搞。今次佢補返呢part,推薦用Google登錄,因為用戶唔使再註冊新賬號,門檻低。
成個方案係:用戶用Google登入後,右上角顯示頭像同郵箱,可以睇到會員狀態。所有訂閲數據會寫入Supabase數據庫,唔係得前端localStorage咁簡單。
用懶人提示詞生成代碼
如果唔想睇步驟,可以直接用阿星準備嘅工程級懶人提示詞。將成段提示詞交畀Codex,佢就會生成曬所有後端API、Supabase表結構、Stripe webhook同前端交互代碼。
- 1 複製提示詞入去AI助手(例如Codex),叫佢「直接改代碼,唔好只畀方案」。
- 2 生成完成後,AI會列出修改咗嘅檔案同關鍵變更,仲有需要手動做嘅配置。
- 3 然後跟住下面嘅三大步手動配置Supabase同Google Cloud就得。
提示詞包含咗技術棧要求(前端pricing.html、10個API路由)、數據表設計(billing_users同subscriptions)、環境變量(Supabase、Stripe、JWT等)同驗收清單,確保AI生成嘅代碼符合預期。
三大步配置,唔使寫Code
代碼生成完之後,手動設定好簡單,得三個步驟:
- 1 喺Supabase Dashboard -> Authentication -> Providers -> Google,開Enable Google,等陣將Client ID同Secret貼入去。
- 2 去Google Cloud Console -> APIs & Services -> Credentials,建立OAuth同意頁(External + 測試用戶),然後Create Credentials揀Web application,Authorized redirect URIs填 https://<你的Supabase Project Ref>.supabase.co/auth/v1/callback。
- 3 返Supabase保存Client ID同Secret;然後喺Authentication -> URL Configuration,設定Site URL同Additional Redirect URLs(包括本地pricing.html)。最後去Vercel重新部署一次,令環境變數生效。
配置完之後,成個Google登錄同Stripe訂閲系統就正式行得。阿星提醒:Vercel一定要重新部署,因為環境變數改咗。
目的先行,同AI傾偈學得最快
文章尾段阿星分享個人體會:佢買咗七八套AI課,但最有用都係目的先行——直接同Codex傾,遇到問題就問,慢慢就識得前端、後端、支付集成。
佢話「大多數人唔走專家路線」,唔使學曬所有理論。想做出海功能,就先同AI對話,唔識就問,做到第一版跑起來,再逐步改善。咁樣學,效率高過先買課睇書。

哈囉,大家好!
我係阿星👋
尋日我哋用AI接入咗Stripe,但仲未講點樣整好用戶登錄系統出嚟👉一步一步教你搞掂出海支付!Stripe接入+扣款成功全流程實錄。
今日補充嚇呢部分,其實應該先做呢部分,不過自己嚟啱啱接觸嘅話,差唔多用到就得㗎喇。
實現啲乜?
使用說明(必睇)
1、為咗方便懶得睇嘅同學,我叫codex整理咗一套唔單止可以幫你做曬呢篇文章嘅用戶登錄功能、仲可以順便將上篇文章嘅Stripe集成埋嘅提示詞,冇時間睇文章可以直接複製。(先用佢生成登錄系統)
2、具體手動操作步驟就向下碌就得㗎喇。
3、睇唔明冇關係,直接將呢篇文章發俾AI就得㗎喇。
睇唔明代碼而家都可以做到一樣嘅功能,你係新手的話,係完全可以整到出嚟㗎。
懶人提示詞直接用
# 工程級懶人提示詞(實現Google 登錄 + Stripe 訂閲)
把下面整段交給你的 AI 編程助手即可:
```text
你是我的全棧工程師,請在現有靜態前端 + Vercel API 項目裏,完整實現“Google 登錄 + Stripe 訂閲 + Supabase 持久化”,並滿足以下硬性要求。
【目標】
1. 登錄方式:Google 登錄(基於 Supabase Auth OAuth)。
2. 支付方式:Stripe Checkout 訂閲(月/季/年)。
3. 會員真相源:後端 webhook + Supabase 表,不允許只靠 localStorage 判權限。
4. 交互要求:會員頁右上角必須有明顯賬號入口(頭像+郵箱),可查看賬號信息、管理訂閲、切換賬號、退出登錄。
5. 安全要求:每次點擊“購買/管理訂閲”前,強制同步當前 Google session 到後端,防止舊賬號 cookie 殘留導致串號下單。
【技術棧和關鍵路由】
- 前端:pricing.html(靜態頁)
- API:
- GET /api/auth/config
- POST /api/auth/google-session
- POST /api/auth/logout
- GET /api/auth/me
- POST /api/payments/create-checkout-session
- POST /api/payments/customer-portal
- GET /api/payments/subscription-status
- POST /api/webhooks/stripe
- GET /api/health
【數據表(Supabase)】
必須使用兩張表:
- public.billing_users
- public.subscriptions
字段至少包含:
- billing_users:
id
/email/stripe_customer_id/subscription_status/created_at/updated_at
- subscriptions: user_id/stripe_subscription_id/stripe_price_id/plan_key/status/current_period_end/cancel_at_period_end/updated_at 等
【環境變量】
必須讀取並校驗:
SUPABASE_URL
SUPABASE_ANON_KEY
SUPABASE_SERVICE_ROLE_KEY
AUTH_JWT_SECRET
STRIPE_SECRET_KEY
STRIPE_WEBHOOK_SECRET
STRIPE_PRICE_MONTHLY
STRIPE_PRICE_QUARTERLY
STRIPE_PRICE_YEARLY
APP_BASE_URL
STRIPE_TRIAL_DAYS
STRIPE_ALLOW_PROMO_CODES
STRIPE_PORTAL_ENABLED
【前端行為要求】
1. 未登錄時:購買按鈕可見,但點擊後先提示 Google 登錄。
2. 已登錄時:右上角顯示頭像+郵箱;賬號菜單可見。
3. 賬號信息彈窗顯示:郵箱、登錄方式、會員狀態、到期時間。
4. 手機端:賬號信息字體不可過小(至少 text-sm 以上,可讀)。
5. 購買前調用 ensureAuthenticatedUser(),內部必須“先強制同步 Google session -> 再讀後端 session”。
【支付與會員邏輯】
1. create-checkout-session 只接受已登錄用戶。
2. 首次支付自動創建 Stripe customer,並回寫 billing_users.stripe_customer_id。
3. webhook 監聽至少 5 個事件:
- checkout.session.completed
- invoice.paid
- invoice.payment_failed
- customer.subscription.updated
- customer.subscription.deleted
4. webhook 驗籤失敗必須返回 400。
5. webhook 寫入 subscriptions,確保冪等(按 user_id 或 stripe_subscription_id upsert)。
【缺表診斷】
1. /api/health 必須返回 billing_users 和 subscriptions 的檢查結果。
2. 若缺表,錯誤信息必須明確提示“運行 supabase 建表 SQL 文件路徑”。
【交付物】
- 代碼修改
- 一份可直接執行的 Supabase SQL 文件(如 xxxx/supabase/billing_schema.sql)
- 一份部署檢查文檔(環境變量、Webhook、測試步驟)
【驗收清單(你必須自測)】
1. Google 登錄後右上角顯示郵箱。
2. 切換 Google 賬號後,再點購買時使用的是新賬號。
3. 未訂閲用戶可登錄,但會員狀態顯示“未訂閲”。
4. 完成 Stripe 測試支付後,會員狀態變為 active,且有 current_period_end。
5. 取消訂閲後狀態正確回落。
6. /api/health 返回成功幷包含兩張表檢查項。
現在開始直接改代碼,不要只給方案。改完輸出:
- 修改了哪些文件
- 每個文件的關鍵變更
- 還需要我在 Dashboard 手動完成哪些配置
代碼生成曬之後,
跟住就係配置,步驟亦都非常簡單,
總共就三大步——
1、喺Supabase裏面關聯Google登入
路徑:
Supabase Dashboard -> Authentication -> Providers -> Google
操作:開Enable Google,先停喺呢個頁面,

等陣將Google嘅Client ID / Client Secret貼入嚟然後Save。

2、喺Google Cloud裏面創建應用並獲取密鑰
路徑:
Google Cloud Console -> APIs & Services -> Credentials

操作:
1. 先喺OAuth consent screen將同意頁配好(External + 測試用戶)。 2. 然後Create Credentials -> OAuth client ID -> Web application。
Authorized redirect URIs填: 規則是:
https://<你嘅Supabase Project Ref>.加上
supabase.co/auth/v1/callback
不知道Ref喺邊你就問codex,佢乜都知㗎。

3、返去Supabase保存資料
步驟1:
Authentication -> Providers -> Google
將第2步攞到嘅Client ID / Client Secret貼入去,撳Save。
步驟2:1、Site URL填:
https://xxx.com呢個係你自己業務站點地址
2、Additional Redirect URLs加:
https://xxx.com/xxxx/pricing.html
呢個係你自己業務站點地址支付頁
http://xxxx/xxxx/pricing.html
(本地調試用嗰個price地址)

再補多句
其實只要唔行專家路線,學AI嘅方式其實都係目的先行,不如想體驗出海就先同codex傾偈就搞掂曬。佢乜嘢都會話俾你知。然後你會喺傾偈中學到前端、後端、支付集成。就算好水皮,但係足夠run得起。然後繼續傾,然後就會學到更加多。
畢竟絕大多數人根本唔行專家路線冇必要學咁多,當然出海仲要報班嘅需要信息差。我自己垂直類課程同通識課程加埋買咗七八套,老師都有七八個,仲未計Claude、Codex呢啲天才老師。
其實都係目的先行嘅傾偈,知道自己到底要學啲乜,係最必不可少嘅。然後再睇返自己買嗰啲課程,效率會更加高。
所以如果大家遇到諸如此類唔識嘅,一律先同codex講就得,循序漸進,並唔困難。
Ok,我係阿星,
更多AI應用,我哋下期再見👋


哈嘍,大家好!
我是阿星👋
昨天我們用ai接入了stripe但是還沒講怎麼把用戶登錄系統做出來👉手把手教你跑通出海支付!Stripe接入+扣款成功全流程實錄。
今天補充下這part,其實應該先做這part,不過自己幹剛接觸的話差不多能用就行了。
實現什麼?
使用說明(必看)
1、為了方便懶得看的同學,我讓codex整理了一套不但能幫你做完本文用戶登錄功能、還能順帶把上篇文章的stripe集成進去的提示詞,沒空看文章可以直接複製。(先用他生成登錄系統)
2、具體手動操作步驟的話往下劃拉即可。
3、看不懂沒關係,直接把這篇文章發給AI即可。
看不懂代碼現在也能達到同樣的功能,你是小白的話,是完全可以做出來。
懶人提示詞直接用
# 工程級懶人提示詞(實現Google 登錄 + Stripe 訂閲)
把下面整段交給你的 AI 編程助手即可:
```text
你是我的全棧工程師,請在現有靜態前端 + Vercel API 項目裏,完整實現“Google 登錄 + Stripe 訂閲 + Supabase 持久化”,並滿足以下硬性要求。
【目標】
1. 登錄方式:Google 登錄(基於 Supabase Auth OAuth)。
2. 支付方式:Stripe Checkout 訂閲(月/季/年)。
3. 會員真相源:後端 webhook + Supabase 表,不允許只靠 localStorage 判權限。
4. 交互要求:會員頁右上角必須有明顯賬號入口(頭像+郵箱),可查看賬號信息、管理訂閲、切換賬號、退出登錄。
5. 安全要求:每次點擊“購買/管理訂閲”前,強制同步當前 Google session 到後端,防止舊賬號 cookie 殘留導致串號下單。
【技術棧和關鍵路由】
- 前端:pricing.html(靜態頁)
- API:
- GET /api/auth/config
- POST /api/auth/google-session
- POST /api/auth/logout
- GET /api/auth/me
- POST /api/payments/create-checkout-session
- POST /api/payments/customer-portal
- GET /api/payments/subscription-status
- POST /api/webhooks/stripe
- GET /api/health
【數據表(Supabase)】
必須使用兩張表:
- public.billing_users
- public.subscriptions
字段至少包含:
- billing_users:
id
/email/stripe_customer_id/subscription_status/created_at/updated_at
- subscriptions: user_id/stripe_subscription_id/stripe_price_id/plan_key/status/current_period_end/cancel_at_period_end/updated_at 等
【環境變量】
必須讀取並校驗:
SUPABASE_URL
SUPABASE_ANON_KEY
SUPABASE_SERVICE_ROLE_KEY
AUTH_JWT_SECRET
STRIPE_SECRET_KEY
STRIPE_WEBHOOK_SECRET
STRIPE_PRICE_MONTHLY
STRIPE_PRICE_QUARTERLY
STRIPE_PRICE_YEARLY
APP_BASE_URL
STRIPE_TRIAL_DAYS
STRIPE_ALLOW_PROMO_CODES
STRIPE_PORTAL_ENABLED
【前端行為要求】
1. 未登錄時:購買按鈕可見,但點擊後先提示 Google 登錄。
2. 已登錄時:右上角顯示頭像+郵箱;賬號菜單可見。
3. 賬號信息彈窗顯示:郵箱、登錄方式、會員狀態、到期時間。
4. 手機端:賬號信息字體不可過小(至少 text-sm 以上,可讀)。
5. 購買前調用 ensureAuthenticatedUser(),內部必須“先強制同步 Google session -> 再讀後端 session”。
【支付與會員邏輯】
1. create-checkout-session 只接受已登錄用戶。
2. 首次支付自動創建 Stripe customer,並回寫 billing_users.stripe_customer_id。
3. webhook 監聽至少 5 個事件:
- checkout.session.completed
- invoice.paid
- invoice.payment_failed
- customer.subscription.updated
- customer.subscription.deleted
4. webhook 驗籤失敗必須返回 400。
5. webhook 寫入 subscriptions,確保冪等(按 user_id 或 stripe_subscription_id upsert)。
【缺表診斷】
1. /api/health 必須返回 billing_users 和 subscriptions 的檢查結果。
2. 若缺表,錯誤信息必須明確提示“運行 supabase 建表 SQL 文件路徑”。
【交付物】
- 代碼修改
- 一份可直接執行的 Supabase SQL 文件(如 xxxx/supabase/billing_schema.sql)
- 一份部署檢查文檔(環境變量、Webhook、測試步驟)
【驗收清單(你必須自測)】
1. Google 登錄後右上角顯示郵箱。
2. 切換 Google 賬號後,再點購買時使用的是新賬號。
3. 未訂閲用戶可登錄,但會員狀態顯示“未訂閲”。
4. 完成 Stripe 測試支付後,會員狀態變為 active,且有 current_period_end。
5. 取消訂閲後狀態正確回落。
6. /api/health 返回成功幷包含兩張表檢查項。
現在開始直接改代碼,不要只給方案。改完輸出:
- 修改了哪些文件
- 每個文件的關鍵變更
- 還需要我在 Dashboard 手動完成哪些配置
代碼生成完了,
接着就是配置了,步驟也非常簡單,
一共就三大步——
1、Supabase 裏關聯google登錄
路徑:
Supabase Dashboard -> Authentication -> Providers -> Google
操作:打開 Enable Google,先停在這個頁面,

等會把 Google 的 Client ID / Client Secret 粘進來並 Save。

2、Google Cloud 裏創建應用並獲取密鑰
路徑:
Google Cloud Console -> APIs & Services -> Credentials

操作:
1. 先在 OAuth consent screen 把同意頁配完(External + 測試用戶)。 2. 再 Create Credentials -> OAuth client ID -> Web application。
Authorized redirect URIs 填: 規則是:
https://<你的 Supabase Project Ref>.加上
supabase.co/auth/v1/callback
不知道Ref在哪裏你就問codex,它啥都知道。

3、回到 Supabase 保存信息
步驟1:
Authentication -> Providers -> Google
把第2步拿到的 Client ID / Client Secret 粘進去,點 Save。
步驟2:1、Site URL 填:
https://xxx.com這是你自己業務站點地址
2、Additional Redirect URLs 加:
https://xxx.com/xxxx/pricing.html
這是你自己業務站點地址支付頁
http://xxxx/xxxx/pricing.html
(本地調試用那個price地址)

再補一句
其實只要不走專家路線,學ai的方式其實都是目的先行,不如想體驗出海就先給codex聊天就完事了。它什麼都會告訴你。然後你會在聊天中學會前端、後端、支付集成。哪怕很水,但足夠跑起來。然後接着聊,然後會的更多。
畢竟絕大多數人根本不走專家路線沒必要學那麼多當然了出海還要報班的需要信息差。我自己垂類課和通識課加起來買了七八套課老師也有七八個,還沒算claude、 codex這種天才老師。
其實還是目的先行的聊天知道自己到底要學啥,是最必不可少的。然後再去看自己買的那些課,效率會更高點。
所以如果大家遇到諸如此類不會的,一律先和codex說就可以了,循序漸進,並不困難。
ok,我是阿星,
更多AI應用,我們下期再見👋
