Adyen Web Drop In OnChange fires more than once

Question

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 ===============================

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);
  },
};

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

Answer 1

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;
                    }
                })