ライブデモ: atlas.dodopayments.comを訪れて、プラットフォームを探索し、すべての請求フローをテストしてください。
概要
Atlasは、ユーザーがテキストプロンプトから画像を生成する実際のAIアート生成プラットフォームをシミュレートします。このデモは、異なる請求モデルとチェックアウト体験を示す3つの異なる購入フローを強調しています。- 使用ベースの請求: 生成された画像ごとに支払い（$0.75/画像）
- サブスクリプション: 無制限のプロプラン（$20/月）
- 一回限りの購入: クレジットパック（$7で10クレジット）
購入フロー
Atlasは3つの異なる請求フローを示しています。各フローは似たパターンに従いますが、異なるチェックアウト体験と請求モデルを示しています。- 使用ベースの請求
- サブスクリプション
- 一回限りの購入
1
画像ごとの料金を選択
AIアート生成のために画像ごとの支払いオプション（$0.75/画像）を選択します。これは、顧客が消費した分だけ支払う使用ベースの請求を示しています。
2
アートワークを生成
テキストプロンプトを入力して画像を生成します。システムは請求目的のために使用状況を自動的に追跡します。
3
チェックアウトを完了
チェックアウトプロセスには以下が含まれます：
- ブランド化されたチェックアウトページ: Dodo Paymentsのチェックアウトページには、あなたの商人ブランド名とロゴが表示されます
- 顧客情報: ユーザーの詳細と請求先住所を入力します
- 税金計算: 住所確認後に自動的に税金が計算されます
- 支払い: テストカードの詳細を入力して取引を完了します
4
確認を表示
支払い後、Atlasは使用状況の詳細と残りのクレジットを表示する確認画面を表示します。
5
ダッシュボードにアクセス
ユーザーはAtlas Studioダッシュボードにリダイレクトされ、アートワークの生成を続け、使用状況を監視できます。
購入後のダッシュボード体験
Atlas Studioダッシュボードは、チェックアウト完了後の請求に関する機能と権利追跡を実装する方法を示しています。ダッシュボード機能
- 即時アクセス: ユーザーは購入後すぐにアートワークの生成を開始できます
- 使用状況追跡: 残りのクレジット、アクティブなサブスクリプション、生成履歴のリアルタイム表示
- 請求管理: 購入履歴、サブスクリプションの状態、今後の更新を表示
- シームレスな統合: 適切な権利追跡でユーザーをアプリケーションに戻す方法を示します
ダッシュボード体験は、権利確認と使用状況監視を含む購入後のユーザーフローのベストプラクティスを示しています。
技術的実装
Atlasは、Dodo Payments TypeScript SDKを使用して構築されており、数行のコードで請求フローを統合する方法を示しています。統合ガイド
Dodo Paymentsのチェックアウトフローをアプリケーションに統合する方法を学びます。
TypeScript SDK
TypeScript SDKのドキュメントとAPIリファレンスを探索します。
オープンソース
Atlasはオープンソースプロジェクトです。実際のアプリケーションでの請求フローの実装方法を確認するためにコードベースを探索してください。GitHubで見る
Atlasのソースコードを閲覧し、実装から学びます。