Move StripeElements element to an AngularJS directive, mount from there

app/assets/javascripts/darkswarm/controllers/checkout/payment_controller.js.coffee

@@ -1,4 +1,4 @@
-Darkswarm.controller "PaymentCtrl", ($scope, $timeout, savedCreditCards, StripeElements, Dates) ->
+Darkswarm.controller "PaymentCtrl", ($scope, $timeout, savedCreditCards, Dates) ->
   angular.extend(this, new FieldsetMixin($scope))
 
   $scope.savedCreditCards = savedCreditCards
@@ -12,7 +12,4 @@ Darkswarm.controller "PaymentCtrl", ($scope, $timeout, savedCreditCards, StripeE
   $scope.summary = ->
     [$scope.Checkout.paymentMethod()?.name]
 
-  $scope.mountElements = ->
-    StripeElements.mountElements()
-
   $timeout $scope.onTimeout

app/assets/javascripts/darkswarm/controllers/credit_cards_controller.js.coffee

@@ -1,4 +1,4 @@
-Darkswarm.controller "CreditCardsCtrl", ($scope, $timeout, CreditCard, CreditCards, StripeElements, Dates) ->
+Darkswarm.controller "CreditCardsCtrl", ($scope, $timeout, CreditCard, CreditCards, Dates) ->
   angular.extend(this, new FieldsetMixin($scope))
   $scope.savedCreditCards = CreditCards.saved
   $scope.CreditCard = CreditCard
@@ -8,6 +8,3 @@ Darkswarm.controller "CreditCardsCtrl", ($scope, $timeout, CreditCard, CreditCar
 
   $scope.allow_name_change = true
   $scope.disable_fields = false
-  
-  $scope.mountElements = ->
-    StripeElements.mountElements()

app/assets/javascripts/darkswarm/directives/stripe_elements.js.coffee

@@ -0,0 +1,27 @@
+Darkswarm.directive "stripeElements", ($injector, StripeElements) ->
+  restrict: 'E'
+  template: "<label for='card-element'>\
+             <div id='card-element'></div>\
+             <div id='card-errors' class='error'></div>\
+             </label>"
+
+  link: (scope, elem, attr)->
+    if $injector.has('stripeObject')
+      stripe = $injector.get('stripeObject')
+
+      card = stripe.elements().create('card', {hidePostalCode: false})
+      card.mount('#card-element')
+
+      # 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')
+        if event.error
+          displayError.textContent = event.error.message
+        else
+          displayError.textContent = ''
+        return
+
+      StripeElements.stripe = stripe
+      StripeElements.card = card

app/assets/javascripts/darkswarm/services/stripe_elements.js.coffee

@@ -1,30 +1,19 @@
-Darkswarm.factory 'StripeElements', ($rootScope, Loading, RailsFlashLoader, stripeObject) ->
+Darkswarm.factory 'StripeElements', ($rootScope, Loading, RailsFlashLoader) ->
   new class StripeElements
-    # This is the global Stripe object created by Stripe.js [v3+], included in the _stripe partial
-    stripe = stripeObject
     # TODO: add locale here for translations of error messages etc. from Stripe
-    elements = stripe.elements()
-    card = elements.create('card', {hidePostalCode: false})
 
-    mountElements: ->
-      card.mount('#card-element')
-      # 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')
-        if event.error
-          displayError.textContent = event.error.message
-        else
-          displayError.textContent = ''
-        return
+    # These are both set from the StripeElements directive
+    stripe: null
+    card: null
 
     # New Stripe Elements method
     requestToken: (secrets, submit, loading_message = t("processing_payment")) ->
+      return unless @stripe? && @card?
+
       Loading.message = loading_message
       cardData = @makeCardData(secrets)
 
-      stripe.createToken(card, cardData).then (response) =>
+      @stripe.createToken(@card, cardData).then (response) =>
         if(response.error)
           $rootScope.$apply ->
             Loading.clear()

app/views/checkout/payment/_stripe.html.haml

@@ -1,5 +0,0 @@
-%label{:for => "card-element"}
-    / a Stripe Element will be inserted here.
-    #card-element{"ng-init" => " mountElements() "}
-    / Used to display Element errors
-    #card-errors.error

app/views/spree/checkout/payment/_stripe.html.haml

@@ -8,7 +8,7 @@
       = t('.or_enter_new_card')
 
 %div{ ng: { if: '!secrets.selected_card' } }
-  = render "/checkout/payment/stripe"
+  %stripe-elements
 
   .row
     .small-12.columns.text-right

app/views/spree/users/_new_card_form.html.haml

@@ -3,7 +3,7 @@
     .small-12.columns
       %label
         = t(:card_details)
-      = render '/checkout/payment/stripe'
+      %stripe-elements
   .row
     .small-6.columns
       %label