Bank Details

Follow this pattern when you need to collect bank account details for payments or refunds.

When to use this pattern

Use this pattern when you need to:

Pay money to users (refunds, benefits, grants)
Set up direct debit payments
Verify account ownership

Security: Bank details are sensitive data. Ensure you have appropriate security measures and only collect what you need.

Standard bank account form

Bank account detailsWe'll use these details to pay you

Name on the account

Bank name

Routing numberThis is usually 6 digits

Account numberThis is usually 15-16 digits

<fieldset class="form-group">
  <legend class="form-label form-label-lg">Bank account details</legend>
  <span class="form-hint">We'll use these details to pay you</span>

  <div class="form-group">
    <label class="form-label" for="account-name">Name on the account</label>
    <input class="form-input" id="account-name" type="text">
  </div>

  <div class="form-group">
    <label class="form-label" for="bank-name">Bank name</label>
    <input class="form-input" id="bank-name" type="text">
  </div>

  <div class="form-group">
    <label class="form-label" for="routing-number">Routing number</label>
    <span class="form-hint">This is usually 6 digits</span>
    <input class="form-input form-input-width-10" id="routing-number"
           type="text" inputmode="numeric">
  </div>

  <div class="form-group">
    <label class="form-label" for="account-number">Account number</label>
    <span class="form-hint">This is usually 15-16 digits</span>
    <input class="form-input" id="account-number"
           type="text" inputmode="numeric">
  </div>
</fieldset>

Where to find bank details

Help users find their details:

Where to find your account number

You can find your account number:

On your bank statements
On your debit card
In your online banking app
On your chequebook

Error messages

If account name is empty: "Enter the name on the account"
If routing number is empty: "Enter a routing number"
If routing number is invalid: "Enter a valid routing number"
If account number is empty: "Enter an account number"
If account number is too short: "Account number must be 15 or 16 digits"
If account number is invalid: "Enter a valid account number"

Validation

Accept account numbers with or without spaces/hyphens
Strip non-numeric characters before validation
Check account number length (typically 15-16 digits)
Consider using bank account validation APIs

Security considerations

Use HTTPS for all pages collecting bank details
Don't store full account numbers unless necessary
Mask account numbers in confirmation screens
Use autocomplete="off" to prevent browser storage
Log access to bank detail records

Confirmation

On the check answers page, mask the account number for security:

Name on account: John Smith; Change
Account number: **** **** **** 7890; Change

Accessibility

Use inputmode="numeric" for account numbers
Don't use type="number" as it adds unwanted controls
Group related fields in a fieldset
Provide clear labels and hints