Validation hooks / events about adyen-cse-web HOT 10 CLOSED

I'm going to close this issue as in v0.1.18 we introduced an onvalidate property on the settings.

Let's create a new issue if onvalidate does not serve it's purpose properly.

from adyen-cse-web.

Hi Richard,

Currently there are no additional events on callbacks via the options.

There are one and a half ways you could go:

1. Via validations
   You could build your own additional logic and listen to on change / blur.

The return object of the adyen.createEncryptedForm (assuming it's assigned to var cseForm) ships with cseForm.isValid() method you can use to test overall validity (given validations are enabled). Furthermore there is a cseForm.validity property which exposes more detailed information on which checks fails and succeed. (For example: {year: true, month: true, cvc: true, luhn: false}).

Also it sets valid and invalid classes on the form elements if you don't want to map the validity to elements yourself.

2. If you are purely interested in the card number, you can have a callback by - consider this a hack, not a feature - registering a cardTypeDetection callback as described in https://github.com/Adyen/CSE-JS/blob/master/js/addOns/adyen.cardtype.js:

cseForm.addCardTypeDetection( function( type, friendlyName) {
      // called on every keypress, change event also when the type actually didn't change.
});

But in reality this is just registering to change, blur and keyup events on the card number element.

I agree with you that in further revisions of this library better plugin options must be offered.

Regards,

Arnoud

from adyen-cse-web.

The form.isValid() function already is a great start. 👍

from adyen-cse-web.

It seems all fields with exception of the creditcard number field are validating on blur. The creditcard logo is shown after a couple of keyup events. Can you elaborate on when the validation events are triggered exactly?

from adyen-cse-web.

Sorry Richard. I overlooked this. Validations are triggered only on 'change' and on 'submit' of the form.

from adyen-cse-web.

Already solved it by using the blur event. Maybe the validation documentation is something to look into, so other users can more easily implement custom rules for their CSE form.

from adyen-cse-web.

Any update on some validation events or hooks?

from adyen-cse-web.

Richard,

Sorry for the delay. In the latest version validations trigger on change, blur,keyup. Next to the invalid class a valid class will be added to fields (unless options.disabledValidClass is set).

No hooks are provided as this point in time. Did you look into nodom variant of the library? This might be more convenient for you to use.

Kind regards,

Arnoud

from adyen-cse-web.

I'm trying to do the same thing, enable/disable some buttons depending on adyen validation but doesn't seem trivial. Could you provide some more information please?

from adyen-cse-web.

Hi George,

At this point in time you can have different approaches:

• Manually bind to change/blur events on the form and look for the valid and invalid classes on your input elements on which you want to base the enabled/disabled state of your buttons.
• Next to an adyen.encrypt.createEncryptedForm also instantiate an encryption object and use it's validation: var encryption = adyen.encrypt.createEncryption(key, options);.
  You can call var validationResult = encryption.validate( cardData ); to get instant validation results.
• Given that you have a variable var encryptedForm = adyen.encrypt.createEncryptedForm(); you can also access the encryption object in the previous example via var encryption = encryptedForm.encryption;.
  As such you can call var validationResult = encryptedForm.encryption.validate( cardData ) to get an instant validation result at any moment in time.

In both last examples the cardData needs to have a structure like below:

var cardData = {
    number : cardNumber,
    cvc : cvc,
    holderName : holderName,
    expiryMonth : expiryMonth,
    expiryYear : expiryYear,
    generationtime : generationtime
};

Please let me know if this works out for you!

Kind regards,

Arnoud

from adyen-cse-web.