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

[pguilbert]

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]

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]

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]

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]

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]

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.

[sponglord]

The major release, v6.0.0, was launched today! See the documentation here:

• release notes
• migration guide

See the "New" section of the Release notes...

Shoppers can now confirm the payment by pressing the Enter key...

For a CustomCard you will need to implement your own onEnterKeyPressed: (activeEl, component) => {} function and use it to validate/submit your form e.g. by triggering click() on your Pay button