From 6ef72562951effcfe89d55ed508b67ba36dfb01b Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 16 Dec 2021 11:50:38 +0100
Subject: [PATCH] Only submit handle form submit if stripeElementsForm is
 visible

---
 .../payment/_stripe_sca.html.haml             |  2 +-
 .../controllers/stripe_controller.js          | 46 ++++++++++++-------
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/app/views/split_checkout/payment/_stripe_sca.html.haml b/app/views/split_checkout/payment/_stripe_sca.html.haml
index 3b0d20c98e..876f8c482e 100644
--- a/app/views/split_checkout/payment/_stripe_sca.html.haml
+++ b/app/views/split_checkout/payment/_stripe_sca.html.haml
@@ -12,7 +12,7 @@
       %label
         = t('split_checkout.step2.form.stripe.use_new_card')
 
-    %div.stripe-card{ "data-controller": "stripe", "data-stripe-key": "#{Stripe.publishable_key}" }
+    %div.stripe-card{ "data-controller": "stripe", "data-stripe-key": "#{Stripe.publishable_key}", "data-stripe-target": "stripeElementsForm" }
       = hidden_field_tag "order[payments_attributes][][source_attributes][first_name]", @order.bill_address.first_name
       = hidden_field_tag "order[payments_attributes][][source_attributes][last_name]", @order.bill_address.last_name
       = hidden_field_tag "order[payments_attributes][][source_attributes][month]", nil, { "data-stripe-target": "expMonth" }
diff --git a/app/webpacker/controllers/stripe_controller.js b/app/webpacker/controllers/stripe_controller.js
index 9ebb2deedf..bd601a55cc 100644
--- a/app/webpacker/controllers/stripe_controller.js
+++ b/app/webpacker/controllers/stripe_controller.js
@@ -1,7 +1,7 @@
 import { Controller } from "stimulus"
 
 export default class extends Controller {
-  static targets = [ "cardElement", "cardErrors", "expMonth", "expYear", "brand", "last4", "pmId" ];
+  static targets = [ "cardElement", "cardErrors", "expMonth", "expYear", "brand", "last4", "pmId", "stripeElementsForm" ];
   static styles = {
     base: {
       fontFamily: "Roboto, Arial, sans-serif",
@@ -23,6 +23,7 @@ export default class extends Controller {
     const brand_field = this.brandTarget;
     const last4_field = this.last4Target;
     const pm_id_field = this.pmIdTarget;
+    const stripeElementsForm = this.stripeElementsFormTarget;
 
     const stripe_element = elements.create("card", {
       style: this.constructor.styles,
@@ -42,22 +43,35 @@ export default class extends Controller {
     // Before the form is submitted we send the card details directly to Stripe (via StripeJS),
     // and receive a token which represents the card object, and add that token into the form.
     form.addEventListener("submit", event => {
-      event.preventDefault();
-      event.stopPropagation();
+      if (this.isVisible(stripeElementsForm)) {
+        event.preventDefault();
+        event.stopPropagation();
+       
+        stripe.createPaymentMethod({type: "card", card: stripe_element}).then(response => {
+          if (response.error) {
+            error_container.textContent = response.error.message;
+          } else {
+            pm_id_field.setAttribute("value", response.paymentMethod.id);
+            exp_month_field.setAttribute("value", response.paymentMethod.card.exp_month);
+            exp_year_field.setAttribute("value", response.paymentMethod.card.exp_year);
+            brand_field.setAttribute("value", response.paymentMethod.card.brand);
+            last4_field.setAttribute("value", response.paymentMethod.card.last4);
 
-      stripe.createPaymentMethod({type: "card", card: stripe_element}).then(response => {
-        if (response.error) {
-          error_container.textContent = response.error.message;
-        } else {
-          pm_id_field.setAttribute("value", response.paymentMethod.id);
-          exp_month_field.setAttribute("value", response.paymentMethod.card.exp_month);
-          exp_year_field.setAttribute("value", response.paymentMethod.card.exp_year);
-          brand_field.setAttribute("value", response.paymentMethod.card.brand);
-          last4_field.setAttribute("value", response.paymentMethod.card.last4);
-
-          form.submit();
-        }
-      });
+            form.submit();
+          }
+        });
+      }
     });
   }
+
+  isVisible(element) {
+    while (element) {
+      if (window.getComputedStyle(element).display === "none") {
+        return false;
+      }
+      element = element.parentElement;
+    }
+    return true;
+  }
+
 }