Belvo offers a plug-and-play Connect Widget solution, both for web and mobile applications, that provides a secure and optimized authentication process for each institution. The Connect Widget is the smoothest way for users to connect their bank account within your application. It is compatible with our two products: Banking and Fiscal.

If you'd like to test out how it works, check out our Widget Demo.

Here is a preview of the Connect widget on a demo website:

Flow

The end-to-end integration involves frontend-side and server-side configurations. Below is an overview of how you can create links with the Connect widget.

As you can see, your client-side and server-side will both be involved in the Connect Widget flow.
Here is an end-to-end example to illustrate each side's responsibility:

1. An end user clicks on a button to "Add a bank account".
2. Your client-side calls your server-side to request an access_token from Belvo.
3. Your server-side calls Belvo to get the access_token using your private API keys.
4. Belvo returns a valid access_token to your server-side.
5. Your server returns the access_token to your client-side.
6. Your client-side starts the widget using the access_token.
7. The end user navigates through the Connect widget and creates a valid link to their institution.
8. Belvo returns the newly created link_id via callback to your client-side
9. Your client-side calls your server-side to pull the first financial data from Belvo.
10. Your server-side calls Belvo to retrieve financial information using the link_id and your private API keys.
11. Belvo returns the info to your server-side, which then sends the info to the client-side.
12. The end user sees their financial data within your service.

❗️

Server-side calls

Our API can't be used directly from the frontend. The access token and any other API request you need should be handled server-side by your own application.

If you are developing an asynchronous application (Ajax), then you should create the necessary endpoints to get access token and other data from.

If you are developing a synchronous application, then you should make the API requests from the backend and inject the data or access token into your HTML output.

Next up

Ready to implement our widget? Then check out:

• Widget for web 🖥, for instructions on how to integrate our widget for desktop web applications.
• Widget for webviews 📱, for instructions on how to integrate our widget for mobile applications.