# Bubble

## Step-by-Step Guide to Integrating Pluggy Connect in a Bubble Application

### Prerequisites

- **Bubble Application:** Ensure you have a Bubble application set up.
- **Pluggy API Access:** You should have access to the Pluggy API with necessary credentials.

### Step 1: Include the Pluggy Connect Script

First, you need to include the Pluggy Connect JavaScript library in your Bubble application.

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

Specify the necessary values in the window object. Add the following script to your HTML header or in an HTML element on your Bubble page:

```html
<script>
  window.pluggy = {
    connectTokenUrl: 'YOUR_CONNECT_TOKEN_URL',
    clientUserId: 'YOUR_CLIENT_USER_ID',
    buttons: [
      // Each button of your application that opens Pluggy Connect should be listed here.
      // If updateItem is defined, it will open a widget to update the item ID.
      {
        clientUserId: 'YOUR_CLIENT_USER_ID',
        buttonClassName: 'your-button-class',
        updateItem: null // Replace with item ID if updating an existing item
      }
    ]
  };
</script>
```

- **Buttons List:** The `buttons` array should contain an entry for each button in your application that triggers Pluggy Connect. If an `updateItem` value is provided, the widget will open in "update mode" to update the specified item. Otherwise, it will open the standard connection flow.
- **POST Endpoint for Token:** The `connectTokenUrl` should be a POST endpoint that returns the access token in the following format:

> The response must be an object like the following:
>
> ```json
> {
>   "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
> }
> ```

### Step 2: Create the Connect Token Endpoint

Your application should have a POST endpoint to generate the connect token. Here is an example of how you can set up this endpoint using Express.js:

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

const app = express()

// Enable CORS for all routes and all origins
app.use(
  cors({
    origin: '*',
  })
)

app.use(express.json()) // to parse JSON bodies

// create a route for the token endpoint
app.post('/my-connect-token-endpoint', async (req, res) => {
  console.log('Received request to /my-connect-token-endpoint 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 initialized', 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('Connect token created successfully:', data)

    res.json({
      accessToken: data.accessToken,
    })
  } catch (error) {
    console.error('Error in /my-connect-token-endpoint:', error)
    res.status(500).json({ error: 'Internal server error' })
  }
})

// start the server
app.listen(3000, () => {
  console.log('Server is running on port 3000')
})
```

**Explanation:**

- This code sets up an Express server with a POST endpoint at `/my-connect-token-endpoint`.
- The server receives `itemId` and `clientUserId` from the request body and uses them to request a connect token from Pluggy's API.
- If `itemId` is provided, it will update the existing item. If `clientUserId` is provided, it will associate the token with the specified user.

### Step 3: Inject the Main JavaScript

Include the main JavaScript provided to manage the Pluggy Connect widget:

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

### Step 4: Add a Button to Your Bubble Page

Create a button in your Bubble application and assign it the class name specified in `window.pluggy.buttonClassName`.

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

### Customization Options

- **Sandbox Mode:** If you want to include sandbox mode for testing, set `includeSandbox` to `true` in the `window.pluggy` object.
- **Theme:** You can customize the theme of the Pluggy Connect widget by setting the `theme` property.
- **Products and Connector IDs:** You can specify which products and connectors to include by setting the `products` and `connectorIds` properties.

### Error Handling

The `openPluggyConnect` function includes an `onError` callback where you can implement your logic for handling errors during the connection process.

### Testing

Ensure that your `connectTokenUrl` endpoint is correctly set up to return the access token and that the `clientUserId` is correctly passed.

This guide provides a structured way to integrate and customize the Pluggy Connect widget within your Bubble application. Adjust the values as per your application's requirements and test thoroughly to ensure proper integration.