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.

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

<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:
{
  "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:

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

<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.

<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 esteja sendo 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 as necessidades de sua aplicação e teste minuciosamente para garantir uma integração adequada.