Live Demo: platform को एक्सप्लोर करने और हर billing flow को test करने के लिए atlas.dodopayments.com पर जाएँ।
अवलोकन
Atlas एक AI art generation platform का simulation करता है, जहाँ users text prompts से images बनाते हैं। इसका Pricing page चार plans प्रदान करता है, जिनमें से हर plan एक अलग billing model है:- Starter Credits (prepaid credits): $10 में 10 credits, जो कभी expire नहीं होते।
- Credit Pack (credit-based subscription): प्रति माह $10 में हर महीने 25 credits, जिसमें 50% credit rollover और low-balance alerts शामिल हैं।
- Unlimited Pro (subscription): unlimited image generation के लिए प्रति माह $20।
- Special Downloads (one-time purchase): 12 artworks के pack के लिए $12।
Purchase Flows
तीनों flows एक ही pattern का पालन करते हैं। हर flow एक अलग billing model और product type का उपयोग करता है।- Credit-Based Billing
- Subscription
- One-Time Purchase
1
Select the Credit Pack
Pricing page पर Credit Pack plan (प्रति माह $10 में 25 credits) पर Buy credits पर click करें। Customer द्वारा generate की गई हर image monthly allowance से credits का उपयोग करती है और unused credits आंशिक रूप से rollover होते हैं।
2
Sign In or Continue as a Guest
Atlas पूछता है कि sign in करना है, जिससे purchase account में save हो जाती है, या guest के रूप में जारी रखना है।
3
Complete Checkout
Checkout process में शामिल हैं:
- Branded checkout page: Dodo Payments checkout page merchant का brand name और logo दिखाता है।
- Customer information: Customer अपनी details और billing address दर्ज करता है।
- Tax calculation: Customer के address की पुष्टि करने के बाद tax calculate किया जाता है।
- Payment: Transaction पूरा करने के लिए customer test card details दर्ज करता है।
4
View Confirmation
Payment सफल होने के बाद Atlas purchase की पुष्टि करता है। Signed-in user dashboard पर जाता है। Guest को plan और payment status के साथ payment summary दिखाई देती है।
5
Access Dashboard
Signed-in users Atlas Studio dashboard पर पहुँचते हैं, जहाँ इस महीने बचे credits दिखाई देते हैं और artwork generate करते समय credits घटते जाते हैं।
Post-Purchase Dashboard Experience
Atlas Studio dashboard दिखाता है कि checkout के बाद billing-aware features कैसे बनाए जाएँ: यह पढ़ता है कि customer ने क्या खरीदा है और उससे संबंधित access unlock करता है।Dashboard Features
- Immediate access: Purchase के तुरंत बाद users artwork generate करना शुरू कर देते हैं।
- Usage tracking: Dashboard credit plans पर बचे credits या Unlimited Pro पर unlimited status दिखाता है, साथ ही user द्वारा generate की गई images भी दिखाई जाती हैं।
- Plan status: Dashboard active plan का नाम दिखाता है, जैसे Unlimited Pro (Subscription) या Credit Pack (Credit-Based)।
- Return to your app: Flow दिखाता है कि checkout के बाद customers को आपके application पर वापस कैसे भेजें और उनके द्वारा भुगतान किए गए access को कैसे प्रदान करें।
Dashboard post-purchase flows के लिए अच्छी practice का पालन करता है: access देने से पहले purchase verify करता है और app में usage दिखाता है।
Technical Implementation
Atlas एक Next.js application है। इसके route handlers सीधे Dodo Payments API को call करते हैं, उदाहरण के लिए checkout session बनाने के लिएPOST /checkouts, और dodopayments-checkout package checkout को overlay या page पर inline रूप में खोलता है। Typed client के साथ यही flows बनाने के लिए Dodo Payments TypeScript SDK का उपयोग करें।
Integration Guide
अपने application में Dodo Payments checkout flows integrate करें।
TypeScript SDK
TypeScript SDK documentation और API reference।
Open Source
Atlas open source है। यह देखने के लिए code पढ़ें कि real application में हर billing flow कैसे implement किया गया है।View on GitHub
Atlas source code ब्राउज़ करें।