Plaid Component

Overview
The Plaid (Centauri v1.0) component connects to the Plaid service, lettings Creators securely connect applications to financial accounts. In Express View, the Plaid component displays as a button end-users click to securely log into their financial account. Once clicked, Unqork applications 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 does not 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:
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.
About the Configuration Window
To learn more about general component settings, view our General Component Settings article.
Display Settings
Field Text
Setting |
Description |
---|---|
Label Text |
Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |
Contextual Help
Setting | Description |
---|---|
Helper Text |
A quick tip describing the expected value of an input field. Unlike a Tooltip, Helper Text stays visible under the input field and displays on a single line. |
Default State Options
Setting |
Description |
---|---|
Hide Label |
Setting Hide Label to (ON) hides Label Text from displaying in Express View. Your Label Text still displays in the Module Builder. By default, this setting is set to (OFF). |
Input Behavior
Setting |
Description |
---|---|
Input Behavior |
Controls how end-users interact with the component. Choose from the following options:
|
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.
If you configure a Plaid component in a Production application, ensure all Plug-In components execute server-side. For more information on server-side execution, view our Server-Side Module Execution article.
Preconfiguration
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 call occurs in an Unqork server and not your browser.
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:
1. | At the top right of the Unqork Designer Platform, click Administration. |
2. | Under Integration, select Services Administration. |
3. | Click + Add a Service. The Create New Service modal displays. |
4. | In the Service Title* field, enter a title for your service. |
5. | In the Service Name* field, enter a name for your service. |
6. | Click Next. |
7. | Under Share To, select the environment or workspace where you want to share the service. |
8. | Click Create. The service info page for the new service displays. |
9. | Click ![]() |
10. | In the Service protocol + host field, enter your Plaid API Host address. For example, https://sandbox.plaid.com. |
To learn more about Plaid's environments, visit their documentation: https://plaid.com/docs/api/#api-access.
11. | From the Authentication Method* drop-down, select Plaid. |
12. | In the Client ID field, enter your API's client ID. |
13. | In the Public Key field, enter your API's public key. |
14. | In the Client Secret, enter your client secret key. |
The secret key is a confidential value. Do not share this key with unauthorized users.
15. | From the Environment drop-down, select the environment that matches the Service protocol + host* field. |
16. | Click Save Changes. |
Configuration
Configuring the Plaid Component
Let's return to the Module Builder and learn how the Plaid component works. Remember, this use case only shows you how the component works. If you configure a Plaid component in a Production 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 field, enter plaidAccounts. |
3. | In the Label Text, enter Link Your Account. |
4. | Navigate to the component's Data settings. |
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 Component. |
Configuring the Field Group Component
Configure a Field Group component to 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, enter fgPlaid. |
3. | Click Save Component. |
Configuring the First Data Workflow Component
This Data Workflow component retrieves the Plaid token and sends it to a Hidden component. At the same time, it triggers a Plug-In component.
You'll configure the Hidden and Plug-In components in a later step.
1. | Drag and drop a Data Workflow component onto your canvas, placing it inside the fgPlaid Field Group component. |
2. | In the Property ID field, enter dwfPlaid. |
3. | In the Canvas Label Text field, enter dwfPlaid. |
Configure the Input Operator
This Input operator connects your Data Workflow to your data source. Your data source in this example 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: |
Info | |
---|---|
category |
Input |
Component |
plaid |
required |
Yes |
source |
Default |
Configure the Get Operator
This Get operator retrieves the data from 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: |
Info | |
---|---|
category |
Get |
label |
getToken |
Preserve Argument Type |
☐ (unchecked) |
Path |
accessToken |
The Path value of accessToken represents the Plaid token data acquired from the Plaid component.
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: |
Info | |
---|---|
category |
Output |
Component |
token |
action |
value |
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: |
Info | |
---|---|
category |
Output |
Component |
pluginPlaid |
action |
Trigger |
3. | Connect the output port (right) of the Get operator to the input port (left) of the pluginPlaid Output operator. |
4. | Click Save Component. |
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 inside the fgPlaid Field Group component, placing it below the dwfPlaid Data Workflow component. |
2. | In the Property ID field, enter token. |
3. | In the Label Text field, enter token. |
4. | Click Save Component. |
5. | Drag and drop another Hidden component inside the fgPlaid Field Group component, placing it below the tokenHidden component. |
6. | In the Property ID field, enter authHolder. |
7. | In the Label Text field, enter authHolder. |
8. | Click Save Component. |
Configuring the Plug-In Component
Next, you'll configure a Plug-In component that is triggered by the Data Workflow, and makes an external API call to your Plaid service.
1. | Drag and drop a Plug-In component inside the fgPlaid Field Group component, placing it below the authHolderHidden component. |
2. | In the Property ID field, enter pluginPlaid. |
3. | In the Canvas Label Text field, enter pluginPlaid. |
4. | From the Service Type drop-down, select External. |
5. | From the External Services drop-down, enter or select your Plaid service. |
6. | In the Data Source URL, enter /fbu/uapi/plaid/getData. |
7. | From the Request Type drop-down, enter or select Post. |
8. | In the Inputs table, enter the following: |
Property ID |
Mapping |
|
---|---|---|
1 |
token |
access_token |
2 |
'auth' |
products.[0] |
3 |
'enter the name of your Plaid service here' |
serviceName |
9. | Click Save Component. |
Configuring the Data Table Component
The Data Workflow uses this Data Table component to simplify the names of some of Plaid's native values.
1. | Drag and drop a Data Table component inside the fgPlaid Field Group component, placing ti below the pluginPlaid Plug-In component. |
2. | In the Property ID field, enter dtPlaidAuthMapping. |
3. | In the data table, enter the following: |
A |
B |
|
---|---|---|
1 |
original |
target |
2 |
balances.available |
available |
3 |
balances.current |
current |
4. | Click Save Component. |
Configure the Second Data Workflow Component
This Data Workflow component retrieves the Plaid token while triggering the pluginPlaidPlug-In component.
1. | Drag and drop a Data Workflow component inside the fgPlaid Field Group component, placing it below the dtPlaidAuthMapping ![]() |
2. | In the Property ID field, enter dwfGetPlaid. |
3. | In the Canvas Label Text field, enter dwfGetPlaid. |
Configure the First Input Operator
This Input operator connects your Data Workflow to 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: |
Info | |
---|---|
category |
Input |
Component |
pluginPlaid |
required |
Yes |
source |
Default |
Configure the First Get Operator
This Get operator retrieves specific data from 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: |
Info | |
---|---|
category |
Get |
label |
numbers |
Preserve Argument Type |
☐ (unchecked) |
Path |
[0].auth.numbers.ach |
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 another set of data from 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: |
Info | |
---|---|
category |
Get |
label |
accounts |
Preserve Argument Type |
☐ (unchecked) |
Path |
[0].auth.accounts |
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: |
Info | |
---|---|
category |
Merge |
label |
mergeGet |
Preserve Argument Type |
☐ (unchecked) |
Merge Type |
Inner |
Keep Flag |
False |
Renaming |
Rename |
Rows to Keep |
First |
Merge Key |
account_id |
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
Configure another Input operator to retrieve data from your Data Table component.
1. | Drag and drop another Input operator onto your Data Workflow canvas. |
2. | Configure the Input operator's Info window as follows: |
Info | |
---|---|
category |
Input |
Component |
dtPlaidAuthMapping |
required |
No |
source |
Default |
Configure the Map Keys Operator
The Map Keys operator references values from the Data Table component, 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: |
Info | |
---|---|
category |
Map Keys |
Component |
mapKeys |
Preserve Argument Type |
☐ (unchecked) |
Source Column |
original |
Target Column |
target |
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 the dtPlaidAuthMapping Input operator to the bottom input port (left) of the mapKeys Map Keys operator. |
Configure the Clean Keys Operator
Configure a Clean Keys operator to omit data with empty or missing values.
1. | Drag and drop a Clean Keys operator onto your Data Workflow canvas. |
2. | Configure the Clean Keys operator's Info window as follows: |
Info | |
---|---|
category |
Clean Keys |
label |
cleanKey |
Preserve Argument Type |
☐ (unchecked) |
Fill if |
Missing or Empty |
Keys |
available |
Fill with |
unavailable |
3. | Connect the output port (right) of the mapKeys Map Keys operator to the input port (left) of the cleanKey Clean Keys operator. |
Configure the Formula Operator
This Formula operator manipulates the data so all text has the correct capitalization.
1. | Drag and drop a Formula operator onto your Data Workflow canvas. |
2. | Configure the Formula operator's Info window as follows: |
Info | |
---|---|
category |
Formula Value |
label |
formula |
Preserve Argument Type |
☐ (unchecked) |
Formula/Expression |
subtype = PROPER(subtype) |
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 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: |
Info | |
---|---|
category |
Output |
Component |
authHolder |
action |
value |
3. | Connect the output port (right) of the formula Formula operator to the input port (left) of the authHolder Output operator. |
4. | Click Save Component. |
Configure the ViewGrid Component
This ViewGrid component creates a dashboard to display account information. Once your end-user connects their account, the ViewGrid component displays their account information.
1. | Drag and drop a ![]() |
2. | In the Property ID field, enter gridPlaid. |
3. | In the Canvas Label Text field, enter grid. |
4. | Navigate to the component's Data settings. |
5. | In the Inputs table, enter the following: |
Source |
Required |
|
---|---|---|
1 |
authHolder |
☐ (unchecked) |
6. | In the Display table, enter the following: |
id |
formula |
heading |
|
---|---|---|---|
1 |
name |
|
Account Name |
2 |
subtype |
|
Type |
3 |
available |
|
Available Balance |
4 |
current |
|
Current Balance |
7. | Navigate to the component's Actions settings. |
8. | In the Action field, enter null. |
9. | In the Event field, enter View. |
10. | Navigate to the component's Advanced settings. |
11. | In the Select Row ID Property, enter account_id. |
12. | Click Save Component. |
13. | Save your module. |
The Module Builder canvas looks like the following when complete:
On completion, you can log into your bank account and view your balances as shown below:
Resources