Live-Demo: Besuchen Sie atlas.dodopayments.com, um die Plattform zu erkunden und jeden Abrechnungsvorgang zu testen.
Übersicht
Atlas simuliert eine Plattform zur KI-Kunstgenerierung, auf der Benutzer aus Textaufforderungen Bilder erstellen. Die Seite Pricing bietet vier Pläne, jeweils mit einem anderen Abrechnungsmodell:- Starter Credits (vorausbezahlte Guthaben): $10 für 10 Guthaben, die niemals verfallen.
- Credit Pack (guthabenbasiertes Abonnement): $10 pro Monat für 25 Guthaben pro Monat, mit 50 % Übertrag des Guthabens und Benachrichtigungen bei niedrigem Guthaben.
- Unlimited Pro (Abonnement): $20 pro Monat für unbegrenzte Bildgenerierung.
- Special Downloads (einmaliger Kauf): $12 für ein Paket mit 12 Kunstwerken.
Kaufvorgänge
Die drei Vorgänge folgen demselben Muster. Jeder verwendet ein anderes Abrechnungsmodell und einen anderen Produkttyp.- Credit-Based Billing
- Subscription
- One-Time Purchase
1
Select the Credit Pack
Klicken Sie auf der Seite Pricing beim Plan Credit Pack ($10 pro Monat für 25 Guthaben) auf Buy credits. Jedes von einem Kunden generierte Bild verbraucht Guthaben aus dem monatlichen Kontingent, wobei ein Teil des nicht verwendeten Guthabens übertragen wird.
2
Sign In or Continue as a Guest
Atlas fragt, ob Sie sich anmelden möchten, wodurch der Kauf einem Konto zugeordnet wird, oder ob Sie als Gast fortfahren möchten.
3
Complete Checkout
Der Checkout umfasst:
- Marken-Checkout-Seite: Die Checkout-Seite von Dodo Payments zeigt den Markennamen und das Logo des Händlers.
- Kundeninformationen: Der Kunde gibt seine Daten und Rechnungsadresse ein.
- Steuerberechnung: Die Steuer wird berechnet, nachdem der Kunde seine Adresse bestätigt hat.
- Zahlung: Der Kunde gibt Testkartendaten ein, um die Transaktion abzuschließen.
4
View Confirmation
Nach erfolgreicher Zahlung bestätigt Atlas den Kauf. Ein angemeldeter Benutzer gelangt zum Dashboard. Ein Gast sieht eine Zahlungsübersicht mit dem Plan und dem Zahlungsstatus.
5
Access Dashboard
Angemeldete Benutzer gelangen zum Atlas Studio-Dashboard, das das in diesem Monat verbleibende Guthaben anzeigt und bei der Generierung von Kunstwerken Guthaben abzieht.
Dashboard-Erlebnis nach dem Kauf
Das Atlas Studio-Dashboard zeigt, wie sich nach dem Checkout abrechnungsbewusste Funktionen entwickeln lassen: Es liest, was der Kunde gekauft hat, und schaltet den entsprechenden Zugriff frei.Dashboard-Funktionen
- Sofortiger Zugriff: Benutzer können direkt nach dem Kauf mit der Generierung von Kunstwerken beginnen.
- Nutzungsverfolgung: Das Dashboard zeigt neben den vom Benutzer generierten Bildern das verbleibende Guthaben bei Guthabenplänen oder den Status „unbegrenzt“ bei Unlimited Pro an.
- Planstatus: Das Dashboard nennt den aktiven Plan, beispielsweise Unlimited Pro (Subscription) oder Credit Pack (Credit-Based).
- Zurück zu Ihrer Anwendung: Der Vorgang zeigt, wie Kunden nach dem Checkout zu Ihrer Anwendung zurückgeleitet und für den bezahlten Zugriff freigeschaltet werden.
Das Dashboard folgt bewährten Vorgehensweisen für Abläufe nach dem Kauf: Es überprüft den Kauf, bevor es Zugriff gewährt, und zeigt die Nutzung in der Anwendung an.
Technische Implementierung
Atlas ist eine Next.js-Anwendung. Die Route-Handler rufen die API von Dodo Payments direkt auf, beispielsweisePOST /checkouts zum Erstellen einer Checkout-Session. Das Paket dodopayments-checkout öffnet den Checkout als Overlay oder direkt eingebettet auf der Seite. Um dieselben Vorgänge mit einem typisierten Client zu erstellen, verwenden Sie das Dodo Payments TypeScript SDK.
Integration Guide
Integrieren Sie Checkout-Vorgänge von Dodo Payments in Ihre Anwendung.
TypeScript SDK
Dokumentation des TypeScript SDK und API-Referenz.
Open Source
Atlas ist Open Source. Lesen Sie den Code, um zu sehen, wie jeder Abrechnungsvorgang in einer realen Anwendung implementiert ist.View on GitHub
Sehen Sie sich den Atlas-Quellcode an.