> ## Documentation Index
> Fetch the complete documentation index at: https://docs.norbaas.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Integre a Norbaas com Next.js

> Neste guia, vamos mostrar como integrar a Norbaas com Next.js.

Sinta-se à vontade para usar nosso script de início rápido para começar em um novo projeto Next.js:

```bash theme={null}
# 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.](https://github.com/norbaas/norbaas-next).

## 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:

```bash theme={null}
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.

```typescript theme={null}
// 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.

```typescript theme={null}
// 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 o[ngrok](https://ngrok.com/)  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:

```bash theme={null}
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.](/api-reference#webhooks).
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.

```bash theme={null}
# .env
NORBAAS_ACCESS_TOKEN="norbaas_pat..."
NORBAAS_WEBHOOK_SECRET="..."
```

### Configurando o manipulador de Webhook

```typescript theme={null}
// 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.

```typescript theme={null}
// 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](mailto:ola@norbaas.com.br).