ライブデモ: atlas.dodopayments.com にアクセスして、プラットフォームを確認し、すべての請求フローをテストできます。
概要
Atlasは、ユーザーがテキストプロンプトから画像を作成するAIアート生成プラットフォームをシミュレートします。Pricingページには4つのプランがあり、それぞれ異なる請求モデルを採用しています。- Starter Credits（前払いクレジット）: 10クレジットが付与される10ドルのプラン。有効期限はありません。
- Credit Pack（クレジットベースのサブスクリプション）: 月額10ドルで毎月25クレジット。クレジットの50%繰り越しと残高低下アラートが含まれます。
- Unlimited Pro（サブスクリプション）: 月額20ドルで画像を無制限に生成できます。
- Special Downloads（単発購入）: 12作品のパックが12ドルです。
購入フロー
3つのフローは同じパターンに従います。それぞれ異なる請求モデルとプロダクトタイプを使用します。- Credit-Based Billing
- Subscription
- One-Time Purchase
1
Select the Credit Pack
Pricingページで、Credit Packプラン（25クレジットを月額10ドル）にあるBuy creditsをクリックします。ユーザーが生成する各画像では、毎月の割り当てからクレジットが使用され、未使用のクレジットは一部繰り越されます。
2
Sign In or Continue as a Guest
Atlasは、サインインして購入をアカウントに保存するか、ゲストとして続行するかを確認します。
3
Complete Checkout
チェックアウトプロセスには次の項目が含まれます。
- ブランド付きチェックアウトページ: Dodo Paymentsのチェックアウトページに、マーチャントのブランド名とロゴが表示されます。
- 顧客情報: 顧客が詳細情報と請求先住所を入力します。
- 税額計算: 顧客が住所を確認した後に税額が計算されます。
- Payment: 顧客がテストカードの詳細を入力して取引を完了します。
4
View Confirmation
支払いが成功すると、Atlasは購入を確認します。サインイン済みのユーザーはダッシュボードに移動します。ゲストには、プランと支払いステータスを含む支払い概要が表示されます。
5
Access Dashboard
サインイン済みのユーザーはAtlas Studioダッシュボードに移動します。ダッシュボードには今月残っているクレジットが表示され、作品を生成するとクレジットが差し引かれます。
購入後のダッシュボード体験
Atlas Studioダッシュボードは、チェックアウト後に請求を認識した機能を構築する方法を示します。顧客が購入した内容を読み取り、対応するアクセス権を有効にします。ダッシュボードの機能
- 即時アクセス: ユーザーは購入直後から作品の生成を開始できます。
- 使用状況の追跡: ダッシュボードには、クレジットプランでは残りのクレジットが、Unlimited Proでは無制限のステータスが、ユーザーが生成した画像の横に表示されます。
- プランステータス: ダッシュボードには、**Unlimited Pro (Subscription)やCredit Pack (Credit-Based)**など、アクティブなプランが表示されます。
- アプリに戻る: チェックアウト後に顧客をアプリケーションへ戻し、支払ったアクセス権を付与する方法をフローで確認できます。
ダッシュボードは購入後のフローにおける適切な実装に従っています。アクセス権を付与する前に購入を検証し、アプリ内に使用状況を表示します。
技術的な実装
AtlasはNext.jsアプリケーションです。ルートハンドラーはDodo Payments APIを直接呼び出します。たとえば、POST /checkoutsでチェックアウトセッションを作成し、dodopayments-checkoutパッケージでチェックアウトをオーバーレイまたはページ内インラインとして開きます。型付きクライアントで同じフローを構築するには、Dodo Payments TypeScript SDKを使用してください。
Integration Guide
Dodo Paymentsのチェックアウトフローをアプリケーションに統合します。
TypeScript SDK
TypeScript SDKのドキュメントとAPIリファレンスです。
オープンソース
Atlasはオープンソースです。コードを読んで、実際のアプリケーションで各請求フローがどのように実装されているかを確認できます。View on GitHub
Atlasのソースコードを参照します。