A CVV test UI verifies that a card security code field accepts 3 digits for Visa, Mastercard, and Discover, accepts 4 digits for American Express, and hands the right value to the payment processor. A full test pass covers formatting, validation copy, keyboard type, paste behavior, and screen reader output. Most bugs sit in the gap between your client-side rules and the rules the processor enforces.
What should a CVV field do before you test it?
Agree on the field contract first. The contract drives every assertion you write.
- Accept 3 digits by default and switch to 4 digits when the card brand is American Express.
- Label the field with the acronym and a hint, such as "CVV" plus "3 digits on the back of your card".
- Reject non-digits and strip whitespace from pasted values.
- Keep the value out of logs, analytics, and error reports.
Write these four rules down before you touch a test runner. A field with no written contract gets tested against whatever the developer remembered that day.
How do you test a CVV field, step by step?
- Switch the gateway to sandbox mode and load the processor's published test cards. Never type a real card number into a test environment.
- Type a 3-digit code on a Visa test card. Confirm the field submits and the sandbox returns an approval.
- Type a 4-digit code on an American Express test card. Confirm the field accepts all four digits and does not fire a submit after the third.
- Submit a blank code. Confirm the error message names the field and states the expected length.
- Paste "12a" and confirm the field strips the letter or blocks the paste with a clear message.
- Tab away from a filled field and confirm validation runs on blur, not only on submit.
- Repeat on mobile Safari and Chrome for Android. A numeric keypad should appear instead of the full QWERTY layout.
Which edge cases break CVV fields most?
- Brand detection lag. The user types an Amex number and the field still caps at 3 digits.
- Trailing whitespace. A copied code with a trailing space fails the length check and the user sees a vague error.
- Autofill collisions. Some Android builds drop the code into the card number field instead.
- Right-to-left layouts. The caret position and maxlength behavior shift in RTL locales.
- Double submit. A fast tap fires two requests and the second one fails as a duplicate authorization.
Log each failure with the browser, the card brand, and the exact input string. Vague bug reports on payment forms cost days.
How does PCI DSS affect CVV fields?
PCI DSS classifies the CVV as sensitive authentication data. Requirement 3.2 says you must not store it after authorization, even when encrypted.
That rule changes the test plan. Check that the value never lands in application logs, analytics events, session replay recordings, or crash reports. Confirm the field clears from memory after the transaction and that no database column holds the code.
Which accessibility rules apply?
WCAG 2.1 Success Criterion 1.3.5 covers input purpose, and the matching autocomplete token for a security code is cc-csc. Add these checks to your pass.
- Set
inputmode="numeric"andautocomplete="cc-csc"on the input. - Tie the visible label to the field with a matching for and id pair.
- Announce errors through
role="alert"or an aria-live region. - Run a screen reader pass with VoiceOver on iOS and NVDA on Windows.
How do you automate CVV tests?
Split the work between fast unit tests and slower end-to-end runs.
- Unit: assert the formatter turns "1 2 3" into "123" and rejects "12a".
- Component: type into the field with Testing Library and assert the error node text.
- End-to-end: drive Playwright or Cypress against the sandbox and assert the processor response, not just the DOM state.
One end-to-end test per card brand catches most regressions. Add a blank-code case and a pasted-value case.
What does good CVV error copy look like?
Error text should say what to fix and where to find it. "Enter the 3-digit code on the back of your card" beats "Invalid input".
For American Express, switch the copy to "Enter the 4-digit code on the front of your card". The brand detection that drives the length rule should drive the message too.
Frequently asked questions
Should a CVV field accept letters?
No. Strip non-digits on input or block them at the keydown level. Explain the rule in the helper text instead of failing in silence.
Should the CVV field mask input?
Masking helps on a shared screen but slows typists. Most checkout designs show the digits and keep the field narrow. Pick one approach and match it across the card number, expiry, and CVV fields.
Can you store a CVV for recurring payments?
No. Card network rules and PCI DSS forbid CVV storage after authorization, so subscriptions must use a processor token instead.
Why does a CVV field pass on desktop but fail on mobile?
Keyboard type is the usual cause. Without inputmode="numeric", the phone shows a full keyboard and the user adds a space or a letter. Autofill is the other common culprit.
Do you need real cards to test a CVV UI?
No. Every major processor publishes sandbox card numbers that cover approvals, declines, and 3D Secure steps. Real card data in a test environment breaks PCI rules and adds risk with no benefit.
What is the fastest path to a reliable CVV field?
Write the field contract, test it against sandbox cards on two browsers and two phones, and keep the code out of every log. That covers the failures that reach production checkout flows.