Contrib.social

[2.x] Prevent the Javascript submission (Stripe) if the state of the element is marked as disabled on the client

Open on Drupal.org →
Created on 20 June 2021, over 3 years ago
Updated 19 August 2023, about 1 year ago

Problem/Motivation

There are cases where the element will be marked as disabled client-side.

An example is a webform with conditions[1], and Conditional Logic, that mark the element as disabled. This happens with the use of the data-drupal-states property and as a result what is actually marked as disabled is the wrapper of the stripe element with the addition of the class form-disabled

In this case we have a form with the Stripe element still in place that should not be taken into account on submission.

Currently the Javascript part of the Stripe implementation intervenes, proceeds first with the Stripe call and then passes back the control to the form for continuing with the submission.

The Stripe element though should be ingored so the Stripe call should not take place.

[1] https://www.drupal.org/docs/drupal-apis/form-api/conditional-form-fields →

Steps to reproduce

1. Create a webform and attach a Stripe element on it
2. Set a contitional logic that will mark this field as disabled
3. With the Stripe field disabled try to proceed with the webform submission.

The Stripe call takes place, and since the Credit Card field is empty comes back with an error message (validation) that prevents to webform for being submitted.

The above could be a real case when we have a webform where the user selects the payment method
1. [ ] Bank/wire Transfer
2. [ ] Credit Card

In the case of the credit card we display the Stripe fields and make it mandatory for the sumbission of the webform. The submission requires a succesfull charge.

In the case of the Bank Transfer we mark the "Stripe" fieds as disabled and we let the user submit the webform.

Proposed resolution

In stripe.js we check the stripe element and if it is wrapped with the form-disabled class we cancel the related logic and return the control back to the form.

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Needs review

Version

2.0

Component

Code

Created by

🇬🇷Greece skounis

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Open in Jenkins → Open on Drupal.org →
    Core: 10.0.7 + Environment: PHP 8.1 & MySQL 8
    last update over 1 year ago
    1 pass
  • Comment over 1 year ago →
    🇺🇸United States mekal

    Re-rolled this patch for Drupal 9.5.9.

  • Comment about 1 year ago →
    🇺🇸United States texas-bronius

    This is also problematic in the case of the Stripe element being hidden, too. We have "[x] Use my current card on-file" and "[ ] Use new payment" selectors that show/hide the Stripe element form when "use current" is selected based on a #states :visibility on the 'stripe' form element.

    In our case, I was able to prevent the Stripe form submit by checking parent visibility:

     function onFormSubmit(e) {
   var $form = $(e.currentTarget);
+  if ($(element).parent().css('display') === 'none') {
+    return;
+  }
   ...

    but I see that our stripe.js is highly modified, so I don't have a simple patch to contribute at this time. ymmv :)

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024