From f7bf6e10835480d870cc39e42d1c7876c52583aa Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 15 Nov 2021 11:28:34 +0100 Subject: [PATCH 1/7] Include Stripe js only once in the admin section --- app/views/spree/admin/payments/source_forms/_stripe.html.haml | 3 ++- .../spree/admin/payments/source_forms/_stripe_sca.html.haml | 3 ++- app/views/spree/layouts/_admin_body.html.haml | 1 + 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/app/views/spree/admin/payments/source_forms/_stripe.html.haml b/app/views/spree/admin/payments/source_forms/_stripe.html.haml index f946d4800a..fc21765e2a 100644 --- a/app/views/spree/admin/payments/source_forms/_stripe.html.haml +++ b/app/views/spree/admin/payments/source_forms/_stripe.html.haml @@ -1,6 +1,7 @@ -# = render "spree/admin/payments/source_forms/gateway", payment_method: payment_method .stripe - = render "shared/stripe_js" + - content_for :stripe_js, flush: true do + = render "shared/stripe_js" - if Stripe.publishable_key :javascript diff --git a/app/views/spree/admin/payments/source_forms/_stripe_sca.html.haml b/app/views/spree/admin/payments/source_forms/_stripe_sca.html.haml index 78e96b2e7d..7bc9ba3399 100644 --- a/app/views/spree/admin/payments/source_forms/_stripe_sca.html.haml +++ b/app/views/spree/admin/payments/source_forms/_stripe_sca.html.haml @@ -1,5 +1,6 @@ .stripe - = render "shared/stripe_js" + - content_for :stripe_js, flush: true do + = render "shared/stripe_js" - if Stripe.publishable_key :javascript diff --git a/app/views/spree/layouts/_admin_body.html.haml b/app/views/spree/layouts/_admin_body.html.haml index fc798d0fc3..8061168cd1 100644 --- a/app/views/spree/layouts/_admin_body.html.haml +++ b/app/views/spree/layouts/_admin_body.html.haml @@ -1,5 +1,6 @@ = admin_inject_currency_config = render "layouts/i18n_script" += yield :stripe_js #wrapper{ data: { hook: '' } } - if flash[:error] From fc779e0237281649aa5efb55f4c13ed77cc8ef83 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 15 Nov 2021 11:44:22 +0100 Subject: [PATCH 2/7] 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: "" @@ -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 From 36c12a92f2530c8b6c0abf02dc62a121ec18e148 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 15 Nov 2021 11:45:34 +0100 Subject: [PATCH 3/7] Display errors on the right 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 ea58ba4138..f3023f6747 100644 --- a/app/assets/javascripts/admin/payments/directives/stripe_elements.js.coffee +++ b/app/assets/javascripts/admin/payments/directives/stripe_elements.js.coffee @@ -2,7 +2,7 @@ angular.module('admin.payments').directive "stripeElements", ($injector, AdminSt restrict: 'E' template: "" link: (scope, elem, attr)-> @@ -24,7 +24,7 @@ angular.module('admin.payments').directive "stripeElements", ($injector, AdminSt # catch mistakes, you should listen to change events on the card Element # and display any errors: card.addEventListener 'change', (event) -> - displayError = document.getElementById('card-errors') + displayError = elem.find('.card-errors').get(0) if event.error displayError.textContent = event.error.message else From 5348d26054a4137dd51c8108baa3cdab1118f1c6 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 22 Nov 2021 10:57:23 +0100 Subject: [PATCH 4/7] Add new "error" attribute in the StatusMessage It is used by `admin/payments/services/stripe_elements.js.coffee` --- .../javascripts/admin/utils/services/status_message.js.coffee | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/javascripts/admin/utils/services/status_message.js.coffee b/app/assets/javascripts/admin/utils/services/status_message.js.coffee index 42b549dd4c..f76d8b1b98 100644 --- a/app/assets/javascripts/admin/utils/services/status_message.js.coffee +++ b/app/assets/javascripts/admin/utils/services/status_message.js.coffee @@ -6,6 +6,7 @@ angular.module("admin.utils").factory "StatusMessage", -> notice: {style: {color: 'grey'}} success: {style: {color: '#9fc820'}} failure: {style: {color: '#da5354'}} + error: {style: {color: '#da5354'}} statusMessage: text: "" From 5575697c9fc757a3f4c1d2c5033ee85b14d52fa9 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 22 Nov 2021 11:07:26 +0100 Subject: [PATCH 5/7] Add a directive attribute 'selected' that update AdminStripeElements when true Filled with `PaymentCtrl.isSelected(payment_method_id)` Therefore, each time a stripe payment is selected, the one that is actually selected is linked to `AdminStripeElements.card` and `AdminStripeElements.stripe` --- .../admin/payments/controllers/payment.js.coffee | 3 +++ .../payments/directives/stripe_elements.js.coffee | 10 +++++++--- .../admin/payments/source_forms/_stripe.html.haml | 2 +- .../admin/payments/source_forms/_stripe_sca.html.haml | 2 +- 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/app/assets/javascripts/admin/payments/controllers/payment.js.coffee b/app/assets/javascripts/admin/payments/controllers/payment.js.coffee index 549ec365a1..2bf411aa9e 100644 --- a/app/assets/javascripts/admin/payments/controllers/payment.js.coffee +++ b/app/assets/javascripts/admin/payments/controllers/payment.js.coffee @@ -8,3 +8,6 @@ angular.module("admin.payments").controller "PaymentCtrl", ($scope, Payment, Sta $scope.submitted = true StatusMessage.display 'progress', t("spree.admin.payments.source_forms.stripe.submitting_payment") Payment.purchase() + + $scope.isSelected = (payment_method_id) -> + return parseInt($scope.form_data.payment_method) == payment_method_id 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 f3023f6747..fbdc2ac2da 100644 --- a/app/assets/javascripts/admin/payments/directives/stripe_elements.js.coffee +++ b/app/assets/javascripts/admin/payments/directives/stripe_elements.js.coffee @@ -4,7 +4,9 @@ angular.module('admin.payments').directive "stripeElements", ($injector, AdminSt
\
\ " - + scope: + selected: "=" + link: (scope, elem, attr)-> if $injector.has('stripeObject') stripe = $injector.get('stripeObject') @@ -32,5 +34,7 @@ angular.module('admin.payments').directive "stripeElements", ($injector, AdminSt return - AdminStripeElements.stripe = stripe - AdminStripeElements.card = card + scope.$watch "selected", (value) -> + if (value) + AdminStripeElements.stripe = stripe + AdminStripeElements.card = card diff --git a/app/views/spree/admin/payments/source_forms/_stripe.html.haml b/app/views/spree/admin/payments/source_forms/_stripe.html.haml index fc21765e2a..315791bac0 100644 --- a/app/views/spree/admin/payments/source_forms/_stripe.html.haml +++ b/app/views/spree/admin/payments/source_forms/_stripe.html.haml @@ -16,4 +16,4 @@ .three.columns = label_tag :card_details, t(:card_details) .nine.columns - %stripe-elements + %stripe-elements{selected: "isSelected(#{payment_method.id})"} diff --git a/app/views/spree/admin/payments/source_forms/_stripe_sca.html.haml b/app/views/spree/admin/payments/source_forms/_stripe_sca.html.haml index 7bc9ba3399..cd05e88c48 100644 --- a/app/views/spree/admin/payments/source_forms/_stripe_sca.html.haml +++ b/app/views/spree/admin/payments/source_forms/_stripe_sca.html.haml @@ -15,4 +15,4 @@ .three.columns = label_tag :card_details, t(:card_details) .nine.columns - %stripe-elements + %stripe-elements{selected: "isSelected(#{payment_method.id})"} From b6afdb13fc2b745c30a850b3b6358d94a0bd8dce Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 22 Nov 2021 15:54:12 +0100 Subject: [PATCH 6/7] Use timeout to put in other callback and then update the StatusMessage --- .../admin/payments/services/stripe_elements.js.coffee | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/admin/payments/services/stripe_elements.js.coffee b/app/assets/javascripts/admin/payments/services/stripe_elements.js.coffee index d5c20e8668..d1858580cc 100644 --- a/app/assets/javascripts/admin/payments/services/stripe_elements.js.coffee +++ b/app/assets/javascripts/admin/payments/services/stripe_elements.js.coffee @@ -1,4 +1,4 @@ -angular.module("admin.payments").factory 'AdminStripeElements', ($rootScope, StatusMessage) -> +angular.module("admin.payments").factory 'AdminStripeElements', ($rootScope, StatusMessage, $timeout) -> new class AdminStripeElements # These are both set from the AdminStripeElements directive @@ -13,7 +13,7 @@ angular.module("admin.payments").factory 'AdminStripeElements', ($rootScope, Sta @stripe.createToken(@card, cardData).then (response) => if(response.error) - StatusMessage.display 'error', response.error.message + $timeout -> StatusMessage.display 'error', response.error.message console.error(JSON.stringify(response.error)) else secrets.token = response.token.id @@ -29,7 +29,7 @@ angular.module("admin.payments").factory 'AdminStripeElements', ($rootScope, Sta @stripe.createPaymentMethod({ type: 'card', card: @card }, @card, cardData).then (response) => if(response.error) - StatusMessage.display 'error', response.error.message + $timeout -> StatusMessage.display 'error', response.error.message console.error(JSON.stringify(response.error)) else secrets.token = response.paymentMethod.id From 59eb91c7c88200e9e5cb3b7628637cc90a632398 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 29 Nov 2021 10:18:06 +0100 Subject: [PATCH 7/7] Remove id "card-element" as well --- .../admin/payments/directives/stripe_elements.js.coffee | 6 +++--- 1 file changed, 3 insertions(+), 3 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 fbdc2ac2da..cfe658bacf 100644 --- a/app/assets/javascripts/admin/payments/directives/stripe_elements.js.coffee +++ b/app/assets/javascripts/admin/payments/directives/stripe_elements.js.coffee @@ -1,9 +1,9 @@ angular.module('admin.payments').directive "stripeElements", ($injector, AdminStripeElements) -> restrict: 'E' - template: "