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

Payment Details

Credit Card

Credit Card form

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




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)


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)


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.


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.

Matthew James Cowlishaw, Matthew David Smith and Daniel Francis Butters, each Insolvency Practitioners of Teneo Restructuring Ltd, were appointed Joint Energy Administrators of Bulb Energy Limited on 24 November 2021. The affairs, business and property of the Company are managed by the Joint Energy Administrators. The Joint Energy Administrators act as agents of the Company and contract without personal liability.