search

Adyen / adyen-web

Adyen Web Drop-in and Components
https://docs.adyen.com/online-payments
MIT License
171 stars 126 forks source link

Submit the form by pressing the Enter key with the custom card integration #1881

Open pguilbert opened 1 year ago

pguilbert commented 1 year ago

Is your feature request related to a problem? Please describe. I'm doing a custom card integration. As a user, I would like to be able to submit the form by pressing the Enter key (default browser behavior for native forms).

Describe the solution you'd like Add an onSubmit callback (next to onFieldValid / onChange, etc...) that is called when the user presses enter in the iframe fields.

Describe alternatives you've considered AFAIK, there is no other way to do this (?)

ribeiroguilherme commented 1 year ago

Hi @pguilbert ,

Does this answer your question?

We do not capture "Enter" key presses on the credit card fields. We expect users to Tab between fields and when they have Tabbed onto the Pay button, pressing Enter will then validate/submit the form

from #1242

pguilbert commented 1 year ago

Hi,

Not really. I would like to offer the user the same experience as in an html form. For that, the only thing that is missing is the ability to submit the form with the "Enter" key.

In my opinion having an onSubmit callback will allow me to add the functionality without introducing any breaking changes for existing forms.

ribeiroguilherme commented 1 year ago

Hi @pguilbert ,

The onSubmit callback already exists and it is used to perform the /payments call . It would make more sense to provide something like onEnterPress for example.

I discussed internally with the team and we created a ticket to check this out. It isn't as simple as it sounds though, as it would impact not only Card but also other payment methods.

Regardless of that, we have other priorities at the moment, but we will make sure to keep this ticket updated with the progress. Cheers

obouchari commented 1 year ago

I have a custom button using components, when calling submit() the form doesn't seem to show any validation errors! Am I missing something? Also, adding {showPayButton: true} to config doesn't seem to work either, form still doesn’t show any errors.

ondrakub commented 4 months ago

hi, any progress on this issue? we would also like to submit the form using enter. This is a common behavior that users are used to and would improve the experience.