Demonstração ao Vivo: Visite atlas.dodopayments.com para explorar a plataforma e testar todos os fluxos de cobrança.
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)
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.- Cobrança Baseada em Uso
- Assinatura
- Compra Única
1
Selecionar preço por imagem
Escolha a opção pague por imagem ($0,75 por imagem) para geração de arte AI. Isso demonstra a cobrança baseada em uso, onde os clientes pagam apenas pelo que consomem.
2
Gerar obra de arte
Insira um prompt de texto e gere uma imagem. O sistema rastreia automaticamente o uso para fins de cobrança.
3
Concluir 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
4
Ver confirmação
Após o pagamento, o Atlas exibe uma tela de confirmação com detalhes de uso e créditos restantes.
5
Acessar painel
Os usuários são redirecionados de volta para o painel do Atlas Studio onde podem continuar gerando obras de arte e monitorar seu uso.
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
A experiência do painel demonstra as melhores práticas para fluxos de usuários pós-compra, incluindo verificação de direitos e monitoramento de uso.
Implementação Técnica
Atlas é construído usando o Dodo Payments TypeScript SDK, demonstrando como integrar fluxos de cobrança com apenas algumas linhas de código.Guia de Integração
Aprenda como integrar os fluxos de checkout da Dodo Payments em sua aplicação.
TypeScript SDK
Explore a documentação do TypeScript SDK e a referência da API.
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.Ver no GitHub
Navegue pelo código-fonte do Atlas e aprenda com a implementação.