Webform payment form submission fails on Safari/iOS
This is an odd behaviour that may be an edge-case to when Stripe is enabled but the webform uses another gateway, or it might apply to all webform+Safari/iOS forms, but I figured it would be best to document it here.
How to reproduce:
- On a Drupal7 site with webform enabled
- Enable the Stripe CiviCRM extension
- Enable the Dummy processor
- Configure the webform to only use the Dummy processor.
On Safari (MacOS or iOS), once you get to the payment step and click submit, the form will loop back to the first step. No error message, nothing in the logs, etc.
I isolated the issue to this line of code:
https://lab.civicrm.org/extensions/stripe/blob/master/js/civicrm_stripe.js#L192
// We need the action field for back/submit to work and redirect properly after submission
if (!($('#action').length)) {
$form.append($('<input type="hidden" name="op" id="action" />'));
}
In my form, I had an element <button class="webform-submit button-primary btn btn-primary form-submit" type="submit" name="op" value="Submit">Submit</button>
So the above code was adding a second 'op' element.
It does not cause a problem in Firefox or Chrome, but Safari does not like it.
If I remove the line of code, it fixes the issue in Safari.
A fix might be to check instead for $('input[name=op],button[name=op]')
?
I'm still curious in which cases that input is not present, but I'm not familiar enough with the webform integration.