Bubble
Step-by-Step Guide to Integrating Pluggy Connect in a Bubble Application
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:
Conteúdo de resposta
Tem que ser um objeto como o seguinte:
{ "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." }
Step 3: Create the Connect Token Endpoint
Your application should have a POST endpoint to generate the connect token. Here’s 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 4: 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 5: 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
totrue
in thewindow.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
andconnectorIds
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.
Updated about 2 months ago