CVC/CVV field validation

[inikolaev]

We have a use-case when we need to ask our customers to confirm their card CVC/CVV code. For that we use card-security-code VGS field.

There is a small issue that in this case it’s impossible to perform proper validation - should CVC/CVV code be 3 or 4 digits for example.

We have card BIN available - is there a way to tell card-security-code field the card BIN so that proper validation could be performed?

Alternatively we could add a read-only card-number that would hold masked card number, but it's not clear whether there is a way to control whether this field will be submitted or not - it could be a good addition as well, depending on the use case.

[AnnaKudriasheva]

@inikolaev sorry for the delayed response! 4-digit cvv/cvc is only applicable for the American Express cards. If you know the card BIN you can try the following way to improve validation:

1. Identify if the BIN belongs to the Amex - /^3[47][0-9]{4}$/.test('376660').
2. Add additional custom validation to the Collect field to check for the length:

const getCVCLengthValidation = () => {
  return isAmex ? '/^\\d{4}$/' : '/^\\d{3}$/';
}

const cvc = form.field('#card-cvc', {
  type: 'card-security-code',
  name: 'cardCvc',
  validations: ['required', 'validCardSecurityCode', getCVCLengthValidation()],
  placeholder: 'CVC'
});

Here's a Codepen with the working example: https://codepen.io/Averanya/pen/VwXNmpQ

Please let us know if the proposed solution doesn't work for you so we can brainstorm other ways or open a feature request.

[inikolaev]

Thanks, @AnnaKudriasheva !
I think this should work and we'll give it a try.

I was thinking about alternatives and I think you could add another field to configure card BIN in cases like this. This way clients would benefit from any changes in the future that you implement behind the scenes:

const cvc = form.field('#card-cvc', {
  type: 'card-security-code',
  name: 'cardCvc',
  validations: ['required', 'validCardSecurityCode'],
  placeholder: 'CVC',
  cardBin: '341111'
});

But I'll leave this to your team to brainstorm :)

[inikolaev]

I have some other questions - what would be the best way to ask? I can create a separate issue for that or maybe GitHub discussions is a better place for it, but you would have to enable it for the repo.

[AnnaKudriasheva]

I've enabled discussions for this repo. Feel free to ask questions there :)