Atlas 是 Dodo Payments 提供的一个功能齐全的演示应用程序,展示了一个 AI 艺术生成平台。它展示了三种计费模型——基于使用的计费、一次性付款和 订阅——并集成了结账流程。
Atlas 模拟了一个真实的 AI 艺术生成平台,用户可以根据文本提示创建图像。该演示突出了三种不同的购买流程,每种流程展示了不同的计费模型和结账体验:
- 基于使用的计费:按生成的图像付费(每张图像 $0.75)
- 订阅:无限制专业计划($20/月)
- 一次性购买:信用包($7 购买 10 个信用)
完成任何购买后,用户将被重定向到 Atlas Studio 仪表板,在这里他们可以实时生成艺术作品并跟踪使用情况。
购买流程
Atlas 演示了三种独立的计费流程。每个流程遵循类似的模式,但展示了不同的结账体验和计费模型。
Usage-Based Billing
Subscription
One-Time Purchase
Select pay-per-image pricing
选择 按图像付费 选项(每张图像 $0.75)用于 AI 艺术生成。这演示了基于使用的计费,客户仅为其使用的部分付费。
Generate artwork
输入文本提示并生成图像。系统会自动跟踪用于计费的使用情况。
Complete checkout
结账流程包括:
- 品牌结账页面:Dodo Payments 结账页面显示您的商家品牌名称和徽标
- 客户信息:输入用户详细信息和账单地址
- 税费计算:在确认地址后自动计算税费
- 付款:输入测试卡信息以完成交易
使用测试卡 4242 4242 4242 4242,任意未来到期日期和 CVC,以模拟成功交易。
View confirmation
付款后,Atlas 显示带有使用详情和剩余额度的确认页面。
Access dashboard
用户会被重定向回 Atlas Studio 仪表板,在此他们可以继续生成艺术作品并监控使用情况。
Select subscription plan
选择 无限专业版 订阅计划($20/月)以获得无限制的 AI 艺术生成。
Generate artwork
在订阅前,输入提示并生成图像以测试该平台。
Complete checkout
订阅结账包括:
- 品牌结账页面:在整个结账过程中可见商家品牌
- 客户信息:输入用户详细信息和账单地址
- 税费计算:根据账单地址自动计算税费
- 付款:输入测试卡信息以激活订阅
订阅会自动按月续订。用户可在购买后从仪表板管理订阅。
View confirmation
付款后,Atlas 显示带有订阅激活详情和下次计费日期的确认页面。
Access dashboard
用户被重定向至 Atlas Studio 仪表板,享有无限制访问以生成艺术作品。
Select credit pack
选择 积分包(10 积分 $7)用于 AI 艺术生成。这演示了一次性购买交易。
Generate artwork
输入提示并生成图像以在购买积分前预览该平台。
Complete checkout
一次性购买结账包括:
- 品牌结账页:采用商户品牌的 Dodo Payments 结账页
- 客户信息:输入用户详细信息和账单地址
- 税费计算:地址确认后自动计算税费
- 付款:输入测试卡详情完成购买
View confirmation
付款后,Atlas 显示带有“感谢”信息和购买积分详情的确认页面。
Access dashboard
用户被重定向至 Atlas Studio 仪表板,其购买的积分即可用于生成艺术作品。
购买后的仪表板体验
Atlas Studio 仪表板展示了如何在结账完成后实现计费感知功能和权利跟踪。
仪表板功能
- 即时访问:用户可以在购买后立即开始生成艺术作品
- 使用跟踪:实时显示剩余信用、活跃订阅和生成历史
- 计费管理:查看购买历史、订阅状态和即将到期的续订
- 无缝集成:展示如何将用户正确重定向回您的应用程序,并进行适当的权利跟踪
仪表板体验展示了购买后用户流程的最佳实践,包括权限验证和使用监控。
技术实现
Atlas 使用 Dodo Payments TypeScript SDK 构建,展示了如何用几行代码集成计费流程。
Atlas 是一个开源项目。探索代码库,了解如何在真实应用程序中实现计费流程。
View on GitHub
浏览 Atlas 源代码并从实现中学习。