Projeto Saas com Next.js e Stripe

Neste mini projeto, você irá adicionar o Stripe como meio de pagamento e gerenciador de assinaturas do seu projeto. Sua aplicação deve permitir que usuários possam assinar (através de pagamentos recorrentes) bem como cancelar suas assinaturas. O produto (Ebook do mês) só deverá ser exibido para aqueles que são assinantes ativos.

Project preview

Este Mini Projeto faz parte da série Criando um SaaS com Next.js

Mini Projeto 1: SaaS Landing Page com Next.js e Shadcn UI
Mini Projeto 2: SaaS - Autenticação com NextAuth, Prisma e Next.js 15
Mini Projeto 3: SaaS com Next.js e Stripe (este projeto)

Neste mini projeto, você irá adicionar o Stripe como meio de pagamento e gerenciador de assinaturas do seu projeto. Sua aplicação deve permitir que usuários possam assinar (através de pagamentos recorrentes) bem como cancelar suas assinaturas. O produto (Ebook do mês) só deverá ser exibido para aqueles que são assinantes ativos.

🤓 Antes de começar

Para este projeto, já temos o template inicial do projeto preparado no repositório. Ao fazer o fork você encontrará todos os arquivos iniciais.

CuidadoCuidado

Como o Next 15 ainda é muito recente é possível que você encontre alguns erros de peer deps na hora de instalar suas dependências. É possível forçar uma instalação evitando esses erros usando o comando npm install --force.

Setup do Turso

Para que a autenticação funcione, é necessário que você tenha uma conta e database (gratuita) do Turso para a base de dados.

Pegue suas credenciais e complete o .env (ou .env.local) com as chaves

  • TURSO_AUTH_TOKEN=
  • TURSO_DATABASE_URL=

Se você quiser mais informações, vide o Mini Projeto anterior desta série.

Setup do NextAuth

No Mini Projeto anterior também fizemos o Setup do NextAuth. Para tal, é necessário que você coloque qualquer string aleatória na chave AUTH_SECRET= e sua url (provavelmente http://localhost:3000) na chave AUTH_URL= todos no .env (ou .env.local).

🔨 Requisitos

  • Faça o cadastro e setup de uma conta no Stripe
    • Crie uma conta e credenciais de teste no Stripe
DicaDica

Recomendamos que você use os sandboxes do Stripe para testes.
  • Implemente o pagamento recorrente da assinatura
    • Apenas usuários logados poderão assinar
    • Utilize o Stripe como provedor de assinaturas
DicaDica

Para facilitar o desenvolvimento você não precisa necessariamente utilizar a sua base de dados para gerenciar assinaturas. A escolha é sua, você deverá escolher se quer gerenciar assinante PRO pelo Stripe ou pela base de dados.
  • Implemente o cancelamento da assinatura

    • Implemente um botão que deverá estar na dashboard para cancelar a assinatura
    • Apenas usuários logados e assinantes poderão cancelar
  • Implemente a troca de meio de pagamento

    • Você poderá tanto implementar pela API (mais difícil) como redirecionando para o portal no-code do Stripe (mais fácil)
  • Proteger rotas

    • O produto (Ebook do Mês) somente deverá ser acessado por aqueles que possuem assinaturas ativas
    • A tela de gerenciamento de assinatura somente deverá ser acessada por aqueles que possuem assinaturas ativas
  • Remover botoes (call to action) de assinatura caso o usuário já seja assinante

    • Para uma UX melhor, não faz sentido mostrar botões de "Assine Agora" para quem já é assinante.

🎨 Design Sugerido

O layout está no Figma e já está implementado no projeto. Você não precisará implementá-lo.

Figma

🔗 Link do design

👉🏽 Sobre esse mini-projeto

O que você irá praticar:

Next.js

  • Conhecimentos sobre a configuração de páginas e rotas dinâmicas.

Stripe

  • Integração completa com o Stripe para pagamentos e gestão de assinaturas.
  • Integração do NextAuth com Prisma e base de dados.

Pré requisitos

  • Conhecimentos em JavaScript, React e NextJs.

Tutorial

Este tutorial será publicado em breve!

Disponível em breve

Junte-se a outras 15 pessoas que estão fazendo esse mini projeto.

Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário