Plaid Component

Estimated Reading Time:  15 minutes

Overview

The Plaid component connects to the Plaid service, allowing you to securely connect your applications to financial accounts. In Express View Express View is how your end-user views you application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View., the Plaid component displays as a button that your end-user End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. can click to securely log into their financial account. Once clicked, your application can access relevant and verified financial information. Because financial services have strict login requirements, the Plaid component can also verify an end-user's identity.

It's important to note that Plaid is just a data provider, and it doesn't perform financial transactions. To perform actual banking transactions, integration with Stripe is required.

The Account Linked button below displays a configured Plaid component in Express View Express View is how your end-user views you application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.:

Your Plaid service can include any of the following Plaid products:

• Authentication

• Assets

• Identity

• Income

• Investments

• Liabilities

• Transactions

You'll find the Plaid component in the Data & Event Processing group to the left of the Module Builder.

What You'll Learn

After completing this article, you’ll know when to use a Plaid component, how to configure its settings, and understand the best practices.

About the Configuration Window

Once you drop a Plaid component onto the Module Builder canvas, the following settings windows display: 

General

Setting	Description
Property ID	A Property ID is the unique field ID used by Unqork to track and link components in your module. The Property ID is how the software identifies your component. Using Property IDs lets you link components, creating logic-based configurations and API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. calls. Property IDs must use camel case A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton. (stylized as camelCase) without spaces or punctuation.
Notes	Select this tab to display the component's Notes area. You can use notes to keep your teammates informed. The Notes editor offers a semi-WYSIWYG (What You See is What You Get) content editor. Built to look like a word processor, this editor lets you create, edit, and format your notes. Notes save when saving the component.
Display	Select this tab to manage your component's display settings.
Actions	Select this tab to manage your component's actions settings.
Data	Select this tab to manage your component's data settings.
Validation	Select this tab to manage your component's validation settings.
Advanced	Select this tab to manage your component's advanced settings.
Permissions	Select this tab to see the RBAC RBAC (Role-Based Access Control) is a method to control system access for authorized users. The role in RBAC refers to the levels of access employees have to a network. (role-based access control) settings of the component.
Field Tags	Assign components one-word labels to help organize, identify, and group the components in your application. Consider an example from the API Specification Snippet: Field Tags are applied to Hidden components in the panelRequest and panelResponse Panels. The Field Tags identify the data type of parameters included in the API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. request and response. The API Docs Dashboard tool populates with information about each parameter’s data type, identified by the Field Tag. Field Tags act as a type of Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. group and let you group components for configuration purposes. Field Tags let you target two or more components using a simple logic component. For example, add the Field Tag tagForDecision to multiple components in your module. Open the Inputs table of a Decisions component and reference the tagForDecision Field Tag as the input of the Decisions component. The output of the Decisions component then affects all components with the tagForDecision Field Tag. Save your Field Tags by pressing Enter (Return) or adding a comma after each entry.
Shortcuts	Select this tab to open the list of supported keyboard shortcuts you can use in the component settings modal. Keyboard shortcuts include: Cmd + S (Mac) / Ctrl + S (PC): Save and close the component settings modal. Cmd + G (Mac) / Ctrl + G (PC): Opens a search window to find specific fields and settings in the component settings modal. Tab: Tab to the next field or setting in the component settings modal. This keyboard shortcut tabs left to right and top to bottom. Shift + Tab: Tab to the previous field or setting in the component settings modal. The keyboard shortcut tabs from right to left and bottom to top. Enter (Return): When tabbing to a  (tooltip), press Enter (Return) to display the field or setting tooltip. Press Enter (Return) again to hide the tooltip. Additional keyboard shortcuts: Drop-down menus: When you Tab to a settings drop-down, use the keyboard's  (up)/  (down) arrows to make a selection. Then, press Enter (Return) to confirm the selection.
Documentation	Select this tab to access the component documentation in Unqork's In-Product Help.
Cancel	Click this button to undo any unsaved configuration changes and return to the canvas.
Save & Close	Click this button to save all settings as configured and return to the canvas.

