How to accept expiration date as 4 or 2 digits for year? And only store 2 digits?

Using VGS Collect a customer may enter 4 digits or 2 digits for their expiration year on their credit card, please see below how to save only the last 2 digits of the year.

We recommend you test within your SANDBOX vault how to handle separating the month and year for the card expiration date with our form.SERIALIZERS.separate method.

Below in our VGS Steps we'll show you how to use a form.SERIALIZERS.replace method to filter out only the last 2 digits you need for the year.

VGS Steps
Step 1:
Setup your VGS Collect form to handle credit card information securely.

You can see the other forms that can be setup with VGS Collect below.

Step 2:
Whether a customer enters 4 digits or 2 digits, you'll notice the way to always filter out the last two digits for the year requires the form.SERIALIZERS.replace method as a serializers parameter of your VGS Collect form.

const expDate = form.field('#card-expiry', {
type: 'card-expiration-date',
name: 'card-expiry',
validations: ['required', 'validCardExpirationDate'],
autoComplete: 'cc-exp',
css: css,
serializers: [form.SERIALIZERS.replace('(\\d{2})\\s\/\\s(\\d{2})(\\d{2})$', '$1 / $3'),form.SERIALIZERS.separate({
monthName: 'ExpirationMonth',
yearName: 'ExpirationYear'
placeholder: 'MM / YYYY',


Additional Information

Feel free to test out our live code example below.

Was this article helpful?
0 out of 0 found this helpful



Please sign in to leave a comment.