From fc779e0237281649aa5efb55f4c13ed77cc8ef83 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 15 Nov 2021 11:44:22 +0100
Subject: [PATCH] Mount Stripe element to the specific DOM element

---
 .../admin/payments/directives/stripe_elements.js.coffee       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/admin/payments/directives/stripe_elements.js.coffee b/app/assets/javascripts/admin/payments/directives/stripe_elements.js.coffee
index d9de8a2d54..ea58ba4138 100644
--- a/app/assets/javascripts/admin/payments/directives/stripe_elements.js.coffee
+++ b/app/assets/javascripts/admin/payments/directives/stripe_elements.js.coffee
@@ -1,7 +1,7 @@
 angular.module('admin.payments').directive "stripeElements", ($injector, AdminStripeElements) ->
   restrict: 'E'
   template: "<label for='card-element'>\
-             <div id='card-element'></div>\
+             <div id='card-element' class='card-element'></div>\
              <div id='card-errors' class='error'></div>\
              </label>"
 
@@ -18,7 +18,7 @@ angular.module('admin.payments').directive "stripeElements", ($injector, AdminSt
             color: '#5c5c5c'
             '::placeholder':
               color: '#6c6c6c'
-      card.mount('#card-element')
+      card.mount(elem.find('.card-element').get(0))
 
       # Elements validates user input as it is typed. To help your customers
       # catch mistakes, you should listen to change events on the card Element