Display Panel

(click image to expand)

 

Default State Options

Setting	Description
Hide Label	Setting the Hide Label toggle to (ON) stops Label Text from displaying in Express View. Your Label Text still displays in the Module Builder. By default, the Hide Label toggle is set to (OFF).
Disable User Input	When set to (ON), end-users can’t interact with or edit the Express View's input field or element. When end-users hover over the field, their cursor changes to alert them to the status change. By default, the Disable User Input toggle is set to (OFF).

Actions Panel

(click to expand)

Triggers

Setting	Description
Success	Enter the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. of the component you'll trigger after your end-user successfully connects their account.
Error Trigger	Enter the Property ID of the component you'd like to trigger if the account connection fails.

Data Panel

(click image to expand)

Data

Setting	Description
Plaid Service to Use	Displays Plaid services configured in the Services Administration tab. Use the drop-down to select which service you want to call.
Client Name	Enter the name of the company accessing the end-user's account.
Select Plaid Products to Initialize	Depending on the specifications of the Plaid service, various Plaid products are available. You can check any combination of products. If you select a product not included in your service, you cannot access that product's data. Available Plaid products include: Auth: Instantly authenticate bank accounts for payments. Assets: Verify the borrower's assets from the source. Identity: Verify the user's identities and reduce fraud. Investments: Build a holistic view of the user's investments. Liabilities: Access liabilities data for student loans and credit cards. Payroll Providers: Access employee payroll information. Transactions: Access detailed transaction history.

Validation

(click image to expand)

User Input

Setting	Description
Account Linking Error Message	Enter a custom error message to display when Plaid cannot link to an end-user's account.

Advanced

Additional Styling

Setting	Description
Custom CSS Class	Enter a Custom CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name.

Adding the Plaid Component

In this example, you'll build a module that uses a Plaid component to link an end-user's bank account. Once linked, a simple dashboard displays some basic account information.

NOTE  If you configure a Plaid component in a live application, ensure all Plug-In components execute server-side. For more information on server-side execution, view our Server-Side Module Execution article.

What You Need

• 1 Plaid component

• 1 Field Group component

• 2 Hidden components

• 1 Plug-In component

• 1 Data Table component

• 1 ViewGrid component

• 2 Data Workflow components

To set up the first Data Workflow, you need:

• 1 Input operator

• 1 Get operator

• 2 Output operator

To set up the second Data Workflow, you need:

• 2 Input operators

• 2 Get operators

• 1 Merge operator

• 1 Map Keys operator

• 1 Clean Keys operator

• 1 Formula operator

• 1 Output operator

Setting up the Plaid Service

Before configuring the Plaid component, you need to set up the Plaid service in your environment. If a Plaid service is already set up in your environment, you can skip this section.

Setting up a Plaid service creates a back-end endpoint for your Plaid component and adds a layer of security. The API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. call occurs in an Unqork server and not your browser.

NOTE  To connect to Plaid, you'll need a developer account and a set of Plaid API keys. To learn more, see Plaid's Quickstart article: https://plaid.com/docs/quickstart/

Before setting up Plaid, ensure you have a Plaid administrator and that you've set up an API account with Plaid. As a best practice, every client should have one Plaid account and each module should have a minimum of one Plaid component. To set up Plaid in your environment, do the following:

1.

From the top-right of the Unqork Designer Platform, click Settings ▾ .

2.

Click Administration.

3.

Under Integration, select Services Administration.

4.

Click + Add a Service. The Create New Service modal A modal is a window that appears on top of the content you are currently viewing. displays.

5.

Enter your service name in the Services Title and Service Name.

6.

Click Create. The service info page for the new service displays.

7.

Click Edit.

8.

In the Service protocol + host* field, enter your Plaid API Host address. For example, https://sandbox.plaid.com.

9.

From the Authentication Method* drop-down, select Plaid.

10.

In the Client ID field, enter your API's client ID.

11.

In the Public Key field, enter your API's public key.

