Demonstração ao vivo: acesse atlas.dodopayments.com para explorar a plataforma e testar cada fluxo de cobrança.
Visão Geral
Atlas simula uma plataforma de geração de arte com IA em que os usuários criam imagens a partir de prompts de texto. A página de Preços oferece quatro planos, cada um com um modelo de cobrança diferente:- Créditos Starter (créditos pré-pagos): $10 por 10 créditos que nunca expiram.
- Pacote de Créditos (assinatura baseada em créditos): $10 por mês por 25 créditos mensais, com rollover de 50% dos créditos e alertas de saldo baixo.
- Unlimited Pro (assinatura): $20 por mês para geração ilimitada de imagens.
- Downloads Especiais (compra única): $12 por um pacote com 12 obras de arte.
Fluxos de compra
Os três fluxos seguem o mesmo padrão. Cada um usa um modelo de cobrança e um tipo de produto diferente.- Credit-Based Billing
- Subscription
- One-Time Purchase
1
Select the Credit Pack
Na página de Preços, clique em Comprar créditos no plano Pacote de Créditos ($10 por mês por 25 créditos). Cada imagem gerada por um cliente usa créditos de uma cota mensal, e os créditos não utilizados são parcialmente acumulados.
2
Sign In or Continue as a Guest
O Atlas pergunta se o usuário deseja fazer login, o que salva a compra em uma conta, ou continuar como convidado.
3
Complete Checkout
O processo de checkout inclui:
- Página de checkout personalizada: a página de checkout da Dodo Payments mostra o nome e o logotipo da marca do merchant.
- Informações do cliente: o cliente informa seus dados e endereço de cobrança.
- Cálculo de impostos: o imposto é calculado depois que o cliente confirma o endereço.
- Pagamento: o cliente informa os dados de um cartão de teste para concluir a transação.
4
View Confirmation
Depois que o pagamento é aprovado, o Atlas confirma a compra. Um usuário autenticado vai para o dashboard. Um convidado vê um resumo do pagamento com o plano e o status do pagamento.
5
Access Dashboard
Os usuários autenticados chegam ao dashboard do Atlas Studio, que mostra os créditos restantes no mês e os desconta à medida que eles geram obras de arte.
Experiência do dashboard pós-compra
O dashboard do Atlas Studio mostra como criar recursos que levam a cobrança em consideração após o checkout: ele identifica o que o cliente comprou e libera o acesso correspondente.Recursos do dashboard
- Acesso imediato: os usuários começam a gerar obras de arte logo após a compra.
- Acompanhamento de uso: o dashboard mostra os créditos restantes nos planos de créditos ou o status ilimitado no Unlimited Pro, ao lado das imagens geradas pelo usuário.
- Status do plano: o dashboard identifica o plano ativo, como Unlimited Pro (Assinatura) ou Credit Pack (Baseado em créditos).
- Retorno ao seu app: o fluxo mostra como enviar os clientes de volta à sua aplicação após o checkout e conceder o acesso pelo qual eles pagaram.
O dashboard segue boas práticas para fluxos pós-compra: verifica a compra antes de conceder o acesso e mostra o uso no app.
Implementação técnica
Atlas é uma aplicação Next.js. Seus route handlers chamam diretamente a API da Dodo Payments, por exemplo,POST /checkouts para criar uma sessão de checkout, e o pacote dodopayments-checkout abre o checkout como uma sobreposição ou diretamente na página. Para criar os mesmos fluxos com um cliente tipado, use o SDK TypeScript da Dodo Payments.
Integration Guide
Integre os fluxos de checkout da Dodo Payments à sua aplicação.
TypeScript SDK
Documentação do SDK TypeScript e referência da API.
Código aberto
Atlas é de código aberto. Leia o código para ver como cada fluxo de cobrança é implementado em uma aplicação real.View on GitHub
Explore o código-fonte do Atlas.