Hitting enter key with focus on Stripe element has unexpected behaviour.
Steps to reproduce
- Go to a CiviCRM form containing a Stripe form (for example, an event booking form, a contribution form)
- Fill out any non-Stripe fields
- Fill out the card number, but not the CVV or expiry fields.
- With your focus still on the Stripe card number field hit the enter key.
Expected behaviour
An error message should be shown. (i.e. the behaviour which does happen if you click the submit button)
Actual behaviour
The form submits (i.e. a page reload) but the form is not processed on the server correctly. If logged in, the error message "Unable to complete payment! Missing paymentIntentID." may be shown. If logged out the most frequent behaviour seems to be that the user is redirected to the homepage, but this varies.
Environment
This can be reproduced on any CiviCRM form using the Stripe payment method. I've not tested on Drupal Webforms.
To check this isn't just happening in my environment I reproduced this on https://civicrm.org/civicrm/contribute/transact?reset=1&id=47. However, I'm not sure if this will have left a pending (unpaid) contribution in the database, so I'd be wary about trying this repeatedly on a non-test environment.
Technical notes
It looks like Stripe is triggering the submit event on the parent form, and expecting the parent page to catch it. However, the Stripe extension (com.drastikbydesign.stripe/js/civicrm_stripe.js) does not have an event listener on the form's submit
event.
Currently the Stripe extension has:
CRM.payment.submitButtons[i].addEventListener('click', submitButtonClick);
...
CRM.payment.form.addEventListener('keydown', function (keydownEvent) {
if (keydownEvent.code === 'Enter') {
CRM.payment.addDrupalWebformActionElement(this.value);
script.submit(keydownEvent);
}
});
It feels like these should be augmented or replaced by a CRM.payment.form.addEventListener('submit', ...)
. I have confirmed that when the submit occurs the submit event is fired.