Skip to main content
Sinta-se à vontade para usar nosso script de início rápido para começar em um novo projeto Next.js: 
# Dentro de um novo projeto Next.js
npx norbaas-init
Considere seguir este guia utilizando o Ambiente Sandbox da Norbaas. Isso permitirá testar sua integração sem afetar os dados do ambiente de produção. Um exemplo de código completo deste guia pode ser encontrado no GitHub..

​
Instale o SDK JavaScript da Norbaas

Para começar, você precisa instalar o SDK JavaScript da Norbaas e o pacote auxiliar para Next.js. Você pode fazer isso executando o seguinte comando: 
pnpm install @norbaas-sh/sdk @norbaas-sh/nextjs

​
Configurando variáveis de ambiente

​
Token de Acesso da norbaas

Para se autenticar com A Norbaas, você precisa criar um token de acesso e fornecê-lo ao Next.js usando a variável de ambiente NORBAAS_ACCESS_TOKEN. Você pode criar um token de acesso da organização nas configurações da sua organização.

​
Configurando um Cliente da API do Norbaas

Para interagir com a API da Norbaas, você precisa criar uma nova instância da classe Norbaas. Essa classe utiliza o token de acesso fornecido para se autenticar com a API da norbaas. 
// src/norbaas.ts
import { norbaas } from "@norbaas-sh/sdk";

export const api = new Norbaas({
  accessToken: process.env.NORBAAS_ACCESS_TOKEN!,
  server: "sandbox", //  Use esta opção se você estiver utilizando o ambiente sandbox – caso contrário, use 'production' ou omita o parâmetro
});
Lembre-se de substituir sandbox por production quando estiver pronto para mudar para o ambiente de produção.

​
Gerando Sessões de Checkout da Norbaas

Em seguida, precisamos criar um endpoint de checkout para lidar com a criação de sessões de checkout. Crie uma nova rota GET no Next.js. 
// src/app/checkout/route.ts
import { Checkout } from "@norbaas-sh/nextjs";

export const GET = Checkout({
  accessToken: process.env.NORBAAS_ACCESS_TOKEN!,
  successUrl: "/confirmation?checkout_id={CHECKOUT_ID}",
  server: "sandbox", //Use esta opção se estiver utilizando o ambiente sandbox — caso contrário, use 'production' ou omita o parâmetro
});

​
Tratando Webhooks da Norbaas

A Norbaas pode enviar eventos sobre diversas atividades que ocorrem em sua organização. Isso é muito útil para manter seu banco de dados sincronizado com checkouts, pedidos, assinaturas e outros dados da Norbaas. Configurar um webhook é simples. Vá até a página de configurações da sua organização e clique no botão “Adicionar Endpoint” para criar um novo webhook.

​
Túnel de eventos de webhook para seu ambiente de desenvolvimento local

Se você estiver desenvolvendo localmente, pode usar uma ferramenta como ongrok para criar um túnel que encaminha eventos de webhook para seu ambiente de desenvolvimento local. Isso permitirá que você teste seus manipuladores de webhook sem precisar implantá-los em um servidor ao vivo. Execute o seguinte comando para iniciar um túnel com o ngrok: 
ngrok http 3000

​
Adicionar Endpoint de Webhook

  1. Aponte o Webhook para your-app.com/api/webhook/norbaas. Esta deve ser uma URL absoluta que a Norbaas consiga acessar. Se estiver usando o ngrok, a URL será parecida com: https://<seu-ngrok-id>.ngrok-free.app/api/webhook/norbaas.
  2. Selecione quais eventos você deseja ser notificado. Você pode ler mais sobre os eventos disponíveis na seção de Eventos..
  3. Gere uma chave secreta para assinar as requisições. Isso permitirá verificar se as requisições realmente vieram da Norbaas.
  4. Adicione a chave secreta às suas variáveis de ambiente.
# .env
NORBAAS_ACCESS_TOKEN="norbaas_pat..."
NORBAAS_WEBHOOK_SECRET="..."

​
Configurando o manipulador de Webhook

// src/app/api/webhook/norbaas/route.ts
import { Webhooks } from "@norbaas-sh/nextjs";

export const POST = Webhooks({
	webhookSecret: process.env.NORBAAS_WEBHOOK_SECRET,
	onPayload: async (payload) => //Manipular o payload...
});
O evento de webhook agora está verificado, e você pode prosseguir para manipular os dados do payload.

​
Manipulando Eventos de Webhook

Dependendo dos eventos aos quais você se inscreveu, você receberá diferentes payloads. É aqui que você pode atualizar seu banco de dados, enviar notificações, etc. 
// src/app/api/webhook/norbaas/route.ts
import { Webhooks } from "@norbaas-sh/nextjs";

export const POST = Webhooks({
  webhookSecret: process.env.NORBAAS_WEBHOOK_SECRET,
  onPayload: async (payload) => ...,
  onOrderCreated: async (order) => ...,
  onCustomerStateChanged: async (customerState) => ...,
  ...
});

​
Notificando o cliente sobre o evento

Se você estiver construindo uma aplicação em tempo real, talvez queira notificar o cliente sobre o evento. Na página de confirmação, você pode escutar o evento checkout.updated e atualizar a interface do usuário assim que ele atingir o status de “succeeded”.

​
Conclusão

Se você tiver dúvidas ou precisar de suporte, sinta-se à vontade para mandar um email para ola@norbaas.com.br.