Setup PluggyConnect Widget on your app

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 worry about interact with their data instead of worrying about painful login flows.

📖 Check out our Pluggy Connect Widget [docs](https://docs.pluggy.ai/docs/pluggy-connect-introduction) for more information!

Create a ConnectToken endpoint

First, you’ll need to set up an endpoint on your backend that will be in charge of obtaining and providing a Connect Token. This token will be used to grant PluggyConnect authorization to access Pluggy API on behalf of your Application.

This process must be done on your backend, since the Create ConnectToken (POST /connect_token) endpoint requires authentication on Pluggy’s API (by obtaining a valid API key, using your Application’s CLIENT_IDand CLIENT_SECRET).

Quickstart with Vercel

If you use Vercel, we provide a one-click solution you can use right away, by deploying this endpoint directly from our example in our Quickstarts repository.

Deploy with Vercel

You'll just have to configure the PLUGGY_CLIENT_ID and PLUGGY_CLIENT_SECRET environment variables.

Done! Now, you can fetch your Connect Token from [https://YOUR-APP-NAME.vercel.app/api/token](https://YOUR-APP-NAME.vercel.app/api/token).

Tip: you can also specify Connect Token endpoint options such as specifying clientUserId, by calling this endpoint with POST instead of GET, like so:

// replace YOUR-APP-NAME with your deployed URL
fetch('https://YOUR-APP-NAME.vercel.app/api/token', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    options: {
      clientUserId: '[email protected]'
    }
  })
})
  .then(response => response.json())
  .then(data => console.log(data))
// console will log:
// {"accessToken":"eyJhbGciOiJSUzI1NiIsInR5c... "}
  .catch(error => console.error(error));

Setup & Launch PluggyConnect

With your Connect Token endpoint deployed, you are ready to integrate PluggyConnect in your Client-side application.

Review our Quickstart examples

We have a set of documented and fully working Frontend examples that you can clone and start using right away and launch our Pluggy Connect interface. You just need to replace the ConnectToken endpoint URL with your own.

You’ll find examples with popular frameworks and platforms such as:

  • React
  • NextJS
  • Plain HTML+JS
  • Flutter
  • ReactNative
  • iOS

Options and Configurations

To best customize your experience, check out the different configurations available in our documentation.

You will find options to filter connector types, set the widget language, and subscribe to the different event callbacks that would be fired based on different user actions and events.