Payment card details
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.
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.
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
Registered Traveller: faster entry through the UK border
Global Entry: apply for faster entry to the USA
Electronic Visa Waiver
Disclosure and Barring Service
HM Courts and Tribunals
Civil Money Claims
Foreign and Commonwealth Office
Emergency Travel Documents
Ministry of Defence
Department for Digital, Culture, Media & Sport
Government Art Collection
Department for International Trade
Overseas Market Introduction Service
Nottingham University Hospitals NHS Trust
Local Land Charges
See a full list of services using GOV.UK Pay on GOV.UK Performance.
Get in touch
If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on email@example.com