Payments

Payments displays and highlights the form fields for submitting payment information.

Payment Details

Direct Debit

Behaviour

Validation

Editorial

Validation error messages

Account name

If empty: Enter the account holder's name

Account number

If empty: Enter the account number

If not a number: The account number must only use the numbers 0-9

If less than 8 digits: The account number must be at least 8 digits

Sort code

If empty: Enter the sort code

If not a number or not six digits: The sort code must be 6 digits

Form validation

Invalid bank details Your account number and sort code must be for the same account. (Highlight account number and sort code as errors)

Editorial

Validation Error Messages

Form validation

Invalid bank details Your account number and sort code must be for the same account. (Highlight account number and sort code as errors)

Implementation

There is no internal state, all validation should be handled externally by using the optional onChange , handleDateFieldChange, and status props.

The component can be controlled by passing value to TextInput components. Alternatively, pass default values as defaultValue to the TextInput.

Payment Summary

Payment Summary provides information about current payment method.

Direct Debit

Show the last three digits of the account number, and the full name of the account holder.

Credit Card

Show the last four digits of the card used, and the expiry date.

Implementation

There is no internal state. The component should be controlled by passing in the required attributes to either component.

Direct debit props: accountHolder, accountNumber, and directDebitImage

Credit card props: cardDetails, expiryDate, and creditCardImage

For the accountNumber, the value should be passed as props already sanitised.

👀 See also:

Content Highlight, Text Input, Date Input.