Para que o projeto funcione é necessário conhecer um pouco da plataforma Stripe. Resumidamente, o Stripe fornece uma API para integração que possibilita simular um e-comerce. Confira a documentação no site da plataforma.

Usar SSR - Server Side Rendering e usar SSG - Static Site Generation possibilita otimização de fluxo, ganho de performance e diminuição do custo de infraestrutura.

Usei o SSG em src/pages/index.tsx para carregar a página inicial mais rápido, uma vez que os dados necessários para renderizar a página serão buscados no momento do build da aplicação e uma lista de produtos não é alterada com frequência. Isso facilita o uso de SEO, trás performance, pois o usuário vê as informações da página mais rápido e diminui custo de infraestrutura.

Usei o SSR em src/pages/success.tsx para que os dados após confirmação do pedido fossem processados no lado do servidor, optimizando o fluxo e ganhando em performance.

npm install

npm run dev

Necessário adicionar a chave pública e a chave privada no arquivo .env antes de subir a aplicação. Essas chaves são fornecidas pela plataforma Stripe.

Após, a aplicação deve estar rodando em http://localhost:3000.