How to Implement Plaid Link with the Quiltt API

Once you have your App setup to run queries and mutations, you can use the Quiltt API to implement Plaid Link. This guide will give you a quick and easy way to integrate Plaid Link with the Quiltt API.

If you're following the previous guide, we'll be continuing where we left off with our project. Let's start with installing the required dependencies for this step.

Next, we can create a new Plaid folder in the src directory.

We'll create a LinkWidget.tsx file within that new folder. Then we can start with importing the required modules for this component and build out its structure.

We'll guide you through creating this component step-by-step so you can see how modular we can make this component.

There's slightly more boilerplate than if you followed Plaid's Guide, but at the end of this guide, we'll be able to use this one component as a base for every possible Plaid integration.

Skip to the end to see the finished component

Link to this section#Building the Link Component

Link to this section#Step 1: Import required packages

Add imports from react-plaid-link and @apollo/client right after react and return an HTML button component.

Link to this section#Step 2: Destructure our props and assign them to the button

Besides className and children, the list of destructured props is the same as the list of inputs that the connectorPlaidInitialize mutation expects.

Link to this section#Step 3: Add custom logic for the component

In this step, we will be adding the required states, callback functions, and mutations to our component.

Add these parts at the beginning of your component before the return statement.

First, start with initializing the state for linkToken and connectorToken. We will be using these to track our tokens for Plaid Link and the Quiltt connector.

Next, we'll add the connectorPlaidInitialize and connectorPlaidClose mutations for the connections. See our docs for more information on these mutations.

Then, set an onCompleted callback for the connectorPlaidInitialize mutation. And initialize both mutations.

Finally, we can set up the Plaid Link config and add the click handler for our button.

And our button should now look like this

Link to this section#Final Product

Link to this section#Usage

Here's an example of how to use the Plaid Link component.