# 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"
        }
    }
}
```