Demo 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.- Usage-Based Billing
- Subscription
- One-Time Purchase
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.
Generate artwork
Digite um prompt de texto e gere uma imagem. O sistema acompanha automaticamente o uso para fins de cobrança.
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
View confirmation
Após o pagamento, o Atlas exibe uma tela de confirmação com detalhes do uso e créditos restantes.
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 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.Integration Guide
Saiba como integrar os fluxos de checkout da Dodo Payments ao seu aplicativo.
TypeScript SDK
Explore a documentação do SDK TypeScript 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.View on GitHub
Navegue pelo código-fonte do Atlas e aprenda com a implementação.