The CVV/CVC code (Card Verification Value/Code) is located on the back of your credit/debit card on the right side of the white signature strip. It is always the last 3 digits in case of VISA and MasterCard but for American Express Card having four digits and front of card.

Nowadays, It is possible to easily get card details of someone else. For example CCTV cameras are in operation in almost every shop and follow you while paying. Not only because of this fact the CVV/CVC verification code is located on the back of your payment card and represents the basic security feature. Therefore CVV/CVC code is required for all online payments where the card is not present and the PIN code cannot be entered.

Card Security Code Names

This card security code also called by different names as below:

• CID (Card Id or Card Identification Number or Card Identification Code):  Discover, American Express (four digits on front of card)
• CSC (Card Security Code) : debit cards, American Express (three digits on back of card).
• CVC2 (Card Validation Code): MasterCard
• CVD (Card Verification Data): Discover, sometimes used as the common initialism for this kind of code
• CVE (Elo Verification Code): Elo in Brazil
• CVN2 (Card Validation Number 2):  China Union Pay
• CVV2 (Card Verification Value 2) : Visa
• CVC (Card Verification Code):  Master card

See Also :

• Log4j2: How to Mask Logs Personal/Confidential/SPI Information
• How to Mask JSON Confidential/Personal Information in logs :JAVA
• How to mask JAVA Object confidential/personal information in logs while Printing
• How to MASK XML Confidential/Personal Data : JAVA
• How to mask Personal/Confidential Information on web page

CVV Masking Example

Here considering, CVV of length 3 digits. By masking will hide all 3 digits. For example, my account number is 123 than after mask will display as XXX. CVV for some card can also be as four digit take this as assignment and make code changes accordingly so that support for both three and four digits.

HTML Changes

Create a text box on your page with below html.

<b>CVV:</b>

Java Script/JQuery Changes

Copy below java script in your head section of page.

var originalVal;
$(document).ready(function()
{
       if($('#txtCVV').val().length>0)
		 {
		 if($('#txtCVV').val().indexOf("X")==-1)
			{
			  originalVal=$('#txtCVV').val();
			}
		    maskCVV(this);
		 }
         
	    $('#txtCVV').blur( function(e)
		{
	    	if($('#txtCVV').val().indexOf("X")==-1)
	    	{
	    	  originalVal=$('#txtCVV').val();
	    	}
	    	 maskCVV(this);
		});
			 
		$('#txtCVV').focus( function(e)
		{
			$(this).val(originalVal);
		});
});	
function maskCVV(regularCVV)
{
	 var varlen =$(regularCVV).val().length;
	
	 if(varlen > 8)
	 {
	 $("#error").text('Not Valid CVV.');
	 }
	 else
	 {
	 $("#error").text('');
	 var str = $(regularCVV).val();
	 
	 //Replace all characters with X
     var mask = $(regularCVV).val().replace(/./gi, 'X');
     $(regularCVV).val(mask);
  	}	
}
	

Note :
This masking example is created considering standard length of text size and formatting of text field, that can vary according to organizations. If your organization having different format and text size modify source code according to your need. If you are facing any issue drop a comments will try to connect as soon as possible.

Download Source code

To download the source code of this example, click on below given download link.

Mask CVV

Drop me your questions in comments section.

References

• https://en.wikipedia.org/wiki/Card_security_code