Demo en vivo: Visita atlas.dodopayments.com para explorar la plataforma y probar cada flujo de facturación.
Descripción General
Atlas simula una plataforma de generación de arte con IA en la que los usuarios crean imágenes a partir de prompts de texto. Su página de Precios ofrece cuatro planes, cada uno con un modelo de facturación diferente:- Starter Credits (créditos prepagados): $10 por 10 créditos que nunca caducan.
- Credit Pack (suscripción basada en créditos): $10 al mes por 25 créditos mensuales, con una transferencia del 50 % de los créditos y alertas de saldo bajo.
- Unlimited Pro (suscripción): $20 al mes para generar imágenes de forma ilimitada.
- Special Downloads (compra única): $12 por un paquete de 12 obras de arte.
Flujos de compra
Los tres flujos siguen el mismo patrón. Cada uno utiliza un modelo de facturación y un tipo de producto diferentes.- Credit-Based Billing
- Subscription
- One-Time Purchase
1
Select the Credit Pack
En la página de Precios, haz clic en Buy credits en el plan Credit Pack ($10 al mes por 25 créditos). Cada imagen que genera un cliente utiliza créditos de una asignación mensual, y los créditos no utilizados se transfieren parcialmente.
2
Sign In or Continue as a Guest
Atlas pregunta si quieres iniciar sesión, lo que guarda la compra en una cuenta, o continuar como invitado.
3
Complete Checkout
El proceso de checkout incluye:
- Página de checkout con marca: La página de checkout de Dodo Payments muestra el nombre y el logotipo de la marca del merchant.
- Información del cliente: El cliente introduce sus datos y su dirección de facturación.
- Cálculo de impuestos: Los impuestos se calculan después de que el cliente confirma su dirección.
- Pago: El cliente introduce los datos de una tarjeta de prueba para completar la transacción.
4
View Confirmation
Cuando el pago se completa correctamente, Atlas confirma la compra. Un usuario que ha iniciado sesión va al dashboard. Un invitado ve un resumen del pago con el plan y el estado del pago.
5
Access Dashboard
Los usuarios que han iniciado sesión llegan al dashboard de Atlas Studio, que muestra los créditos restantes del mes y descuenta créditos a medida que generan obras de arte.
Experiencia del dashboard posterior a la compra
El dashboard de Atlas Studio muestra cómo crear funciones conscientes de la facturación después del checkout: lee lo que compró el cliente y desbloquea el acceso correspondiente.Funciones del dashboard
- Acceso inmediato: Los usuarios empiezan a generar obras de arte justo después de la compra.
- Seguimiento del uso: El dashboard muestra los créditos restantes en los planes basados en créditos o el estado ilimitado de Unlimited Pro, junto a las imágenes que ha generado el usuario.
- Estado del plan: El dashboard indica el nombre del plan activo, como Unlimited Pro (Subscription) o Credit Pack (Credit-Based).
- Volver a tu aplicación: El flujo muestra cómo enviar a los clientes de vuelta a tu aplicación después del checkout y concederles el acceso por el que han pagado.
El dashboard sigue buenas prácticas para los flujos posteriores a la compra: verifica la compra antes de conceder el acceso y muestra el uso en la aplicación.
Implementación técnica
Atlas es una aplicación de Next.js. Sus route handlers llaman directamente a la API de Dodo Payments, por ejemploPOST /checkouts para crear una sesión de checkout, y el paquete dodopayments-checkout abre el checkout como un overlay o integrado en la página. Para crear los mismos flujos con un cliente tipado, utiliza el SDK de TypeScript de Dodo Payments.
Integration Guide
Integra los flujos de checkout de Dodo Payments en tu aplicación.
TypeScript SDK
Documentación del SDK de TypeScript y referencia de la API.
Código abierto
Atlas es de código abierto. Lee el código para ver cómo se implementa cada flujo de facturación en una aplicación real.View on GitHub
Explora el código fuente de Atlas.