Skip to main content

Bank Account Form

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 for more information.

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​

<!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@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(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>

Props, Events & Methods​

Events​

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

Theming & Layout​

PartDescriptionDOM target
::part(skeleton)—
::part(input)—
::part(inputFocused)—
::part(inputInvalid)—
::part(inputInvalidAndFocused)—
::part(label)—
::part(textDanger)—