Live Demo: Kunjungi atlas.dodopayments.com untuk menjelajahi platform dan menguji setiap alur billing.
Ringkasan
Atlas mensimulasikan platform pembuatan karya seni AI tempat pengguna membuat gambar dari prompt teks. Halaman Pricing menawarkan empat paket, masing-masing dengan model billing yang berbeda:- Starter Credits (prepaid credits): $10 untuk 10 credits yang tidak pernah kedaluwarsa.
- Credit Pack (credit-based subscription): $10 per bulan untuk 25 credits per bulan, dengan rollover credit 50% dan peringatan saldo rendah.
- Unlimited Pro (subscription): $20 per bulan untuk pembuatan gambar tanpa batas.
- Special Downloads (one-time purchase): $12 untuk paket berisi 12 karya seni.
Alur Pembelian
Ketiga alur mengikuti pola yang sama. Masing-masing menggunakan model billing dan tipe produk yang berbeda.- Credit-Based Billing
- Subscription
- One-Time Purchase
1
Select the Credit Pack
Di halaman Pricing, klik Buy credits pada paket Credit Pack ($10 per bulan untuk 25 credits). Setiap gambar yang dibuat pelanggan menggunakan credits dari alokasi bulanan, dan credits yang tidak digunakan sebagian akan di-rollover.
2
Sign In or Continue as a Guest
Atlas menanyakan apakah pengguna ingin sign in, yang akan menyimpan pembelian ke akun, atau melanjutkan sebagai guest.
3
Complete Checkout
Proses checkout mencakup:
- Branded checkout page: Halaman checkout Dodo Payments menampilkan nama dan logo brand merchant.
- Customer information: Pelanggan memasukkan detail dan alamat billing mereka.
- Tax calculation: Tax dihitung setelah pelanggan mengonfirmasi alamat mereka.
- Payment: Pelanggan memasukkan detail test card untuk menyelesaikan transaksi.
4
View Confirmation
Setelah payment berhasil, Atlas mengonfirmasi pembelian. Pengguna yang sudah sign in diarahkan ke dashboard. Guest melihat ringkasan payment dengan paket dan status payment.
5
Access Dashboard
Pengguna yang sudah sign in diarahkan ke Atlas Studio dashboard, yang menampilkan credits tersisa bulan ini dan mengurangi credits saat mereka membuat karya seni.
Pengalaman Dashboard Setelah Pembelian
Atlas Studio dashboard menunjukkan cara membangun fitur yang memahami billing setelah checkout: dashboard membaca apa yang dibeli pelanggan dan membuka akses yang sesuai.Fitur Dashboard
- Immediate access: Pengguna mulai membuat karya seni segera setelah pembelian.
- Usage tracking: Dashboard menampilkan credits yang tersisa pada paket berbasis kredit, atau status tanpa batas pada Unlimited Pro, di samping gambar yang dibuat pengguna.
- Plan status: Dashboard menyebutkan paket aktif, seperti Unlimited Pro (Subscription) atau Credit Pack (Credit-Based).
- Return to your app: Alur ini menunjukkan cara mengirim pelanggan kembali ke aplikasi Anda setelah checkout dan memberikan akses yang telah mereka bayar.
Dashboard mengikuti praktik yang baik untuk alur setelah pembelian: dashboard memverifikasi pembelian sebelum memberikan akses, dan menampilkan penggunaan di dalam aplikasi.
Implementasi Teknis
Atlas adalah aplikasi Next.js. Route handler-nya memanggil API Dodo Payments secara langsung, misalnyaPOST /checkouts untuk membuat checkout session, dan package dodopayments-checkout membuka checkout sebagai overlay atau inline di halaman. Untuk membangun alur yang sama dengan typed client, gunakan Dodo Payments TypeScript SDK.
Integration Guide
Integrasikan alur checkout Dodo Payments ke dalam aplikasi Anda.
TypeScript SDK
Dokumentasi TypeScript SDK dan referensi API.
Open Source
Atlas bersifat open source. Baca kodenya untuk melihat cara setiap alur billing diimplementasikan dalam aplikasi nyata.View on GitHub
Jelajahi source code Atlas.