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]