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

Context
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.


Documentation
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.
https://www.verygoodsecurity.com/docs/vgs-collect/js/cookbook#expiration-date-separation

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.
https://github.com/verygoodsecurity/vgs-collect-examples/tree/master/examples/credit-card-example

You can see the other forms that can be setup with VGS Collect below.
https://github.com/verygoodsecurity/vgs-collect-examples

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.
https://codepen.io/Averanya/pen/dyMGgpO



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

Comments

0 comments

Please sign in to leave a comment.