search

recurly / recurly-js

Simple subscription billing in the browser
https://js.recurly.com/
MIT License
645 stars 138 forks source link

CVV length validation issues #889

Open jobs4mvr opened 4 months ago

jobs4mvr commented 4 months ago

Say, I have an American Express Credit Card I am inputting into the Payment Form, and I stop after inputting 3 numbers, the error (correctly) prompting me to input 4 char shows. AFTER I input 4 chars, the error does not disappear TILL I click outside the CVV field.

This is an issue for other Credit Card Payment Forms as well. Say, I input a 2 Char CVV for a VISA Credit Card, the error prompting the Customer to input 3 char is displayed, but, after adding 2 more numbers, no error displays, and allows the Customer to go ahead and processes the Payment as well.

jobs4mvr commented 3 months ago

@recurly : Anything on this issue from 3 weeks ago?

chrissrogers commented 3 months ago

Hi @jobs4mvr, thanks for the question. CVV length can be an unpredictable validation in some instances, as there are not 100% spec guarantees of the max length being 3 or 4. In order to cover the widest possible scenarios and be compatible with all of the gateways we support, we have applied loose validation here. However, if you would like to be more strict with validation, listening to the change event and checking the detected card brand and field lengths will allow you to present validation errors in any manner you see fit.

We typically clear error state classes on blur to account for input pauses, but will update the field state being emitted on all key presses. That will allow you to react to validation changes without having to wait for a blur.