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.

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

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

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

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:

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

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