Adyen v5.51.0 Credit Card Web Component: Is `onFieldValid` Still Functional?

Question

I'm currently working on a project that utilizes the Adyen credit card web component (version 5.51.0).

Here's the configuration I'm using:

const configuration = {
    locale: "en_US",
    environment: "test",
    clientKey: "test_ABCDEFG",
    analytics: {
        enabled: false
    },
    paymentMethodsResponse: myPaymentMethodsResponse,
    onChange: handleOnChange,
    paymentMethodsConfiguration: {
        card: {
            styles: styleObject,
            hasHolderName: true,
            holderNameRequired: false,
        }
    },
    onFieldValid: handleFieldValidation,
};

function handleFieldValidation(data) {
    // my code
}

I've noticed that the onFieldValid function doesn't seem to be working as expected. I'm wondering if this function is still operational in version 5.51.0, or if I might be implementing it incorrectly. Any insights would be greatly appreciated.

Screenshot from Adyen Docs

Trying to use the onFieldValid event.

Answer 1

The onFieldValid should be declared in the paymentMethodsConfiguration for the card payment method, instead of placing it at the root (global) level:

  paymentMethodsConfiguration: {
    card: {
      styles: styleObject,
       hasHolderName: true,
       holderNameRequired: false,
       onFieldValid : (state, component) => {
         handleFieldValidation(state, component)
       },

Here you can find all configuration options for cards in the Drop-in integration.