> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Producto de Demostración de Atlas

> Explora Atlas, una aplicación de demostración de generación de arte AI completamente funcional que muestra facturación basada en el uso, suscripciones y pagos únicos con integración de pago de Dodo Payments.

<Frame>
  <img alt="Atlas Demo Product - Plataforma de generación de arte AI con facturación integrada" src="https://mintcdn.com/dodopayments/kx9B5HGzBgLxFWey/images/atlas/atlas-demo-product.png?fit=max&auto=format&n=kx9B5HGzBgLxFWey&q=85&s=df07b04779a208c9e7a6a81e19c97f58" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="1556" data-path="images/atlas/atlas-demo-product.png" />
</Frame>

Atlas es una aplicación de demostración completamente funcional de Dodo Payments que muestra una plataforma de generación de arte AI. Demuestra los tres modelos de facturación: **facturación basada en el uso**, **pagos únicos** y **suscripciones** con flujos de pago integrados.

<Info>
  **Demo en vivo**: Visita [atlas.dodopayments.com](https://atlas.dodopayments.com/) para explorar la plataforma y probar todos los flujos de facturación.
</Info>

## Descripción General

Atlas simula una plataforma real de generación de arte AI donde los usuarios crean imágenes a partir de indicaciones de texto. La demostración destaca tres flujos de compra distintos, cada uno demostrando diferentes modelos de facturación y experiencias de pago:

* **Facturación Basada en el Uso**: Paga por imagen generada (\$0.75 por imagen)
* **Suscripción**: Plan Pro Ilimitado (\$20/mes)
* **Compra Única**: Paquetes de créditos (\$7 por 10 créditos)

Después de completar cualquier compra, los usuarios son redirigidos al **tablero de Atlas Studio** donde pueden generar obras de arte y rastrear su uso en tiempo real.

## Flujos de Compra

Atlas demuestra tres flujos de facturación separados. Cada flujo sigue un patrón similar pero muestra diferentes experiencias de pago y modelos de facturación.

<Tabs>
  <Tab title="Usage-Based Billing">
    <Steps>
      <Step title="Select pay-per-image pricing">
        Elige la opción **pay-per-image** (0,75 \$ por imagen) para la generación de arte con IA. Esto demuestra la facturación basada en el uso, donde los clientes pagan solo por lo que consumen.
      </Step>

      <Step title="Generate artwork">
        Introduce un texto descriptivo y genera una imagen. El sistema realiza el seguimiento automático del uso con fines de facturación.
      </Step>

      <Step title="Complete checkout">
        El proceso de pago incluye:

        * **Página de pago de marca**: La página de pago de Dodo Payments muestra el nombre y el logo de tu marca comercial
        * **Información del cliente**: Ingresa los detalles del usuario y la dirección de facturación
        * **Cálculo de impuestos**: Los impuestos se calculan automáticamente después de la confirmación de la dirección
        * **Pago**: Ingresa los detalles de la tarjeta de prueba para completar la transacción

        <Tip>
          Utiliza la tarjeta de prueba `4242 4242 4242 4242` con cualquier fecha de caducidad futura y CVC para simular transacciones exitosas.
        </Tip>
      </Step>

      <Step title="View confirmation">
        Tras el pago, Atlas muestra una pantalla de confirmación con los detalles del uso y los créditos restantes.
      </Step>

      <Step title="Access dashboard">
        Los usuarios son redirigidos de nuevo al **panel de control de Atlas Studio**, donde pueden seguir generando obras y supervisar el seguimiento del uso.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Subscription">
    <Steps>
      <Step title="Select subscription plan">
        Elige el plan de suscripción **Unlimited Pro** (20 \$ al mes) para la generación ilimitada de arte con IA.
      </Step>

      <Step title="Generate artwork">
        Introduce un prompt y genera una imagen para probar la plataforma antes de suscribirte.
      </Step>

      <Step title="Complete checkout">
        La compra para la suscripción incluye:

        * **Página de pago de marca**: La marca del comerciante es visible durante todo el proceso de pago
        * **Información del cliente**: Ingresa los detalles del usuario y la dirección de facturación
        * **Cálculo de impuestos**: Cálculo automático de impuestos basado en la dirección de facturación
        * **Pago**: Ingresa los detalles de la tarjeta de prueba para activar la suscripción

        <Note>
          Las suscripciones se renuevan automáticamente cada mes. Los usuarios pueden gestionar su suscripción desde el panel tras la compra.
        </Note>
      </Step>

      <Step title="View confirmation">
        Posterior al pago, Atlas muestra una pantalla de confirmación con los detalles de la activación de la suscripción y la próxima fecha de facturación.
      </Step>

      <Step title="Access dashboard">
        Los usuarios son redirigidos al **panel de control de Atlas Studio** con acceso ilimitado para generar obras.
      </Step>
    </Steps>
  </Tab>

  <Tab title="One-Time Purchase">
    <Steps>
      <Step title="Select credit pack">
        Elige un **paquete de créditos** (7 \$ por 10 créditos) para la generación de arte con IA. Esto demuestra transacciones de compra única.
      </Step>

      <Step title="Generate artwork">
        Introduce un prompt y genera una imagen para obtener una vista previa de la plataforma antes de adquirir créditos.
      </Step>

      <Step title="Complete checkout">
        La compra única incluye en el proceso de pago:

        * **Página de pago con marca**: Dodo Payments checkout con la identidad del comercio
        * **Información del cliente**: Introduce los datos del usuario y la dirección de facturación
        * **Cálculo de impuestos**: Cálculo automático de impuestos tras confirmar la dirección
        * **Pago**: Introduce los datos de la tarjeta de prueba para completar la compra
      </Step>

      <Step title="View confirmation">
        Después del pago, Atlas muestra una pantalla de confirmación con un mensaje de agradecimiento y los detalles de los créditos adquiridos.
      </Step>

      <Step title="Access dashboard">
        Los usuarios son redirigidos al **panel de control de Atlas Studio**, donde los créditos comprados están disponibles de inmediato para generar arte.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Experiencia del Tablero Post-Compra

El tablero de Atlas Studio demuestra cómo implementar características conscientes de la facturación y el seguimiento de derechos después de completar el pago.

### Características del Tablero

* **Acceso inmediato**: Los usuarios pueden comenzar a generar obras de arte inmediatamente después de la compra
* **Seguimiento de uso**: Visualización en tiempo real de créditos restantes, suscripciones activas e historial de generación
* **Gestión de facturación**: Ver historial de compras, estado de suscripción y próximas renovaciones
* **Integración fluida**: Muestra cómo redirigir a los usuarios de vuelta a tu aplicación con un seguimiento adecuado de derechos

<Check>
  La experiencia del panel demuestra las mejores prácticas para los flujos posteriores a la compra, incluyendo la verificación de derechos y la monitorización del uso.
</Check>

## Implementación Técnica

Atlas está construido utilizando el [SDK de TypeScript de Dodo Payments](/developer-resources/sdks/typescript), demostrando cómo integrar flujos de facturación con solo unas pocas líneas de código.

<CardGroup cols={2}>
  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    Aprende a integrar los flujos de pago de Dodo Payments en tu aplicación.
  </Card>

  <Card title="TypeScript SDK" icon="code" href="/developer-resources/sdks/typescript">
    Explora la documentación del SDK de TypeScript y la referencia de la API.
  </Card>
</CardGroup>

## Código Abierto

Atlas es un proyecto de código abierto. Explora la base de código para ver cómo se implementan los flujos de facturación en una aplicación real.

<Card title="View on GitHub" icon="github" href="https://github.com/dodopayments/dodo-checkout-demo.git">
  Consulta el código fuente de Atlas y aprende a partir de la implementación.
</Card>