##确认是不是「支付页慢」而不是「付款后慢」

把用户投诉翻译成可测的现象:页面打开慢、按钮很久不能点、点击后没反应、Stripe Checkout 打开慢,还是付款成功后权益没开通。五种问题看起来都叫「支付慢」,日志入口完全不同。

如果用户已经跳到了 Stripe Checkout,说明你的支付页至少完成了 session 创建;如果连 Stripe 页面都没出现,查自家页面、前端点击事件和创建 Checkout Session 的 API。

五段计时表怎么做?

阶段打点位置看目标常见根因
首屏performance.getEntriesByType("navigation")2 秒内图片、字体、首屏 JS、缓存策略
按钮可点hydration 后或 click listener ready3 秒内React hydration、第三方脚本、埋点阻塞
创建 sessionAPI start/end1 秒内优先冷启动、鉴权、数据库、coupon 校验
Stripe 返回checkout session id看 Stripe API 延迟参数校验、网络路径、API 重试
浏览器跳转redirect 或 location assign1 秒内promise 未 resolve、扩展拦截、前端错误

每次慢单都记录同一组字段:浏览器、地区、价格 id、coupon、用户 id、API request id、Stripe request id、前端耗时、后端耗时。字段不统一,最后只会变成「可能是 Vercel」或「可能是 Cloudflare」这种猜测。

首屏慢通常怪谁?

首屏慢通常不是 Stripe 的锅。大图、字体阻塞、第三方脚本、Next.js hydration、首页同款动画,都会让支付页在用户眼里显得不可靠。

支付页不需要承担官网首页的展示任务。先删 chat widget、复杂动画、无关推荐模块,把付款按钮和价格信息尽早渲染出来,往往比迁移平台更快见效。

Cloudflare Pages 文档强调全球网络和静态部署,Vercel 文档也提供 CDN、函数和可观测能力。但支付链路跨了你的代码、Stripe、浏览器和用户网络,单个平台宣传词不能替代端到端计时。

点击按钮后 API 慢怎么排?

创建 Checkout Session 之前,只保留付款必须完成的动作:登录状态检查、price id 校验、coupon 校验、订单草稿、Stripe Checkout Session 创建。CRM 同步、邮件订阅、报表写入、Notion 记录都不要挡在这一步。

API 内部动作是否放在付款前建议
用户登录状态检查只查必要字段,避免整张用户画像表
price id 和 coupon 校验用缓存或本地配置减少远程查询
创建 Stripe Checkout Session保留 Stripe request id
写订单草稿可以幂等键用 user id + price id + 时间窗口
邮件通知、CRM、报表放到 webhook 或队列里
权益开通checkout.session.completed webhook 为准

Stripe Checkout 的正式履约不要依赖 success page。用户付款后关闭浏览器,成功页也可能没加载;权益开通应以 webhook 和幂等订单表为准。

Cloudflare Pages 和 Vercel 分别看什么?

Cloudflare Pages,看静态资源、Pages Functions、Workers 请求、构建产物和缓存。支付页如果是静态页面,重点是 HTML、JS、图片和第三方脚本;如果用了 Pages Functions,再看函数日志和到 Stripe 的请求耗时。

Vercel,看 Function Duration、Invocation、Runtime Logs、Edge/Serverless 选择和数据访问路径。Next.js 支付页常见问题是首屏不慢,但按钮点击后函数冷启动、数据库连接或鉴权让用户多等 3-5 秒。

如果同一套代码在 Cloudflare Pages 和 Vercel 都慢,优先怀疑自家 API、数据库和第三方脚本;如果只有某个平台慢,再比较函数区域、运行时、缓存头和构建产物大小。

Stripe 跳转慢怎么办?

确认 session id 是否已经返回。session id 已返回但浏览器迟迟不跳,多半是前端 promise、脚本阻塞、浏览器扩展或错误处理;session 创建本身慢,才继续看 Stripe API 调用和网络路径。

不要在前端吞掉错误。把 redirectToCheckoutlocation.assign 前后的状态写清楚,用户至少能看到「正在跳转」和失败提示,而不是按钮转圈 20 秒。

还没恢复时,怎么给团队留排查入口?

部署和排错时经常要同时打开 Vercel、Cloudflare、GitHub Actions 和 Stripe。可以把这些后台集中在一套开发环境,用海外服务跑 GitHub Actions / Cloudflare 的稳定线路承载上线和回滚操作。

如果 24 小时内还没有定位,把慢单按「首屏慢 / 按钮不可点 / session 慢 / Stripe 跳转慢 / webhook 慢」分桶。每桶挑 3 个样本看日志,比继续泛泛讨论平台选择更有效。

相关阅读