Create Credit Card Field with Virto Custom Mask

This article explains how to create a new field to input credit card numbers without the necessity to write a code. For this task, you need to download and install Virto Custom Mask and Unique Field Validation.

Configuring alerts in SharePoint calendar

This multi-purpose component allows you to create custom fields in design mode and check fields for unique criteria within the current list, site or site collection framework. To start, create a new list entitled “Credit Card Storage”. You can also add new fields to any existing list as well, if preferred.

When the new list is created, you can then create a column by going to Settings > Create Columns.

Title the column as “Credit Card Number”. If you have Virto Custom Mask and Unique Field Validation installed, a list of column types will be available. Select “Virto Custom Mask”.

Creating new list in Microsoft Lists - provide name

Once column type is selected, visual field editor will be available. It consists of several blocks.

Block 1 defines unique scope, automatic field case and separator between elements. Block 2 contains mask preview which is refreshed automatically, but you can also refresh it manually by clicking the “Refresh” button. Block 3 allows adding, deleting and adjusting mask elements. The format of credit card numbers depends on the type of credit card. Please see http://en.wikipedia.org/wiki/Bank_card_number for reference. For this article, we have chosen Visa – 16-digit card number: 4 blocks with 4 numbers. Now let’s create a field for inputting the credit card numbers.

Four boxes showing masked credit card number format with zeros and dashes

Now, let’s add a text block. In order to do this, select “Text” in the “Select mask item type” section and click “Add”. You will see the following picture as a result.

SharePoint custom field configuration interface showing text field settings with color options

This block is not editable by default. Check the “Editable” box to change this setting. More fields will be displayed and you will then define the width to 40 and set a 4 symbols limit by using the expression”d{4}”. Now you’ve added one text block to the field. This block will be editable and will require 4 numbers to enter.

Repeat the above actions three times and define it with a dash symbol, “-“, as a separator. The result is as follows.

The field for inputting credit card numbers is ready to use. Click “OK” to add this field to the list. You will now have the menu options to create, edit and view forms of the list containing the new form for inputting credit card numbers. Here are several screenshots of the created mask: