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_ID
and 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.
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.
Updated over 1 year ago