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                                                            

Contextual Help

Default State Options

Input Behavior

Data Settings

Data                                                            

Actions Settings

Triggers                                                            

Validation Settings

Account Linking Error Message                                                            

Advanced Settings

Additional Styling                                                            

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 Edit.

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 Data Table component.

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 ViewGrid component onto the canvas, placing it below the fgPlaid Field Group component.

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: