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 d9de8a2d54..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,10 +1,12 @@
angular.module('admin.payments').directive "stripeElements", ($injector, AdminStripeElements) ->
restrict: 'E'
- template: ""
-
+ template: "
"
+ scope:
+ selected: "="
+
link: (scope, elem, attr)->
if $injector.has('stripeObject')
stripe = $injector.get('stripeObject')
@@ -18,13 +20,13 @@ 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
# 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
@@ -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/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
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: ""
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..315791bac0 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
@@ -15,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 78e96b2e7d..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
@@ -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
@@ -14,4 +15,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/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]