# Bolha

## Guia Passo a Passo para Integrar o Pluggy Connect em uma Aplicação Bubble

### Pré-requisitos

- **Aplicação Bubble:** Certifique-se de que você tenha uma aplicação Bubble configurada.
- **Acesso à API Pluggy:** Você deve ter acesso à API Pluggy com as credenciais necessárias.

### Passo 1: Incluir o Script do Pluggy Connect

Primeiro, você precisa incluir a biblioteca JavaScript do Pluggy Connect em sua aplicação Bubble.

```html
<script src="https://cdn.pluggy.ai/pluggy-connect/v2.7.0/pluggy-connect.js"></script>
```

Especifique os valores necessários no objeto window. Adicione o seguinte script ao cabeçalho HTML ou em um elemento HTML na sua página Bubble:

```html
<script>
  window.pluggy = {
    connectTokenUrl: 'YOUR_CONNECT_TOKEN_URL',
    clientUserId: 'YOUR_CLIENT_USER_ID',
    buttons: [
      // Cada botão da sua aplicação que abre o Pluggy Connect deve ser listado aqui.
      // Se updateItem estiver definido, ele abrirá um widget para atualizar o ID do item.
      {
        clientUserId: 'YOUR_CLIENT_USER_ID',
        buttonClassName: 'your-button-class',
        updateItem: null // Substitua pelo ID do item se estiver atualizando um item existente
      }
    ]
  };
</script>
```

- **Lista de Botões:** O array `buttons` deve conter uma entrada para cada botão em sua aplicação que aciona o Pluggy Connect. Se um valor `updateItem` for fornecido, o widget será aberto em "modo de atualização" para atualizar o item especificado. Caso contrário, ele abrirá o fluxo de conexão padrão.
- **Endpoint POST para Token:** O `connectTokenUrl` deve ser um endpoint POST que retorna o token de acesso no seguinte formato:

> A resposta deve ser um objeto como o seguinte:
>
> ```json
> {
>   "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
> }
> ```

### Passo 2: Criar o Endpoint do Connect Token

Sua aplicação deve ter um endpoint POST para gerar o token de conexão. Aqui está um exemplo de como você pode configurar esse endpoint usando Express.js:

```javascript
import express from 'express'
import cors from 'cors'

const app = express()

// Habilitar CORS para todas as rotas e todas as origens
app.use(
  cors({
    origin: '*',
  })
)

app.use(express.json()) // para analisar corpos JSON

// criar uma rota para o endpoint do token
app.post('/my-connect-token-endpoint', async (req, res) => {
  console.log('Recebido pedido para o endpoint /my-connect-token-endpoint')

  const { itemId, clientUserId } = req.body
  console.log('itemId:', itemId)
  console.log('clientUserId:', clientUserId)

  try {
    const apiKeyResponse = await fetch('https://api.pluggy.ai/auth', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        clientId: process.env.PLUGGY_CLIENT_ID,
        clientSecret: process.env.PLUGGY_CLIENT_SECRET,
      }),
    }).then((res) => res.json())

    console.log('PluggyClient inicializado', apiKeyResponse)

    const data = await fetch('https://api.pluggy.ai/connect_token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-API-KEY': apiKeyResponse.apiKey,
      },
      body: JSON.stringify({
        itemId,
        ...(clientUserId ? { options: { clientUserId } } : {}),
      }),
    }).then((res) => res.json())

    console.log('Token de conexão criado com sucesso:', data)

    res.json({
      accessToken: data.accessToken,
    })
  } catch (error) {
    console.error('Erro em /my-connect-token-endpoint:', error)
    res.status(500).json({ error: 'Erro interno do servidor' })
  }
})

// iniciar o servidor
app.listen(3000, () => {
  console.log('Servidor está rodando na porta 3000')
})
```

**Explicação:**

- Este código configura um servidor Express com um endpoint POST em `/my-connect-token-endpoint`.
- O servidor recebe `itemId` e `clientUserId` do corpo da requisição e os utiliza para solicitar um token de conexão da API do Pluggy.
- Se `itemId` for fornecido, ele atualizará o item existente. Se `clientUserId` for fornecido, ele associará o token ao usuário especificado.

### Passo 3: Injetar o JavaScript Principal

Inclua o JavaScript principal fornecido para gerenciar o widget do Pluggy Connect:

```html
<script src="https://cdn.pluggy.ai/bubble/v1.2.0/main.js"></script>
```

### Passo 4: Adicionar um Botão à Sua Página Bubble

Crie um botão em sua aplicação Bubble e atribua a ele o nome da classe especificado em `window.pluggy.buttonClassName`.

```html
<button class="your-button-class">Abrir Pluggy Connect</button>
```

### Opções de Personalização

- **Modo Sandbox:** Se você quiser incluir o modo sandbox para testes, defina `includeSandbox` como `true` no objeto `window.pluggy`.
- **Tema:** Você pode personalizar o tema do widget do Pluggy Connect definindo a propriedade `theme`.
- **IDs de Produtos e Conectores:** Você pode especificar quais produtos e conectores incluir definindo as propriedades `products` e `connectorIds`.

### Tratamento de Erros

A função `openPluggyConnect` inclui um callback `onError` onde você pode implementar sua lógica para lidar com erros durante o processo de conexão.

### Testes

Certifique-se de que seu endpoint `connectTokenUrl` esteja configurado corretamente para retornar o token de acesso e que o `clientUserId` seja passado corretamente.

Este guia fornece uma maneira estruturada de integrar e personalizar o widget do Pluggy Connect dentro de sua aplicação Bubble. Ajuste os valores conforme os requisitos de sua aplicação e teste minuciosamente para garantir uma integração adequada.