乐于分享
好东西不私藏

如何用AI手搓一个APP去赚钱?(支付)

如何用AI手搓一个APP去赚钱?(支付)
前情回顾:
需求调研+产品方案+页面设计,点这里👇
如何用 AI手搓一个APP去挣钱?(一)
手搓前后端代码,点这里 👇
如何用 AI手搓一个APP去挣钱?(二)
线上部署+域名配置,点这里 👇
如何用AI手搓一个APP去赚钱?(三)
接入三方登录,点这里 👇
如何用AI手搓一个APP去赚钱?(登录)

经过四期猛干,产品终于能打了。

能登录、能存用户信息、能记录用户在你的平台上干了什么。

换句话说:上了一桌完整的菜。

来,梳理下我们目前的工作流程:

今天只干一件事——接支付,收钱。

目标是:用户 Google 登录后,选付费功能,弹窗扣款,扣完就能用。

先介绍工具:

Stripe:第三方支付平台。用户付款它先代收,你再提出来。

Supabase:记账簿。记谁付了多少钱、啥时候付的。

Vercel:调起付款服务。待会环境变量里加几个参数就行。

再说下整套流程,让你心里有个数:

用户在网站点「升级 Pro」→ 跳到 Stripe 付款页 → 付完款,Stripe 通知你部署在 Vercel 的后端 → 后端核验无误,把付费记录写入 Supabase → 用户回到网站,权益解锁。

如果你看懂了我们上期登录那套流程,这个应该不难理解。

闲话少说,开干。

---

先去 Stripe 注册登录,有可能让你做 KYC 合规审查——这个只影响你提钱,不影响收钱,先不管。直接建项目。

建好后,去 沙盒模式(Sandbox) 操作。支付比较重要,先在测试环境跑通,再切正式。两个模式流程一样,就是一个练手,一个真刀真枪。

沙盒模式下,你需要拿三样东西:

① Secret Key——后门钥匙

你的服务器靠它调 Stripe 的接口,创建付款页面、查支付状态。在 Dashboard 首页右侧箭头处,复制到本地。

② Price ID——商品标签

你先要在 Product catalog 里新建一个商品,起名、定价,选扣款方式(按月订阅还是一次性付款)。创建完点进详情,拉到最下面箭头处,就是 Price ID。复制到本地。

③ Webhook Secret——防伪验证码

Stripe 通知你"用户付钱了",你得确认这条通知真是 Stripe 发的,不是骗子冒充的。这个 secret 就是干这个用的。

拿它稍微麻烦一点:进开发者模式 → Webhook → 新建 event destination → 选三个事件:

- checkout.session.completed(用户付完款,主要靠它开通权益)

- payment_intent.succeeded(钱扣成功,确认记录)

- payment_intent.payment_failed(钱没扣成,记个失败)

关键的是第一个,后两个是状态追踪和异常兜底。

选完点下一步,选第一个 Webhook endpoint,再下一步。填三样:名称、Endpoint URL、描述。

Endpoint URL 是什么? 这个地址不是你从 Stripe "拿"的,是你自己线上的后端接口,专门等 Stripe 来敲门告诉你"有人付钱了"。

对 PRScore 来说,规则是:你的线上域名 + /api/payment/webhook

创建完点进详情,右下角箭头处就能拿到 Webhook Secret。保存到本地。

---

三样东西齐了,找我们老搭档 Codex 干活。

把三个参数丢给它,让它干几件事:

1. 把参数写到 Vercel 环境变量里

2. 在 Supabase 建支付用的数据库表

3. 写前端支付页面和触发逻辑

搞完在本地沙盒环境测一圈:

能不能调起支付弹窗 → 能不能跳转 Stripe → 能不能完成付款 → 付款后权益能不能解锁 → Stripe 后台有没有记录 → Supabase 有没有数据落库。

全部跑通,按同样流程去 Stripe 正式环境重新配一遍,拿到正式版三个参数,走一遍,推到线上。

支付通道就通了。

(如果你真的有了大量付费用户需要提款,那就需要注册一家海外实体公司来收款——当然这是个幸福的烦恼。)

(本地付款解锁引导弹窗)
(Stripe付款页面)

彩蛋

你可能注意到了,支付弹窗上我加了个兑换码窗口。目前设计了两种:

- 限时体验码:输入后免费体验两天,主要用来推广拉新

- 折扣码:比如 99-20,跟渠道伙伴合作用,谁用了谁的码,就知道用户从哪个渠道来的

---

支付大概讲完了。最后一篇,我会聊聊对做项目剩余的一些重要但不紧急的事。

(未完待续)