---
id: plaid-payment-method
title: Plaid Payment Method
description: Plaid-powered ACH rail for Modular Checkout with hosted Link flow.
sidebar_position: 23
---

import {
  CodeBlock,
  PropsMarkdownTable,
  PartsMarkdownTable,
  getWebcomponentsVersion,
  getPropsFromDocs,
  getComponentParts,
} from '../../helpers';
import docsJson from '../../docs.json';
import componentTreeJson from '../../component-tree.json';

## Overview

Renders a radio input for selecting the Plaid bank account payment method, and orchestrates the Plaid Link flow to securely connect a bank account when selected.

This component is designed to be used within the `justifi-modular-checkout` and does not accept props directly. It relies on the shared state and context managed by `justifi-modular-checkout` (auth token, account ID, and checkout ID). Saving a new payment method is controlled via the `justifi-save-new-payment-method` checkbox when a payment method group is available.

It exposes no public properties for configuration, but does emit Plaid-specific events for error handling and recovery.

> Note: This component renders nothing and logs a console warning when bank account verification is not enabled for the checkout (`payment_settings.bank_account_verification !== true`), or when ACH payments are disabled for the checkout (`payment_settings.ach_payments !== true`). The same `payment_settings` apply to other ACH rails in modular checkout (for example `new_bank_account` and `saved_bank_account` in `availablePaymentMethodTypes`).

## Usage

<CodeBlock>{`<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
  <title>justifi-plaid-payment-method</title>

  <script type="module" src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.esm.js"></script>

<script
  nomodule
  src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.js"
></script>

<style>
  /** These are the available parts for styling the component. */ ::part(text){' '}
  {/* text styles */}
  ::part(text-danger) {/* text danger styles */}
  ::part(label) {/* label styles */}
  ::part(input-radio) {/* input radio styles */}
  ::part(input-radio-focused) {/* input radio focused styles */}
  ::part(input-radio-checked) {/* input radio checked styles */}
  ::part(input-radio-checked-focused) {/* input radio checked focused styles */}
  ::part(input-radio-invalid) {/* input radio invalid styles */}
</style>

</head>

<body>
  <justifi-modular-checkout auth-token="authToken" checkout-id="ch_123">
    <justifi-plaid-payment-method />
  </justifi-modular-checkout>
</body>

<script>
  (function() {
    const modularCheckout = document.querySelector('justifi-modular-checkout');

    modularCheckout?.addEventListener('plaidError', (event) => {
      console.warn('Plaid error', event.detail);
    });

    modularCheckout?.addEventListener('plaidErrorRecovered', (event) => {
      console.log('Plaid recovered', event.detail);
    });
  })();
</script>

</html>`}</CodeBlock>

## Props, Events & Methods

<PropsMarkdownTable
  props={getPropsFromDocs('justifi-plaid-payment-method', docsJson)}
/>

### Events

- `plaidError`: Surfaces integration failures (expired link token, network issues, user errors).
- `plaidErrorRecovered`: Fires when a previous Plaid error has been resolved and the flow can continue.

## Theming & Layout

- Styling is limited to the wrapper since Plaid controls the Link modal.
- Provide fallback instructions for devices where Plaid is unavailable.

<PartsMarkdownTable
  parts={getComponentParts('justifi-plaid-payment-method', componentTreeJson)}
/>
