A UI CVV test checks that the card security code field on a payment form accepts valid input, rejects bad input, and keeps the code out of your own systems. You run it with processor test cards in sandbox mode, never with real card numbers, and you score it on validation rules, error messages, keyboard behavior, and what the front end sends to the gateway.

CVV Test Layout: How to Buy and Use CVVs

What does a UI CVV test verify?

The test covers the input field and the client-side logic behind it. It does not test the issuing bank or the card network, because a sandbox never reaches them.

CVV UI Testing: A Comprehensive Guide

• Format rules: digits only, 3 or 4 characters depending on brand.
• Brand detection: the field length switches when the card number identifies Amex.
• Error states: messages appear at the right moment and say something useful.
• Data handling: the value goes to the processor and nowhere else.

How do you test a CVV field without real card data?

Use the test card numbers your payment processor publishes. Stripe, Adyen, Braintree and most gateways ship documented test cards with fixed CVV values that work against sandbox keys.

related article

Start in sandbox mode

Swap the live API key for the test key and point the form at the sandbox endpoint. Test cards fail against live keys, and live cards in a sandbox return errors that look like bugs.

CVV Test Page UI: A Guide to Buying CVV

Cover each card brand

Visa, Mastercard and Discover use a 3-digit code. American Express uses a 4-digit code, and the field has to allow that extra character without breaking layout or cutting input short.

Run the negative cases

• Letters and symbols typed into the field.
• Two digits submitted, then five digits.
• Empty field paired with a valid card number.
• Leading zeros, such as 000 or 0123.
• Whitespace pasted from a note or an email.

Which validation rules should the field enforce?

Keep the rules simple and let the processor make the final call on whether the code matches the card.

• Accept digits only, and reject anything else before submit.
• Set length to 3 by default and 4 when the card number starts with 34 or 37.
• Use inputmode="numeric" so phones open a number pad.
• Set autocomplete="cc-csc" so password managers fill the right box.
• Trim whitespace, but never strip leading zeros.
• Do not block paste. Blocking paste pushes users to type wrong digits.
• Show the error on blur or on submit, not on every keystroke.

What breaks in real CVV fields?

Most bugs come from copy-paste rules borrowed from other forms. A CVV is not a phone number and not a ZIP code, so the same trimming and formatting logic causes failures.

• A max length of 3 truncates Amex codes.
• Number parsers turn 007 into 7.
• Fields cleared after a failed attempt, forcing a full re-entry.
• Autocomplete disabled, which fights browser and wallet autofill.
• Generic error text such as "invalid input" with no hint about length.
• The code written to app state, logs, or an analytics event.

How do you test the CVV field on mobile?

Run the form on a real phone, not a desktop emulator. Keyboards, autofill, and wallet sheets behave in ways an emulator does not reproduce.

• Confirm the numeric keypad opens on focus.
• Check that Safari and Chrome autofill place the code in the CVV box.
• Test with Apple Pay and Google Pay sheets, which may skip the field.
• Rotate the device and check the layout does not clip the fourth digit.

What do PCI rules say about the CVV field?

PCI DSS forbids storing the card verification code after authorization, in any form. The field must pass through to the processor and leave no copy behind in logs, databases, session storage, or error reports.

That rule shapes the test plan. Any test that finds the CVV in a log file or a client-side store is a failed test, even when the payment succeeds.

How do you build a repeatable CVV test pass?

A checklist keeps coverage honest across forms and releases. Write it once, then run it after every change to the payment flow.

1. List every form in the product that accepts a card: checkout, saved-card update, subscription retry, admin entry.
2. For each form, note the brands it accepts and the expected code length.
3. Write the positive case first: one test card per brand with the correct code.
4. Add the negative cases: empty, short, long, letters, spaces, leading zeros.
5. Trace where the value goes: request payload, console output, storage, analytics.
6. Repeat on desktop, iOS Safari, and Android Chrome.
7. Re-run the list after any change to the payment form or the processor integration.

Common questions about UI CVV testing

What is a test CVV number?

It is the fixed code that ships with a processor test card. Stripe's 4242 4242 4242 4242 test card, for example, accepts any 3-digit code and a future expiry date in test mode.

Is the CVV always 3 digits?

No. American Express uses 4 digits. Most other major brands use 3, so the field has to handle both lengths.

Should the CVV field ever be masked?

Masking is optional. Many checkout forms show digits while typing, then mask on blur. Pick one behavior and test it on both desktop and mobile.

How many test cases are enough?

Cover one valid case per brand, plus the empty, short, long, and non-numeric cases. That set catches most field-level defects.

Can I test CVV errors with live cards?

No. Use sandbox test cards and processor decline triggers. Live card testing risks account flags and breaks processor terms.