Skip to main content

Plaid Payment Method

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).

Usage​

<!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@6.7.3/dist/webcomponents/webcomponents.esm.js"></script>

<script
nomodule
src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@6.7.3/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>

Props, Events & Methods​

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.