12.

In the Client Secret, enter your client secret key.

13.

From the Environment drop-down, select the environment that matches the Service protocol + host* field.

14.

Click Save Changes.

Configuring the Plaid Component

Now let's head back to the Module Builder so you can see how the Plaid component works. Remember, this use case only shows you how the component works. If you configure a Plaid component in a live application, ensure all Plug-In components execute server-side.

These instructions assume that you have an open module saved with a title.

1.

In the Module Builder, drag and drop a Plaid component onto your canvas.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter plaidAccounts.

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field., enter Link Your Account.

4.

From the Plaid component configuration panel, select Data.

5.

From the Plaid Service to Use drop-down, select the service created in the Setting up the Plaid Service section.

6.

From the Select Plaid Products to Use list, select Transactions.

7.

Click Save & Close.

Configuring the Field Group Component

In this Field Group, you'll store all components related to extracting the Plaid data.

1.

Drag and drop a Field Group component onto your canvas, placing it below the plaidAccounts Plaid component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module., enter fgPlaid.

3.

Click Save & Close.

Configuring the First Data Workflow Component

This Data Workflow will get the Plaid token and push it to a Hidden component. At the same time, it triggers a Plug-In component.

1.

Drag and drop a Data Workflow component onto your canvas, placing it inside the fgPlaid  Field Group.

2.

In the Canvas Label Text and Property Name fields, enter dwfPlaid.

Configure the Input Operator

This Input operator connects your Data Workflow to your data source. Your data source in this use case is your Plaid component.

1.

Drag and drop an Input operator onto your Data Workflow canvas.

2.

Configure the Input operator's Info window as follows:

Configure the Get Operator

This Get operator retrieves the data from your data source. Remember, your data source is your Plaid component.

1.

Drag and drop a Get operator onto your Data Workflow canvas.

2.

Configure the Get operator's Info window as follows:

3.

Connect the output port (right) of the plaid Input operator to the input port (left) of the getToken Get operator.

Configure the First Output Operator

Your first Output operator outputs the Plaid token to the token Hidden component.

1.

Drag and drop an Output operator onto your Data Workflow canvas.

2.

Configure the Output operator's Info window as follows:

3.

Connect the output port (right) of the getToken Get operator to the input port (left) of the token Output operator.

Configure the Second Output Operator

Your second Output operator triggers a Plug-In component.

1.

Drag and drop an Output operator onto your Data Workflow canvas.

2.

Configure the Output operator's Info window as follows:

3.

Connect the output port (right) of the Get operator to the input port (left) of the pluginPlaid Output operator.

4.

Click Save.

Configuring the Hidden Components

In the first Hidden component, you'll store the access token data. In the second, you'll store the end-user's account information.

1.

Drag and drop a Hidden component onto your canvas, placing it inside the fgPlaid  Field Group component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter token.

3.

In the Canvas Label Text Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the . field, enter token.

4.

Click Save & Close.

5.

Drag and drop a Hidden component onto your canvas, placing it inside the fgPlaid  Field Group component, below the token Hidden component.

6.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter authHolder.

7.

In the Canvas Label Text Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the . field, enter authHolder.

8.

Click Save & Close.

Configuring the Plug-In Component

1.

Drag and drop a Plug-In component onto your canvas, placing it inside the fgPlaid  Field Group component.

2.

In the Property ID and Canvas Label Text fields, enter pluginPlaid.

3.

In the Data Source URL, enter /fbu/uapi/plaid/getData.

4.

From the Request Type, select Post.

5.

In the Inputs table, enter the following:

6.

Click Save.

Configuring the Data Table Component

The Data Workflow uses this Data Table to simplify the names of some of Plaid's native values.

1.

Drag and drop a Data Table component onto your canvas, placing it below the pluginPlaid Plug-In component.

2.

In the Label and Property Name fields, enter dtPlaidAuthMapping.

3.

In the data table, enter the following:

4.

Click Save.

Configure the Second Data Workflow Component

