Live-demo: Besök atlas.dodopayments.com för att utforska plattformen och testa alla faktureringsflöden.
Översikt
Atlas simulerar en plattform för AI-bildgenerering där användare skapar bilder från textprompter. På sidan Pricing finns fyra planer, där varje plan använder en annan faktureringsmodell:- Starter Credits (förbetalda krediter): $10 för 10 krediter som aldrig förfaller.
- Credit Pack (kreditbaserad prenumeration): $10 per månad för 25 krediter per månad, med 50 % överföring av krediter och varningar vid låg saldo.
- Unlimited Pro (prenumeration): $20 per månad för obegränsad bildgenerering.
- Special Downloads (engångsköp): $12 för ett paket med 12 konstverk.
Köpflöden
De tre flödena följer samma mönster. Var och en använder en annan faktureringsmodell och produkttyp.- Credit-Based Billing
- Subscription
- One-Time Purchase
1
Select the Credit Pack
På sidan Pricing klickar du på Buy credits på planen Credit Pack ($10 per månad för 25 krediter). Varje bild som en kund genererar använder krediter från en månatlig tilldelning, och oanvända krediter överförs delvis.
2
Sign In or Continue as a Guest
Atlas frågar om användaren vill logga in, vilket sparar köpet på ett konto, eller fortsätta som gäst.
3
Complete Checkout
Checkout-processen omfattar:
- Varumärkesanpassad checkout-sida: Dodo Payments checkout-sidan visar handlarens varumärkesnamn och logotyp.
- Kundinformation: Kunden anger sina uppgifter och sin faktureringsadress.
- Skatteberäkning: Skatten beräknas efter att kunden har bekräftat sin adress.
- Betalning: Kunden anger testkortuppgifter för att slutföra transaktionen.
4
View Confirmation
När betalningen har genomförts bekräftar Atlas köpet. En inloggad användare kommer till dashboard. En gäst ser en betalningssammanfattning med planen och betalningsstatusen.
5
Access Dashboard
Inloggade användare kommer till Atlas Studio dashboard, som visar hur många krediter som återstår denna månad och drar av krediter när de genererar konstverk.
Upplevelsen på dashboard efter köpet
Atlas Studio dashboard visar hur man bygger faktureringsmedvetna funktioner efter checkout: den läser vad kunden har köpt och låser upp motsvarande åtkomst.Funktioner på dashboard
- Omedelbar åtkomst: Användare kan börja generera konstverk direkt efter köpet.
- Användningsspårning: Dashboard visar återstående krediter för kreditplaner eller obegränsad status för Unlimited Pro, bredvid bilderna som användaren har genererat.
- Planstatus: Dashboard visar namnet på den aktiva planen, till exempel Unlimited Pro (Subscription) eller Credit Pack (Credit-Based).
- Återgå till din app: Flödet visar hur kunder skickas tillbaka till din applikation efter checkout och får den åtkomst de har betalat för.
Dashboard följer god praxis för flöden efter köp: den verifierar köpet innan åtkomst beviljas och visar användningen i appen.
Teknisk implementering
Atlas är en Next.js-applikation. Dess route handlers anropar Dodo Payments API direkt, till exempelPOST /checkouts för att skapa en checkout-session, och paketet dodopayments-checkout öppnar checkout som ett överlägg eller inline på sidan. Om du vill bygga samma flöden med en typad klient använder du Dodo Payments TypeScript SDK.
Integration Guide
Integrera Dodo Payments checkout-flöden i din applikation.
TypeScript SDK
Dokumentation för TypeScript SDK och API-referens.
Öppen källkod
Atlas har öppen källkod. Läs koden för att se hur varje faktureringsflöde implementeras i en verklig applikation.View on GitHub
Bläddra i Atlas-källkoden.