Integrando API de pagamento Stripe com NextJS em um site estático (SSG)
Criando sua web store com mais facilidade e segurança
O que é o StripeJS?
Antes de começarmos a por a mão na massa, precisamos ter bem claro qual o conceito por de trás da API do Stripe. Basicamente StripeJS é uma API e também é uma plataforma para gerenciamento de pagamento. Eles oferecem praticamente tudo que você precisa para receber pagamentos. Basicamente pode ser vista como uma plataforma totalmente escalável. Você pode integrar ao site via API ou via dashboard(plataforma). Aqui neste post vou mesclar um pouco dos conceitos, usarei tanto a API como dashboard. Ah, e a documentação do Stripe é uma das mais lindas de se ver, no sentido de que é muito bem feita, muito bem organizada, e se você quiser seguir apenas a documentação (foi como fiz esse artigo), pode ter certeza que encontrará tudo que você precisa para integrar sua aplicação.
Atenção !!!
Primeiramente não vou me ater a minúcias do projeto, como CSS e implementações gerais. Basicamente você precisa ter um projeto que contenha itens com descrição, valores e um carrinho para adicionar os itens. Tendo isso em vista, vamos ao que importa.
Dashboard Stripe
O dashboard que o Stripe fornece é extremamente intuitivo. Acessando https://dashboard.stripe.com/login, você deverá registrar uma conta. Muito fácil apenas dados do e-mail e criar uma senha.
Após logar você visualizará algo assim:
Não é necessário ativar a conta para utilizar o ambiente de teste. Observe ao logar que no canto superior a direita existe um toggle para ativar o Modo de teste, ative-o. Ao ativa-lo o dashboard exibirá dados que forem cadastrados somente em ambiente de teste. Neste artigo vamos utilizar o dashboard para adicionar os produtos e ativar um modo “somente cliente”, sem utilizar um servidor, ou seja, apenas utilizaremos a API para enviar dados do cliente.
Adicionando itens no dashboard do stripe
Para adicionarmos nossos produtos vamos na aba “Produtos” do dashboard. Você verá algo assim (mas sem produtos):
Na imagem acima, tenho cadastrado no meu dashboard esses dois produtos: Curso Vue JS e Curso React JS. Para cadastrar basta clicar no botão no canto superior direito “Adicionar produto”. Será exibido a seguinte tela:
Nessa tela adicione o nome do seu produto, uma imagem do produto, descrição (opcional). E também informações sobre o preço do produto. Temos duas opções para o tipo de pagamento: “Recorrente” ou “Uma única vez”. No exemplo do projeto optei pelo “Uma única vez” já que vamos utilizar um carrinho, ou seja, vários produtos que serão pagos uma única vez. Mas você tem outras opções na opção de “Recorrente”, caso seu produto seja uma assinatura, essa seria a opção mais correta. Adicionando todas as informações de produtos, clique no botão superior do canto direito para “Salvar Produto”.
Ativando modo apenas cliente
Como dito acima, precisamos ativar o modo cliente no dashboard do stripe. Para isso vá no canto direito superior onde tem o ícone de engrenagens (configurações). Depois clique em “Checkout e Payment Links”, conforme imagem:
Na próxima tela scrolle até o fim da página. E clique em “Ativar Integração somente cliente”.
Codando
Agora vamos para o código, mas antes será preciso copiar a chave pública e privada do Stipe. Você encontrará essa chaves na “Página inicial” do dashboard.
Instale em seu projeto NextJs a lib para podermos consumir a API do stripe:
yarn add @stripe/stripe-jsounpm install @stripe/stripe-js
Após copiar as chaves do dashboard crie duas variáveis no arquivo .env, e adicione-as:
NEXT_PUBLIC_STRIPE_KEY= SUA_CHAVE_PUBLICA_STRIPE
NEXT_STRIPE_API_KEY_SECRET= SUA CHAVE_PRIVADA_STRIPEConfigurando services
Agora vamos configurar dois arquivos importantes para podermos consumir a API. O primeiro será o stripe.ts, onde adicionaremos a função loadStripe que basicamente nos fornece todos os métodos necessários para trabalharmos com a API. Adicione ao arquivo:
import { loadStripe } from "@stripe/stripe-js";const configValue: string = (process.env.NEXT_PUBLIC_STRIPE_KEY as string);export async function getStripeJs(){return await loadStripe(configValue)}
No arquivo acima, basicamente importamos o stripe e configuramos a constante que recebe o valor da chave publica adicionada anteriormente ao .env. Ao final exportamos uma função carregando internamente o método loadStripe.
O próximo arquivo que vamos configurar é o api.ts. Ele apenas conterá uma função axio.create, passando a configuração da chave privada e o endereço da API:
import axios from "axios";const configValue: string = process.env.NEXT_STRIPE_API_KEY_SECRET as string;export const api = axios.create({
headers: {
Authorization: `Bearer ${configValue}`
},
baseURL: "https://api.stripe.com/v1/"
});
Buscando os produtos
Com todas as configurações feitas, vamos agora buscar os produtos pela API do stripe. Lembra dos produtos que foram cadastrados lá no dashboard? Pois é, eles mesmos que vamos buscar.
Para buscarmos os produtos, vamos primeiro buscar os preços cadastrados. Estranho? Um pouco, porém pelo relacionamento do banco de dados, buscando os preços, encontramos os ids dos produtos cadastrados. Como é um site que na teoria não teremos tanta atualização, podemos cria-lo como um static site. Portanto criaremos funções dentro da função do NextJS getStaticProps.
Se você já deu uma olhada na documentação do Stripe, pode ter encontrado o endpoint para listagem de produtos, mas você deve ter notado que os produtos listados não trazem informação dos preços. Explicado o porquê, vamos ao exemplo de código:
No exemplo acima, buscamos em prices todos os preços e pegamos as informações necessárias, juntamente com os produtos. Agora com a informação do id do produto, vamos pegar as demais informações:
Fazemos um get em products/id_do_produto. Com essas informações já podemos popular nossa tela com as devidas informações:
Na imagem acima temos um exemplo da cards criadas a partir das informações vindas da API, como nome do produto, valores e imagens.
Realizando Checkout
Agora vamos realizar o checkout onde o cliente irá conferir os itens do carrinho e adicionar o método de pagamento. No exemplo deste artigo foi adicionado apenas o método de pagamento cartão de crédito. Mas o Stripe possui outros métodos.
Agora iremos utilizar o método que o Stripe nos fornece de redirecionamento pra checkout.
Acima temos duas funções, uma de checkout e outra para formatar os produtos que precisam ser enviados a API. Na primeira função utilizamos o método redirectToCheckout passando como parâmetros os itens do carrinho, o mode que é payment e duas URLs, uma para redirecionar para uma página de sucesso ao finalizar compra, e outra para caso de insucesso. Deixei localhost:3000, mas fique a vontade para criar sua própria página de sucesso/insucesso.
A outra função formattedProductsForStripeRedirectCheckout, eu apenas formato os valores para a forma que a API deseja receber
Observe que podemos adicionar a quantidade de cada item escolhido. Fique a vontade para implementar essa funcionalidade.
Pronto! Não precisamos nos preocupar com o redirecionamento por rotas, o próprio Stripe já cuida disso. Apresentando a seguinte tela:
Conclusão
StripeJS é uma solução muito robusta e poderosa para integrar pagamentos. E como quase toda solução robusta, não é de graça (infelizmente). Você pode utilizar também webhooks para deixar ainda melhor sua interação com API.
