> For the complete documentation index, see [llms.txt](https://docs.payengine.co/developer-docs-v2.5/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.payengine.co/developer-docs-v2.5/processing-payments/connect-with-plaid.md).

# 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](/files/pU20g3Cy96OqEmC7bH9C)

{% hint style="info" %}
For Plaid test accounts please see [our test accounts page](https://docs.paymentplatform.dev/payengine-api-v2.5/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](/developer-docs-v2.5/getting-started-1/frontend-frameworks.md).
{% endhint %}

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

```markup
<payment-platform 
  id="pf" 
  type="plaidconnect" 
  title="Connect with Plaid">
</payment-platform>
  
<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](/developer-docs-v2.5/getting-started-1/frontend-frameworks.md).
{% endhint %}

Plaid workflow can be triggered by calling `window.Platform.connectWithPlaid()`

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

Example payload from Promise callback

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