Live Demo: atlas.dodopayments.comにアクセスして、プラットフォームを探索し、すべてのbilling flowsをお試しください。
概要
Atlasは、ユーザーがテキストプロンプトから画像を作成する、実際のAIアート生成プラットフォームをシミュレートします。このデモでは、異なるbilling modelsとcheckout experiencesを示す、3種類の購入フローを紹介します。- 従量課金: 生成した画像ごとに支払い（1画像あたり$0.75）
- サブスクリプション: Unlimited Proプラン（$20/月）
- ワンタイム購入: クレジットパック（10クレジットで$7）
購入フロー
Atlasでは、3つの個別のbilling flowsを紹介します。各フローは似たパターンに従いますが、それぞれ異なるcheckout experiencesとbilling modelsを示します。- Usage-Based Billing
- Subscription
- One-Time Purchase
1
Select pay-per-image pricing
AIアート生成には、pay-per-imageオプション（1画像あたり$0.75）を選択します。これは、顧客が消費した分だけ支払う従量課金を示します。
2
Generate artwork
テキストプロンプトを入力して画像を生成します。システムはbilling purposesのために使用量を自動的に追跡します。
3
Complete checkout
checkout processには次が含まれます。
- Branded checkout page: Dodo Payments checkout pageに加盟店のブランド名とロゴが表示されます
- 顧客情報: ユーザー情報と請求先住所を入力します
- 税額計算: 住所の確認後、税額が自動的に計算されます
- 支払い: test card detailsを入力して取引を完了します
4
View confirmation
支払い後、Atlasは使用状況の詳細と残りのクレジットを確認画面に表示します。
5
Access dashboard
ユーザーはAtlas Studio dashboardに戻され、アートワークの生成を続けたり、使用状況の追跡を確認したりできます。
購入後のDashboard Experience
Atlas Studio dashboardでは、checkout完了後にbilling-aware featuresとentitlement trackingを実装する方法を紹介します。Dashboard Features
- 即時アクセス: ユーザーは購入直後からアートワークの生成を開始できます
- 使用状況の追跡: 残りのクレジット、アクティブなサブスクリプション、生成履歴をリアルタイムで表示します
- Billing management: 購入履歴、サブスクリプションのステータス、今後の更新を確認できます
- シームレスな統合: 適切なentitlement trackingを行いながら、ユーザーをアプリケーションへ戻す方法を紹介します
Dashboard experienceでは、entitlement verificationや使用状況の監視など、購入後のユーザーフローにおけるベストプラクティスを紹介します。
技術的な実装
AtlasはDodo Payments TypeScript SDKを使用して構築されており、わずか数行のコードでbilling flowsを統合する方法を紹介します。Integration Guide
Dodo Payments checkout flowsをアプリケーションに統合する方法をご覧ください。
TypeScript SDK
TypeScript SDKのドキュメントとAPI referenceをご覧ください。
Open Source
Atlasはオープンソースプロジェクトです。実際のアプリケーションでbilling flowsがどのように実装されているかを確認するには、コードベースをご覧ください。View on GitHub
Atlasのソースコードを確認し、実装から学びましょう。