PluggyDocs

Introduction

Pluggy Connect is a drop-in widget that helps you quickly get started with Pluggy, allowing your users to connect their accounts within your app directly to the Pluggy API.

What is Pluggy Connect?#

Pluggy Connect is a drop-in widget we offer to help you quickly get started with Pluggy. Your users will use it to connect their accounts, within your app, directly to the Pluggy API.

The Connect Widget is Pluggy's plug & play frontend solution that allows users to connect their financial accounts on a step-by-step flow, so you will only need to worry about interacting with their data instead of worrying about painful login flows.

Throughout the connection process, the widget handles:

  • Credential validation
  • Multi-factor authentication (MFA)
  • Error management

How it Works#

The typical integration follows these key steps:

  1. Backend Token Setup: First, you'll need to set up an endpoint on your backend that obtains and provides a Connect Token. This token grants Pluggy Connect authorization to access the Pluggy API on behalf of your application. This process must be done on your backend, since the endpoint requires authentication using your application's CLIENT_ID and CLIENT_SECRET.

  2. Frontend Integration: With your Connect Token endpoint deployed, you are ready to integrate Pluggy Connect in your client-side application. There are fully working frontend examples that you can clone and start using right away to launch the Pluggy Connect interface, by replacing the Connect Token endpoint URL with your own.

  3. User Connection: When your user clicks on "Connect my account", a Connect Token is obtained and the Connect Widget instantiates with this token and opens up a modal for the user to input their credentials.

  4. Data Retrieval: Once the widget finishes, it emits an onSuccess event with the id of the newly created Item. This Item ID is needed for any future action you want to do with the connected banking data.

Platform Support#

Pluggy Connect is an easy-to-integrate and quick-to-setup tool that works across all browsers and platforms, including:

  • Web (React, Next.js, Plain JavaScript)
  • iOS
  • Android
  • React Native
  • Flutter
  • Mobile Webviews

Event Callbacks#

The widget supports several callbacks to improve the user experience, such as redirecting users to a success page or showing error messages. You can pass the widget a function to execute when an event happens:

  • onSuccess: Triggered when the connection is successful. Receives an object containing the item data (e.g., onSuccess={({ item }) => console.log(item.id)}).
  • onError: Triggered when an error occurs. Receives error information and can access the item data if available (e.g., onError={({ message, data: { item } }) => showErrorPage(message)}).
  • onClose: Triggered when the user closes the widget modal.
  • onOpen: Triggered when the widget is opened.
  • onEvent: Handles specific user interaction events such as LOGIN_SUCCESS, LOGIN_MFA_SUCCESS, LOGIN_STEP_COMPLETED, and ITEM_RESPONSE.

MFA Support#

Pluggy Connect handles multi-factor authentication flows automatically. The first time linking an MFA connection, the user receives an extra parameter in the credentials list (a one-use parameter). If you use the Pluggy Connect widget, you won't need to go into further details of the flow -- Pluggy has already covered it all for you.

Getting Started#

To start using Pluggy Connect, you will need:

  1. A Pluggy account with CLIENT_ID and CLIENT_SECRET (available from the Dashboard)
  2. A backend endpoint that generates Connect Tokens
  3. A frontend integration using one of the available SDKs

Check the following sections for more details on Authentication, Environments and Configurations, Updating an Item, Customization, and OAuth Support.