📃
Developer Docs
  • Overview
  • Integration Options
  • Webhooks
    • Build a webhook endpoint
    • Check signature
  • Getting Started
    • 1. Creating User Accounts
    • 2. User Account Types & Permissions
    • 3. Generate Access Tokens
    • 4. Choose Integration Options
    • 5. Securing Embedded UIs
      • 5a. Securing Embedded UIs Using HMAC (deprecated)
    • 6. Loading the frontend library
      • 6a. Preloading PayEngine Web-Component in SPA
    • 7. Custom styling the Web-Components
    • 8. Handling Callbacks from Web-Components
    • 9. Available Web-Components
    • 10. Available Webhooks
  • Merchant Onboarding
    • Overview
    • Integration Options
    • Onboarding/Payments Application Workflow
    • Embedded Onboarding UI
    • Merchant onboarding APIs
    • Partner's Onboarding UI
    • Merchant Lifecycle
    • Onboarding to Partner Relationships
  • Processing Payments
    • Introduction
      • Transaction Flow and Status
    • SecureFields JS
      • SecureFields Bank Account
      • Using tokens
    • Credit Card Form
    • Connect with Plaid
    • Connect Mailgun
    • 3D Secure
    • Payments API
    • Searching Transactions
    • Registering a cloud connected device
    • Apple Pay
      • Apple Pay in your native app
    • Google Payâ„¢
    • Level 2 and Level 3 Data
    • Fraud Prevention
    • Reporting
    • PCI Compliance
    • Address Verification Service (AVS) Check
    • Hosted Payments
    • Tap to Pay
  • Card Account Updater
  • ORCHESTRATION SYSTEM
    • Orchestration Overview
    • Onboarding Orchestration
    • Transactions Orchestration
    • Omnicommerce Orchestration
    • Merchant Servicing
    • Universal Reporting
  • TOKENIZATION
    • Automatic Network Tokenization
    • Token Migration Process
  • DISPUTE MANAGEMENT
    • Retrieval Requests & Chargebacks
  • Certification
    • Partner Certification
  • Data Sharing
    • Secure Data Sharing with PayEngine
  • eCommerce Integration
    • PayEngine Payment Gateway for WooCommerce
Powered by GitBook
On this page
  • Settings
  • Tokenizing a bank account with Plaid using web-component
  • Custom props, methods and events
  • 1. Configurable props
  • 2. Events
  • Integrate Plaid using javascript
  1. Processing Payments

Connect with Plaid

PreviousCredit Card FormNextConnect Mailgun

Last updated 10 months ago

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

Tokenizing a bank account with Plaid using web-component

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

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

For Plaid test accounts please see

The library must be loaded before Plaid can be used in your application. To enable the library, please refer to our guide .

The library must be loaded before Plaid can be used in your application. To enable the library, please refer to our guide .

our test accounts page
Loading the frontend library
Loading frontend library
here
Partner console settings