Ask users for Payment card details

This guidance is for government teams that build online services. To find information and services for the public, go to GOV.UK.

A form entitled enter card details which asks for a card number, an expiry date, a name on the card and the card security code.

When to use this pattern

Before using this pattern, check if GOV.UK Pay is suitable for your service.

If you cannot use GOV.UK Pay and need to build your own payment service, follow this pattern to collect payment card details from your users.

How it works

Allow different formats

Let users enter payment card numbers in whatever format is familiar to them. Allow additional spaces, hyphens and dashes.

Help users enter valid card information

Present all fields on a single page, in the order in which they appear on a credit or debit card. This makes it easy for users to transcribe the information from their payment card.

Show logos for the cards you accept as icons so users can see whether their card is supported.

Use Issuer Identification Number (IIN) lookups to validate the card number as the user enters it. Once you’ve been able to identify the user’s card type, leave only the relevant logo highlighted and grey out the others.

This video shows the card number validation in practice. It does not have any audio.

If JavaScript is not available, display all of the logos anyway, as they still help users to understand which card types you support.

When you validate the card number, the card security code information should update according to the type of card being used. For example, if a user enters an American Express card, the hint text and icon should change to match the front of the card.

2 different images of a card security code input, one above the other. The top image shows an input where the security code is the last 3 digits on the back of the card, with hint text and an icon showing that. The bottom image shows an input where the security code is the last 4 digits after the card number on the front, with hint text and an icon showing that.

Do not use CVV or other acronyms for the card security code.

If you need to ask for a user’s name elsewhere in your service, do not assume that the name on their card will be the same.

Research on this pattern

This pattern is based on the one used in GOV.UK Pay, which has been live since November 2016.

The GOV.UK Pay team tests this pattern quarterly as part of its user research.

Services using this pattern

As of August 2018 the following services were using this pattern as part of GOV.UK Pay.

Office of the Public Guardian

Lasting Power of Attorney

Ministry of Justice

Send money to a prisoner

Border Force

Registered Traveller: faster entry through the UK border

Global Entry: apply for faster entry to the USA

Electronic Visa Waiver

Disclosure and Barring Service

Basic Disclosure

Disclosure Scotland

HM Courts and Tribunals

Probate Fees

Civil Money Claims

Divorce Fees

Foreign and Commonwealth Office

Emergency Travel Documents

Ministry of Defence

Defence Academy

Department for Digital, Culture, Media & Sport

Government Art Collection

Press Accreditation

Department for International Trade

Overseas Market Introduction Service

Nottingham University Hospitals NHS Trust

Private Care

Land Registry

Local Land Charges

Environment Agency

Waste Permitting

Help improve this pattern

To help make sure that this page is useful, relevant and up to date, you can:

Tell us if your service uses this pattern

Take part in our usage survey (opens in a new tab) to help us improve this pattern to better meet the needs of the services that use it.

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.