Démo en direct : rendez-vous sur atlas.dodopayments.com pour découvrir la plateforme et tester chaque parcours de facturation.
Aperçu
Atlas simule une plateforme de génération d’art par IA où les utilisateurs créent des images à partir de prompts textuels. Sa page Pricing propose quatre forfaits, chacun correspondant à un modèle de facturation différent :- Starter Credits (crédits prépayés) : 10 $ pour 10 crédits qui n’expirent jamais.
- Credit Pack (abonnement basé sur des crédits) : 10 $ par mois pour 25 crédits par mois, avec report de 50 % des crédits et alertes de solde faible.
- Unlimited Pro (abonnement) : 20 $ par mois pour une génération d’images illimitée.
- Special Downloads (achat ponctuel) : 12 $ pour un pack de 12 œuvres.
Parcours d’achat
Les trois parcours suivent le même modèle. Chacun utilise un modèle de facturation et un type de produit différents.- Credit-Based Billing
- Subscription
- One-Time Purchase
1
Select the Credit Pack
Sur la page Pricing, cliquez sur Buy credits dans le forfait Credit Pack (10 $ par mois pour 25 crédits). Chaque image générée par un client utilise les crédits de son allocation mensuelle, et les crédits inutilisés sont partiellement reportés.
2
Sign In or Continue as a Guest
Atlas demande à l’utilisateur de se connecter, ce qui enregistre l’achat sur un compte, ou de continuer en tant qu’invité.
3
Complete Checkout
Le processus de checkout comprend :
- Page de checkout aux couleurs de la marque : la page de checkout de Dodo Payments affiche le nom et le logo de la marque du marchand.
- Informations client : le client saisit ses coordonnées et son adresse de facturation.
- Calcul des taxes : les taxes sont calculées après confirmation de l’adresse du client.
- Paiement : le client saisit les informations d’une carte de test pour finaliser la transaction.
4
View Confirmation
Une fois le paiement réussi, Atlas confirme l’achat. Un utilisateur connecté est redirigé vers le tableau de bord. Un invité voit un récapitulatif du paiement avec le forfait et l’état du paiement.
5
Access Dashboard
Les utilisateurs connectés arrivent sur le tableau de bord Atlas Studio, qui affiche les crédits restants pour le mois et déduit des crédits à mesure qu’ils génèrent des œuvres.
Expérience du tableau de bord post-achat
Le tableau de bord Atlas Studio montre comment créer des fonctionnalités prenant en compte la facturation après le checkout : il lit ce que le client a acheté et déverrouille l’accès correspondant.Fonctionnalités du tableau de bord
- Accès immédiat : les utilisateurs commencent à générer des œuvres juste après l’achat.
- Suivi de l’utilisation : le tableau de bord affiche les crédits restants pour les forfaits basés sur des crédits, ou le statut illimité de Unlimited Pro, à côté des images générées par l’utilisateur.
- État du forfait : le tableau de bord indique le forfait actif, comme Unlimited Pro (Subscription) ou Credit Pack (Credit-Based).
- Retour vers votre application : le parcours montre comment renvoyer les clients vers votre application après le checkout et leur accorder l’accès pour lequel ils ont payé.
Le tableau de bord applique les bonnes pratiques des parcours post-achat : il vérifie l’achat avant d’accorder l’accès et affiche l’utilisation dans l’application.
Implémentation technique
Atlas est une application Next.js. Ses gestionnaires de routes appellent directement l’API de Dodo Payments, par exemplePOST /checkouts pour créer une session de checkout, tandis que le package dodopayments-checkout ouvre le checkout sous forme de superposition ou directement dans la page. Pour créer les mêmes parcours avec un client typé, utilisez le SDK TypeScript de Dodo Payments.
Integration Guide
Intégrez les parcours de checkout de Dodo Payments à votre application.
TypeScript SDK
Documentation du SDK TypeScript et référence de l’API.
Open source
Atlas est open source. Consultez le code pour voir comment chaque parcours de facturation est implémenté dans une application réelle.View on GitHub
Consultez le code source d’Atlas.