Plaid Component

Overview

The Plaid (Centauri v1.0) The Centauri (v 1.0.0) runtime is the first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications. component connects to the Plaid service, lettings Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. securely connect applications to financial accounts. In Express View Express View is how your end-user views your 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 end-users 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. 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 Express View is how your end-user views your 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.

About the Configuration Window

To learn more about general component settings, view our General Component Settings article.

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

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 A modal is a window that appears on top of the content you are currently viewing. 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.

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.

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

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 A Property ID is the unique field ID used by Unqork to track and link components in your module., 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter dwfPlaid.

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 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:

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:

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 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 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 Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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 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 Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter pluginPlaid.

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 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:

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter dtPlaidAuthMapping.

3.

In the data table, enter the following:

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter dwfGetPlaid.

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 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:

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:

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:

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

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:

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:

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:

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:

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:

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter gridPlaid.

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

4.

Navigate to the component's Data settings.

5.

In the Inputs table, enter the following:

6.

In the Display table, enter the following:

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:

Overview

The Plaid (Centauri v1.0) The Centauri (v 1.0.0) runtime is the first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications. component connects to the Plaid service, lettings Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. securely connect applications to financial accounts. In Express View Express View is how your end-user views your 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 end-users 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. 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 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 your 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.

About the Configuration Window

To learn more about general component settings, view our General Component Settings article.

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

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.

Configuration

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 tokenHidden 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 themapKeys Map Keys operator

4.

Connect the output port (right) of thedtPlaidAuthMapping Input operator to the bottom input port (left) of themapKeys 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 mapKeys 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. Your dwfGetPlaid Data Workflow component looks like the following:

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: