---
id: bank-account-form
title: Bank Account Form
description: Bank account rail for Modular Checkout that tokenizes ACH details with hosted inputs.
sidebar_position: 28
---

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

## Overview

Renders a form for collecting bank account details as part of a checkout flow.

This subcomponent is **designed to be used within** the `justifi-modular-checkout` and **does not accept props directly**. Instead, it relies on the shared state passed through the Stencil Store, managed by the `justifi-modular-checkout` component.

> **Note:** If you are using this sub component, you also need to provide billing information. This can be done by adding the `justifi-billing-form-full` sub component for complete billing address, the `justifi-bank-account-billing-form-simple` sub component for account owner name only, or by passing the `billingInformation` object as an argument to the `submitCheckout` method called on the `justifi-modular-checkout`. See the [modular checkout docs](../introduction) for more information.

> **Note:** If the checkout's `payment_settings.ach_payments` is `false`, this component does not render the form and logs a console warning (`[bank-account-form] ACH payments are disabled for this checkout (payment_settings.ach_payments=false).`). Prefer omitting the sub-component when ACH is off, or use `checkout-changed` / `availablePaymentMethodTypes` so your layout does not reserve an empty slot.

**Authorization** and business context are also handled by `justifi-modular-checkout`, which manages authentication tokens and related configuration.

This component exposes **no public methods or properties** and is not intended for standalone use.

## 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-bank-account-form</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(skeleton){' '}
  {
    // skeleton styles
  }
  ::part(label){' '}
  {
    // label styles
  }
  ::part(input-invalid-and-focused){' '}
  {
    // input invalid and focused styles
  }
  ::part(input-invalid){' '}
  {
    // input invalid styles
  }
  ::part(input-focused){' '}
  {
    // input focused styles
  }
  ::part(input){' '}
  {
    // input styles
  }
</style>

</head>

<body>
  <justifi-modular-checkout auth-token="authToken" checkout-id="ch_123">
    <justifi-bank-account-form />
    <button id="submit-button">Submit Checkout</button>
  </justifi-modular-checkout>
</body>

<script>
  (function() {
    const checkoutWrapper = document.querySelector('justifi-modular-checkout');
    const submitButton = document.querySelector('#submit-button');

    submitButton.addEventListener('click', () => {
      checkoutWrapper.submitCheckout();
    });

    checkoutWrapper.addEventListener('error-event', (event) => {
      console.error(event.detail);
    });

    document.addEventListener('submit-event', (event) => {
      console.log('Checkout completed successfully!', event.detail);
    });
  })();
</script>

</html>`}</CodeBlock>

## Props, Events & Methods

<PropsMarkdownTable
  props={getPropsFromDocs('justifi-bank-account-form', docsJson)}
/>

### Events

- Emits the same `submit` / `error` events as other modular rails via the parent checkout; no direct listeners required.

## Theming & Layout

<PartsMarkdownTable
  parts={getComponentParts('justifi-bank-account-form', componentTreeJson)}
/>
