Payments
Payments displays and highlights the form fields for submitting payment information.
Payment Details
Credit Card
Credit card forms are not included in the design library, instead,
to make a credit card form inside of account do the following:
import { CardDetailsForm } from '.../components/shared/forms/CardDetailsForm';<CardDetailsForm onSubmit={onSubmit} error={error} submitText={'Pay £12.43'} />;
Reasons for not including Credit Card form in the design library
The text inputs in the Credit Card form are styled components from the Stripe library.
We have to use these magic-y Stripe components as they handle the logic of sending card details to Stripe, verifying they're valid etc. This is often for PCI compliance reasons.
However, we don't want to import the Stripe components as the design library should be concerned only with presentation, nothing business logic related. Technically, it might be possible to write our own presentation-only components, but the Stripe docs suggest this is a bad idea.
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: