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: