Demo live: visita atlas.dodopayments.com per esplorare la piattaforma e testare ogni flusso di fatturazione.
Panoramica
Atlas simula una piattaforma per la generazione di immagini con IA, in cui gli utenti creano immagini a partire da prompt testuali. La pagina Pricing offre quattro piani, ciascuno basato su un diverso modello di fatturazione:- Crediti Starter (crediti prepagati): $10 per 10 crediti che non scadono mai.
- Pacchetto di crediti (abbonamento basato sui crediti): $10 al mese per 25 crediti mensili, con riporto del 50% dei crediti e avvisi quando il saldo è basso.
- Unlimited Pro (abbonamento): $20 al mese per la generazione illimitata di immagini.
- Download speciali (acquisto una tantum): $12 per un pacchetto di 12 opere d’arte.
Flussi di acquisto
I tre flussi seguono lo stesso schema. Ognuno utilizza un modello di fatturazione e un tipo di prodotto diverso.- Credit-Based Billing
- Subscription
- One-Time Purchase
1
Select the Credit Pack
Nella pagina Pricing, fai clic su Acquista crediti nel piano Credit Pack ($10 al mese per 25 crediti). Ogni immagine generata da un cliente utilizza i crediti dell’assegnazione mensile e i crediti inutilizzati vengono trasferiti in parte al periodo successivo.
2
Sign In or Continue as a Guest
Atlas chiede se effettuare l’accesso, salvando così l’acquisto in un account, oppure continuare come ospite.
3
Complete Checkout
Il processo di checkout include:
- Pagina di checkout con branding: la pagina di checkout di Dodo Payments mostra il nome e il logo del merchant.
- Informazioni del cliente: il cliente inserisce i propri dati e l’indirizzo di fatturazione.
- Calcolo delle imposte: le imposte vengono calcolate dopo che il cliente ha confermato il proprio indirizzo.
- Pagamento: il cliente inserisce i dati di una carta di test per completare la transazione.
4
View Confirmation
Dopo l’esito positivo del pagamento, Atlas conferma l’acquisto. Un utente che ha effettuato l’accesso viene indirizzato alla dashboard. Un ospite visualizza un riepilogo del pagamento con il piano e lo stato del pagamento.
5
Access Dashboard
Gli utenti che hanno effettuato l’accesso arrivano alla dashboard di Atlas Studio, che mostra i crediti rimasti per il mese corrente e li detrae man mano che generano opere d’arte.
Esperienza della dashboard post-acquisto
La dashboard di Atlas Studio mostra come creare funzionalità consapevoli della fatturazione dopo il checkout: legge ciò che il cliente ha acquistato e sblocca l’accesso corrispondente.Funzionalità della dashboard
- Accesso immediato: gli utenti iniziano a generare opere d’arte subito dopo l’acquisto.
- Monitoraggio dell’utilizzo: la dashboard mostra i crediti rimasti nei piani basati sui crediti oppure lo stato illimitato di Unlimited Pro, accanto alle immagini generate dall’utente.
- Stato del piano: la dashboard indica il piano attivo, ad esempio Unlimited Pro (abbonamento) o Credit Pack (basato sui crediti).
- Ritorno alla tua app: il flusso mostra come rimandare i clienti alla tua applicazione dopo il checkout e concedere l’accesso per cui hanno pagato.
La dashboard segue le buone pratiche per i flussi post-acquisto: verifica l’acquisto prima di concedere l’accesso e mostra l’utilizzo nell’app.
Implementazione tecnica
Atlas è un’applicazione Next.js. I suoi route handler chiamano direttamente l’API di Dodo Payments, ad esempioPOST /checkouts per creare una sessione di checkout, mentre il pacchetto dodopayments-checkout apre il checkout come overlay o direttamente nella pagina. Per creare gli stessi flussi con un client tipizzato, utilizza il Dodo Payments TypeScript SDK.
Integration Guide
Integra i flussi di checkout di Dodo Payments nella tua applicazione.
TypeScript SDK
Documentazione del TypeScript SDK e riferimento API.
Open source
Atlas è open source. Leggi il codice per vedere come ogni flusso di fatturazione viene implementato in un’applicazione reale.View on GitHub
Esplora il codice sorgente di Atlas.