# Connect with Plaid

Plaid integration provides a convenient and easy way to securely link bank accounts directly from financial institutions. It eliminates the need to enter account information manually and creates a  seamless user experience.

## Settings

To enable Plaid in your environment, please go to your account and enter the following information in the settings.

* Plaid Client ID.
* Plaid Secret Key.

> ***Plaid Client ID** and **Secret Key** can be obtained* [*here*](https://dashboard.plaid.com/signin)*. Please note that Plaid provides different Secret Keys for sandbox and production environments.* 

![Partner console settings](https://2556322805-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRlN2yYeruyG-6M2wZN%2F-MkhQoq_XXxoNVVLYnQs%2F-Mkhmwaw6fIC7qwXBS1O%2FScreen%20Shot%202021-09-28%20at%2012.04.14%20PM.png?alt=media\&token=e45290c5-78d2-403c-8576-8beeda30cf64)

{% hint style="info" %}
For Plaid test accounts please see [our test accounts page](https://docs-api.payengine.co/transactions/testing)
{% endhint %}

## Tokenizing a bank account with Plaid using web-component

{% hint style="warning" %}
The library must be loaded before Plaid can be used in your application. To enable the library, please refer to our guide [Loading the frontend library](https://docs.payengine.co/developer-docs/getting-started-1/frontend-frameworks).
{% endhint %}

Use the following code snippet to enable "Connect with Plaid" button in your web page.

```markup
<pay-engine 
  id="pf" 
  type="plaidconnect" 
  title="Connect with Plaid">
</pay-engine>
  
<script>
  document.getElementById('pf').addEventListener('success', function(data) {
    console.log('on success', data)
  })
  
  document.getElementById('pf').addEventListener('exit', function(data) {
    console.log('on exit', data)
  })  
</script>
```

## Custom props, methods and events

### 1. Configurable props

**title**\
Title of the button that triggers Plaid account linking flow.

### 2. Events

**success**\
Callback function is invoked when account is successfully linked and tokenized.

Example payload on `success` event

```javascript
{
    "message": "Bank account created",
    "data": {
        "token": "ba_test_j7YhUwokMcrUjyQZAyFRSNG9",
        "account_data": {
            "routing_number": "011401533",
            "last_4": "1111",
            "first_name": "Plaid",
            "last_name": "Saving"
        }
    }
}
```

**exit**\
Callback function that is invoked when user terminates the plaid popup.

**error**\
Used to notify any error conditions during the process.

## Integrate Plaid using javascript

{% hint style="warning" %}
The library must be loaded before Plaid can be used in your application. To enable the library, please refer to our guide [Loading frontend library](https://docs.payengine.co/developer-docs/getting-started-1/frontend-frameworks).
{% endhint %}

Plaid workflow can be triggered by calling  `window.PayEngine.connectWithPlaid()`&#x20;

```javascript
window.PayEngine.connectWithPlaid()
.then(response => {
    console.log(response.message)
    const account_info = response.data
}
.catch(error => {
    console.log({error})
}
```

Example payload from Promise callback&#x20;

```javascript
{
    "message": "Bank account created",
    "data": {
        "token": "ba_test_j7YhUwokMcrUjyQZAyFRSNG9",
        "account_data": {
            "routing_number": "011401533",
            "last_4": "1111",
            "first_name": "Plaid",
            "last_name": "Saving"
        }
    }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.payengine.co/developer-docs/processing-payments/connect-with-plaid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.