This Data Workflow will get the Plaid token while triggering the pluginPlaid Plug-In component.

1.

Drag and drop a Data Workflow component onto your canvas, placing it below the dtPlaidAuthMapping Data Table component.

2.

In the Canvas Label Text and Property Name fields, enter dwfGetPlaid.

Configure the First Input Operator

This Input operator connects your Data Workflow to your data source. Your data source in this use case is your Plaid component.

1.

Drag and drop an Input operator onto your Data Workflow canvas.

2.

Configure the Input operator's Info window as follows:

Configure the First Get Operator

This Get operator retrieves the data from your data source. Again, remember, this is your Plaid component.

1.

Drag and drop a Get operator onto your Data Workflow canvas.

2.

Configure the Get operator's Info window as follows:

3.

Connect the output port (right) of the pluginPlaid Input operator to the input port (left) of the numbers Get operator.

Configure the Second Get Operator

This Get operator retrieves the data from your data source.

1.

Drag and drop a Get operator onto your Data Workflow canvas.

2.

Configure the Get operator's Info window as follows:

3.

Connect the output port (right) of the pluginPlaid Input operator to the input (left) of the accounts Get operator.

Configure the Merge Operator

The Merge operator merges data from the Get operators.

1.

Drag and drop a Merge operator onto your Data Workflow canvas.

2.

Configure the Merge operator's Info window as follows:

3.

Connect the output port (right) of the numbers Get operator to the top input port (left) of the mergeGet Merge operator.

4.

Connect the output port (right) of the accounts Get operator to the bottom input port (left) of the mergeGet Merge operator.

Configure the Second Input Operator

1.

Drag and drop another Input operator onto your Data Workflow canvas.

2.

Configure the Input operator's Info window as follows:

Configure the Map Keys Operator

The Map Keys operator references values from the Data Table, making the data easier to read.

1.

Drag and drop a Map Keys operator onto your Data Workflow canvas.

2.

Configure the Map Keys operator's Info window as follows:

3.

Connect the output port (right) of the mergeGet Merge operator to the top input port (left) of the mapKeys Map Keys operator

4.

Connect the output port (right) of thedtPlaidAuthMapping  Input operator to the bottom input port (left) of the mapKeys Map Keys operator.

Configure the Clean Keys Operator

1.

Drag and drop a Clean Keys operator onto your Data Workflow canvas.

2.

Configure the Clean Keys operator's Info window as follows:

3.

Connect the output port (right) of the Map Keys operator to the input port (left) of the cleanKey Clean Keys operator.

Configure the Formula Operator

1.

Drag and drop a Formula operator onto your Data Workflow canvas.

2.

Configure the Formula operator's Info window as follows:

3.

Connect the output port (right) of the cleanKey Clean Keys operator to the input port (left) of the formula Formula operator.

Configure the Output Operator

Your Output operator outputs the cleaned-up Plaid data to the authHolder Hidden component.

1.

Drag and drop an Output operator onto your Data Workflow canvas.

2.

Configure the Output operator's Info window as follows:

3.

Connect the output port (right) of the formula Formula operator to the input port (left) of the authHolder Output operator.

4.

Click Save.

Configure the ViewGrid Component

This ViewGrid component uses a table to display account information. Once your end-user connects their account, the ViewGrid displays their account information.

1.

Drag and drop a ViewGrid component onto the canvas, placing it below the fgPlaid Field Group.

2.

In the Label field, enter grid.

3.

In the Property Name, enter gridPlaid.

4.

In the Select Row ID Property, enter account_id.

5.

In the Action field, enter null.

6.

In the Event field, enter View.

7.

In the Inputs table, enter the following:

8.

In the Display table, enter the following:

9.

Click Save.

10.

Save your module.

The Module Builder canvas looks like the following when complete:

On completion, you can log in to your bank account and see your balances as shown below:

Resources

• Modify the Plaid component using the toolbar settings.

• Plaid API authentication Settings on the Services Administration page.

• Discover more about Plaid in the Community Hub.