在线演示：访问 atlas.dodopayments.com 探索平台并测试每种计费流程。
概述
Atlas 模拟了一个 AI 艺术生成平台，用户可以通过文本提示词创建图像。其 Pricing 页面提供四种计划，每种计划采用不同的计费模式：- Starter Credits（预付 credits）：$10 购买 10 个 credits，永不过期。
- Credit Pack（基于 credits 的订阅）：每月 $10，每月获得 25 个 credits，支持 50% 的 credits 结转和低余额提醒。
- Unlimited Pro（订阅）：每月 $20，可无限生成图像。
- Special Downloads（一次性购买）：$12 购买包含 12 件艺术作品的套装。
购买流程
三种流程遵循相同的模式。每种流程使用不同的计费模式和产品类型。- Credit-Based Billing
- Subscription
- One-Time Purchase
1
Select the Credit Pack
在 Pricing 页面上，点击 Credit Pack 计划（每月 $10，每月 25 个 credits）中的 Buy credits。客户生成的每张图像都会使用月度额度中的 credits，未使用的 credits 可以部分结转。
2
Sign In or Continue as a Guest
Atlas 会询问用户是登录（购买记录将保存到帐户），还是以访客身份继续。
3
Complete Checkout
checkout 流程包括：
- 品牌化 checkout 页面：Dodo Payments checkout 页面会显示商家的品牌名称和 logo。
- 客户信息：客户输入其详细信息和账单地址。
- 税费计算：客户确认地址后计算税费。
- 付款：客户输入测试卡信息以完成交易。
4
View Confirmation
付款成功后，Atlas 会确认购买。已登录用户会进入 dashboard。访客会看到包含计划和付款状态的付款摘要。
5
Access Dashboard
已登录用户会进入 Atlas Studio dashboard，其中显示本月剩余的 credits，并在用户生成艺术作品时扣除 credits。
购买后 Dashboard 体验
Atlas Studio dashboard 展示了 checkout 后如何构建支持计费的功能：读取客户购买的内容，并解锁相应的访问权限。Dashboard 功能
- 即时访问：用户购买后即可开始生成艺术作品。
- 用量跟踪：对于 credits 计划，dashboard 会显示剩余 credits；对于 Unlimited Pro，则会显示无限状态，并将其展示在用户生成的图像旁边。
- 计划状态：dashboard 会显示当前计划名称，例如 Unlimited Pro (Subscription) 或 Credit Pack (Credit-Based)。
- 返回你的应用：该流程展示了如何在 checkout 后将客户送回你的应用，并授予他们已付费购买的访问权限。
该 dashboard 遵循购买后流程的最佳实践：在授予访问权限前验证购买，并在应用中显示用量。
技术实现
Atlas 是一个 Next.js 应用。其 route handlers 直接调用 Dodo Payments API，例如使用POST /checkouts 创建 checkout session；dodopayments-checkout package 则可以将 checkout 以 overlay 或页面内嵌的方式打开。若要使用带类型的 client 构建相同流程，请使用 Dodo Payments TypeScript SDK。
Integration Guide
将 Dodo Payments checkout 流程集成到你的应用中。
TypeScript SDK
TypeScript SDK 文档和 API 参考。
开源
Atlas 是开源项目。阅读代码，了解每种计费流程如何在真实应用中实现。View on GitHub
浏览 Atlas 源代码。