Adyen Web Drop In OnChange fires more than once

I have the Adyen Web Drop In integrated, which works fine. Now I want to add tracking so I can see when a customer changes the payment option or payment info. I use the OnSelect and OnChange event for this.

Problem:

• OnChange fires immediately after OnSelect only when it's the first time the payment option is selected. When the page and thus the Drop In is loaded it fires in order: OnSelect, OnReady, OnChange. So I can't check if the component is done loading.
  By default Ideal is selected. When you then select "Card" it fires OnSelect again and then OnChange 3 times. This also only happens the first time you select the "Card" payment option.

Is there a solid way to either:

• only track user changes?
• preload the options underneath a payment option, so that the changes don't get fired when the form is loaded?
• wait on form load when changing payment option selection

=============== CODE ===============================

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const configuration = {
  environment: this.model.environment || 'test',
  clientKey: this.model.clientKey,
  locale: this.model.locale,
  showPayButton: true,
  session: {
    id: this.model.sessionId,
    sessionData: this.model.sessionData,
  },
  onError: this.onFailed,
  paymentMethodsConfiguration: {
    ideal: {
      showImage: true
    },
    card: {
      hasHolderName: true,
      holderNameRequired: true,
    },
  },
  // https://github.com/Adyen/adyen-web/blob/master/packages/lib/src/language/locales/nl-NL.json
  translations: {
    'nl-NL': {
      payButton: this.$t('Veilig betalen').toString(),
      "idealIssuer.selectField.placeholder": this.$t('Kies uw bank').toString(),
      continue: this.$t('Veilig betalen')
    },
  },
  onChange: (state, component) => {
    console.log("ONCHANGE");
    if (this.tracking) {
      this.tracking.ecommerce.payment_method = state.data.paymentMethod.type;
      AnalyticsManager.getInstance().pushTracking(JSON.parse(JSON.stringify(this.tracking)));
    }
  },
  onPaymentCompleted: (result, component) => {
    this.handleCompleted(result, component);
  },
};

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

this.checkoutApi
  .create('dropin', {
    onReady: () => {
      console.log("OnReady");
    },
    onSelect: () => {
      console.log("ONSelect");
    }
  })

<!-- end snippet -->

I also asked this in the GitHub for the Adyen DropIn.
https://github.com/Adyen/adyen-web/issues/2011#issuecomment-1460319246

In the OnChange event you can check if the form for that payment method is valid. I now check that and only track changes if the form is valid. This way no changes are tracked on page load.

					onChange: (state, component) => {
					if (this.tracking, state.isValid) {
                       //only do something when form valid
					}
				},

Besides that I use the OnReady event to set a boolean. In the OnSelect method I only track changes if the boolean is true, so that I don't track changes on page load there.

				this.checkoutApi
				.create('dropin', {
					onSelect: (state) => {
						if (!this.isReady)
							return;

						//do something
					},
					onReady: () => {
						this.isReady = true;
					}
				})

We're investigating the onChange behavior internally. In the meantime, you can use the onSelect optional configuration event handler.

const checkout = await createAdyenCheckout(checkoutSessionResponse)
checkout.create(type, {
      onSelect: obj => console.log('Payment method Selected:', obj.props.name)
}).mount(document.getElementById(type));

This will do exactly what you need, by raising an event every time a customer selects a different enabled payment method.