---
name: Payments
menu: Patterns
parent: Modules
route: /patterns/payments
---

# Payments

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

## Payment Details

### Direct Debit

```specimen-react
<DirectDebit
  accountHolder={{ status: 'unknown', errorMessage: '', onChange: () => {} }}
  sortCode={{ status: 'unknown', errorMessage: '', onChange: () => {} }}
  accountNumber={{ status: 'unknown', errorMessage: '', onChange: () => {} }} />
```

### Behaviour

#### Validation

```specimen-react
<DirectDebit
  accountHolder={{ status: 'valid', errorMessage: '', value: 'Buzz Aldrin', onChange: () => {} }}
  sortCode={{ status: 'invalid', errorMessage: 'Enter the sort code', onChange: () => {} }}
  accountNumber={{ status: 'invalid', errorMessage: 'The account number must use at least 8 digits', value: '123', onChange: () => {} }} />
```

### 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 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)

### Credit Card

```specimen-react
<CreditCard
  cardName={{ status: 'unknown', errorMessage: '', onChange: () => {} }}
  cardNumber={{ status: 'unknown', errorMessage: '', onChange: () => {} }}
  expiryDate={{ status: 'unknown', errorMessage: '', handleDateFieldChange: () => {} }}
  securityNumber={{ status: 'unknown', errorMessage: '', onChange: () => {} }} />
```

### Behaviour

#### Validation

```specimen-react
<CreditCard
  cardName={{ status: 'valid', value: 'Buzz Aldrin', errorMessage: '', onChange: () => {} }}
  cardNumber={{ status: 'valid', value: '1234567890123456', errorMessage: '', onChange: () => {} }}
  expiryDate={{ status: 'invalid', errorMessage: 'The expiry date must be dd/mm', initialYearValue: '1985', initialMonthValue: '09', handleDateFieldChange: () => {} }}
  securityNumber={{ status: 'invalid', errorMessage: 'The security number must be 3 or 4 digits', value: '75', onChange: () => {} }} />
```

### Editorial

#### Validation Error Messages

##### Card holders name

_If empty: _
Enter the card holder’s name

##### Card number

_If not a number: _
The card number must use the numbers 0-9

_If not 16 digits:_
The card number must be 16 digits

##### Expiry date

_If empty: _
Enter the expiry date

_If not a number or not dd/mm: _
The expiry date must be dd/mm

##### Security number

_If empty: _
Enter the 3 or 4 digit security number from the back of your card

_If not a number: _
The security number must be a number, like 234

_If not 3 or 4 digits: _
The security number must be 3 or 4 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)

### 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 `initialMonthValue` and `initialYearValue` to the `DateInput`, and with `defaultValue` to the `TextInput`.

## Payment Summary

Payment Summary provides information about current payment method.

### Direct Debit

```specimen-react
<DirectDebitInformation
  accountHolder="Yuri Gagarin"
  accountNumber="***657" />
```

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

### Credit Card

```specimen-react
<CreditCardInformation
  cardDetails="Card ending in 6653"
  expiryDate="04/22" />
```

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` and `accountNumber`

Credit card props: `cardDetails` and `expiryDate`

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

```specimen-see-also
[Content Highlight](/patterns/content-highlight),
[Text Input](/patterns/text-input),
[Date Input](/patterns/date-input).
```
