> ## 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.

# Produto de Demonstração Atlas

> Explore o Atlas, uma aplicação de demonstração de geração de arte AI totalmente funcional que apresenta cobrança baseada em uso, assinaturas e pagamentos únicos com integração de checkout Dodo Payments.

<Frame>
  <img alt="Atlas Demo Product - Plataforma de geração de arte por IA com cobrança 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 é uma aplicação de demonstração totalmente funcional da Dodo Payments que apresenta uma plataforma de geração de arte AI. Ela demonstra os três modelos de cobrança—**cobrança baseada em uso**, **pagamentos únicos** e **assinaturas**—com fluxos de checkout integrados.

<Info>
  **Demo Ao Vivo**: Visite [atlas.dodopayments.com](https://atlas.dodopayments.com/) para explorar a plataforma e testar todos os fluxos de cobrança.
</Info>

## Visão Geral

Atlas simula uma plataforma real de geração de arte AI onde os usuários criam imagens a partir de prompts de texto. A demonstração destaca três fluxos de compra distintos, cada um demonstrando diferentes modelos de cobrança e experiências de checkout:

* **Cobrança Baseada em Uso**: Pague por imagem gerada (\$0,75 por imagem)
* **Assinatura**: Plano Pro Ilimitado (\$20/mês)
* **Compra Única**: Pacotes de créditos (\$7 por 10 créditos)

Após completar qualquer compra, os usuários são redirecionados para o **painel do Atlas Studio** onde podem gerar obras de arte e acompanhar seu uso em tempo real.

## Fluxos de Compra

Atlas demonstra três fluxos de cobrança separados. Cada fluxo segue um padrão semelhante, mas apresenta diferentes experiências de checkout e modelos de cobrança.

<Tabs>
  <Tab title="Usage-Based Billing">
    <Steps>
      <Step title="Select pay-per-image pricing">
        Escolha a opção **pay-per-image** (\$0,75 por imagem) para geração de arte por IA. Isso demonstra cobrança baseada em uso, na qual os clientes pagam apenas pelo consumo.
      </Step>

      <Step title="Generate artwork">
        Digite um prompt de texto e gere uma imagem. O sistema acompanha automaticamente o uso para fins de cobrança.
      </Step>

      <Step title="Complete checkout">
        O processo de checkout inclui:

        * **Página de checkout personalizada**: A página de checkout da Dodo Payments exibe o nome e o logotipo da sua marca
        * **Informações do cliente**: Insira os detalhes do usuário e o endereço de cobrança
        * **Cálculo de impostos**: Os impostos são calculados automaticamente após a confirmação do endereço
        * **Pagamento**: Insira os detalhes do cartão de teste para concluir a transação

        <Tip>
          Use o cartão de teste `4242 4242 4242 4242` com qualquer data de validade futura e CVC para simular transações bem-sucedidas.
        </Tip>
      </Step>

      <Step title="View confirmation">
        Após o pagamento, o Atlas exibe uma tela de confirmação com detalhes do uso e créditos restantes.
      </Step>

      <Step title="Access dashboard">
        Os usuários são redirecionados de volta ao **painel do Atlas Studio**, onde podem continuar gerando obras de arte e monitorar o acompanhamento do uso.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Subscription">
    <Steps>
      <Step title="Select subscription plan">
        Escolha o plano de assinatura **Unlimited Pro** (\$20/mês) para geração ilimitada de arte por IA.
      </Step>

      <Step title="Generate artwork">
        Digite um prompt e gere uma imagem para testar a plataforma antes de assinar.
      </Step>

      <Step title="Complete checkout">
        O checkout de assinatura inclui:

        * **Página de checkout personalizada**: A marca do comerciante é visível durante todo o processo de checkout
        * **Informações do cliente**: Insira os detalhes do usuário e o endereço de cobrança
        * **Cálculo de impostos**: Cálculo automático de impostos com base no endereço de cobrança
        * **Pagamento**: Insira os detalhes do cartão de teste para ativar a assinatura

        <Note>
          As assinaturas renovam automaticamente a cada mês. Os usuários podem gerenciar a assinatura pelo painel após a compra.
        </Note>
      </Step>

      <Step title="View confirmation">
        Após o pagamento, o Atlas exibe uma tela de confirmação com detalhes da ativação da assinatura e a próxima data de cobrança.
      </Step>

      <Step title="Access dashboard">
        Os usuários são redirecionados para o **painel do Atlas Studio** com acesso ilimitado para gerar obras de arte.
      </Step>
    </Steps>
  </Tab>

  <Tab title="One-Time Purchase">
    <Steps>
      <Step title="Select credit pack">
        Escolha um **Pacote de Créditos** (\$7 por 10 créditos) para geração de arte por IA. Isso demonstra transações de compra única.
      </Step>

      <Step title="Generate artwork">
        Digite um prompt e gere uma imagem para visualizar a plataforma antes de comprar créditos.
      </Step>

      <Step title="Complete checkout">
        O checkout de compra única inclui:

        * **Página de checkout com marca**: Checkout da Dodo Payments com identidade visual do comerciante
        * **Informações do cliente**: Insira os dados do usuário e o endereço de cobrança
        * **Cálculo de impostos**: Cálculo automático de impostos após a confirmação do endereço
        * **Pagamento**: Insira os dados do cartão de teste para concluir a compra
      </Step>

      <Step title="View confirmation">
        Após o pagamento, o Atlas exibe uma tela de confirmação com uma mensagem de "obrigado" e detalhes dos créditos adquiridos.
      </Step>

      <Step title="Access dashboard">
        Os usuários são redirecionados para o **painel do Atlas Studio**, onde os créditos comprados ficam imediatamente disponíveis para gerar obras de arte.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Experiência do Painel Pós-Compra

O painel do Atlas Studio demonstra como implementar recursos cientes de cobrança e rastreamento de direitos após a conclusão do checkout.

### Recursos do Painel

* **Acesso imediato**: Os usuários podem começar a gerar obras de arte imediatamente após a compra
* **Rastreamento de uso**: Exibição em tempo real dos créditos restantes, assinaturas ativas e histórico de geração
* **Gerenciamento de cobrança**: Visualizar histórico de compras, status da assinatura e renovações futuras
* **Integração perfeita**: Demonstra como redirecionar usuários de volta para sua aplicação com rastreamento de direitos adequado

<Check>
  A experiência do painel demonstra as melhores práticas para fluxos pós-compra, incluindo verificação de direitos e monitoramento de uso.
</Check>

## Implementação Técnica

Atlas é construído usando o [Dodo Payments TypeScript SDK](/developer-resources/sdks/typescript), demonstrando como integrar fluxos de cobrança com apenas algumas linhas de código.

<CardGroup cols={2}>
  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    Saiba como integrar os fluxos de checkout da Dodo Payments ao seu aplicativo.
  </Card>

  <Card title="TypeScript SDK" icon="code" href="/developer-resources/sdks/typescript">
    Explore a documentação do SDK TypeScript e a referência da API.
  </Card>
</CardGroup>

## Código Aberto

Atlas é um projeto de código aberto. Explore a base de código para ver como os fluxos de cobrança são implementados em uma aplicação real.

<Card title="View on GitHub" icon="github" href="https://github.com/dodopayments/dodo-checkout-demo.git">
  Navegue pelo código-fonte do Atlas e aprenda com a implementação.
</Card>