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. Please note that Plaid provides different Secret Keys for sandbox and production environments.

For Plaid test accounts please see our test accounts page

Tokenizing a bank account with Plaid using web-component

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.

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

<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

{
    "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

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.

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

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

Example payload from Promise callback

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

Last updated