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.