A CVV UI test checks that the card security code field on a payment form accepts valid input, blocks bad input, masks the digits, and reports errors a customer can act on. A full pass covers keyboard behavior, length rules, paste, autofill, and the message shown after a failed entry. The point is a checkout field that works on the first try and never leaks the code into logs, analytics, or screen capture.

cvv test page ui

What does a CVV UI test cover?

The security code sits in a small field, but it touches a wide set of behaviors. Test each one on its own before you test them together.

cvv test page ui

• Length rules: 3 digits for Visa, Mastercard, and Discover; 4 digits for American Express.
• Character filter: digits accepted, letters and symbols blocked before submit.
• Masking: digits hidden or shown as the user types, based on the design choice.
• Error states: empty, too short, wrong code, expired card, unsupported brand.
• Platform behavior: mobile numeric keypads, paste, autofill, and screen reader output.

Why test the CVV field at all?

A checkout field that fights the customer costs sales. Mismatched or malformed security codes rank among the most common card declines, and each decline pushes a buyer toward another site.

read more

The field also carries a compliance duty. Payment card industry rules treat the security code as sensitive authentication data, which means it must not be stored after the transaction is authorized. A CVV UI test is one of the few places where you can confirm the code stays out of logs, session replay tools, and analytics events.

ui cvv test

How to run a CVV UI test step by step

1. List the card brands your checkout supports and write down the code length for each.
2. Write the states you need to cover: empty, partial, valid, wrong, expired, and unsupported.
3. Enter each case on desktop with a physical keyboard and note the exact result.
4. Repeat on iOS and Android, checking the keypad type and the masking behavior.
5. Test paste, browser autofill, and switching between saved cards.
6. Submit every case and capture the message shown to the user, word for word.
7. Search your logs, analytics payloads, and replay recordings for the code. It should not appear anywhere.
8. Move the repeatable cases into an automated suite so regressions surface on the next release.

Common CVV field bugs

• The field takes 4 digits on a 3-digit brand, then the gateway declines the card.
• Letters pass the client filter, so a typo travels to the processor.
• The error reads "Invalid input" with no hint about the fix.
• The code appears in plain text on focus and stays visible after blur.
• The value rides along in a URL, a query string, or an analytics event.
• Autofill drops in the wrong saved card and the mismatch goes unnoticed.
• Validation fails, the field clears, and the customer retypes the whole form.

Sample CVV test cases

These cases cover the rules most teams miss. Adapt the expected results to your own form design.

• Empty field, then submit: the form blocks the submit and names the missing field.
• Two digits, then submit: the message states the needed length.
• Four digits on Visa: either accept and send to the gateway, or block with a clear rule.
• Letters mixed with digits: the field rejects non-digit characters as typed.
• Leading zeros: "007" passes as a valid 3-digit entry.
• Paste a 3-digit code: the value lands in the field with no extra characters.
• Screen reader on a failed submit: the error is announced and tied to the field.

Tools that help

Browser automation runners such as Playwright, Cypress, and Selenium handle the scripted cases: typing, pasting, and checking the rendered error text. Pair them with the sandbox environment from your payment processor so no live card is charged.

For the hands-on pass, use real phones and at least one screen reader. Simulators miss keypad and autofill quirks that show up on hardware.

Frequently asked questions

Is a CVV UI test the same as a gateway test?

No. The UI test covers the form: what it accepts, how it masks, and what it tells the user. The gateway test covers the authorization response that comes back from the processor.

Should the field mask the code while the user types?

Many teams mask the CVV with dots, since the code sits next to a visible card number and shoulder surfing is a real risk. Whatever you pick, keep the behavior the same on every platform and test it after blur, not only during typing.

How many digits should the CVV field accept?

Three or four, based on the brand. A common pattern is one field of four characters that detects the brand and switches the rule, with the mask applied from the first keystroke.

Can the CVV be stored after the transaction?

No. PCI DSS requires that sensitive authentication data is not stored after authorization. If you find the code in a log, a database column, or a replay recording, treat it as a defect and remove it.