Prevent user from multiple clics on pay button

[jmar212]

Describe the bug
Hello,

It's possible to spam clic the payment button and this behavior must not be possible. Several cases has caused some unexpected webhook notifications on our side because the user was able to send multiple queries with few millisec of interval.
Our guess is that users either have a bad network connection or accidentally double-click the button.

To Reproduce
I was able to reproduce it with card payment, I didn't tried with other payment methods.

Steps to reproduce :

1. Put correct payment infos
2. Spam clic the Pay button or paste that script in the console :

document.getElementsByClassName("adyen-checkout__button__text")[0].click(); 
document.getElementsByClassName("adyen-checkout__button__text")[0].click(); 
document.getElementsByClassName("adyen-checkout__button__text")[0].click(); 
document.getElementsByClassName("adyen-checkout__button__text")[0].click(); 
document.getElementsByClassName("adyen-checkout__button__text")[0].click(); 
document.getElementsByClassName("adyen-checkout__button__text")[0].click(); 
document.getElementsByClassName("adyen-checkout__button__text")[0].click(); 

4. The dropin is sending multiple payments queries

Expected behavior
When the pay button is clicked, the button is disabled while the http query is sent.

Desktop (please complete the following information):

• OS: Mac OS Sonoma
• Browser Chrome
• Version 125.0.6422.113

[ribeiroguilherme]

Hey @jmar212 ,

Which version of the Drop-in are you using? Did you by any change set the setStatusAutomatically to false?

[rsdev88]

I've come across a similar issue, not directly related to using the drop-in's own payment button, but instead using a custom button that calls the DropInElement.submit() method, and a drop-in with a configuration with showPayButton: false.
i.e.

// mounting the drop-in.
this.adyenDropin = this.adyenCheckout.create("dropin");
this.adyenDropin.mount("#adyen-dropin-container");
...

// later on in my custom button's handler
this.adyenDropin.submit();

I was mistakenly not disabling my custom button when it was clicked/tapped, meaning you could click it multiple times, in turn invoking this.adyenDropin.submit() multiple times too. If the card details in the drop-in are valid, this results in multiple successful payments being processed, despite the fact they're all linked to the same payment session, which I don't believe should be possible.

Web drop-in version: @adyen/adyen-web": "^5.66.0"

[ribeiroguilherme]

Hey @rsdev88 - if you are using the custom pay button, you are the responsible one for not letting Drop-in submit the payment multiple times as you have control of that by calling the submit() function. In this case, unfortunately you forgot to handle the loading state therefore you faced this issue. In any case, If you want us to have control over that and do not care about submitting the payment multiple times, then do not use the custom pay button.

I am closing this thread since the issue is not reproducible on the latest SDK version using the Adyen pay button.

[rsdev88]

Hi @ribeiroguilherme, I agree that in this situation I should prevent the custom button from calling submit() multiple times, but shouldn't there still be some deduplication in Adyen's backend based on the payment session ID? My understanding is that only one payment should be allowed per payment session ID, i.e. whichever endpoint the SDK is calling should be idempotent - or is that not true?

[jmar212]

Hello @ribeiroguilherme,

Thanks for your reply!

I fixed the issue by calling in the onSubmit callback : component.setStatus('loading');

I thought this behavior was managed automatically while the promise was resolved. I figured out after more research that this solution was working.