Checkout switched to Stripe Elements from StripeJS

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

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

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

@@ -1,4 +1,4 @@
-Darkswarm.factory 'Checkout', ($injector, CurrentOrder, ShippingMethods, StripeJS, PaymentMethods, $http, Navigation, CurrentHub, RailsFlashLoader, Loading)->
+Darkswarm.factory 'Checkout', ($injector, CurrentOrder, ShippingMethods, StripeElements, PaymentMethods, $http, Navigation, CurrentHub, RailsFlashLoader, Loading)->
   new class Checkout
     errors: {}
     secrets: {}
@@ -6,7 +6,7 @@ Darkswarm.factory 'Checkout', ($injector, CurrentOrder, ShippingMethods, StripeJ
 
     purchase: ->
       if @paymentMethod()?.method_type == 'stripe' && !@secrets.selected_card
-        StripeJS.requestToken(@secrets, @submit)
+        StripeElements.requestToken(@secrets, @submit)
       else
         @submit()
 

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

@@ -0,0 +1,50 @@
+Darkswarm.factory 'StripeElements', ($rootScope, Loading, RailsFlashLoader, stripeObject) ->
+  new class StripeElements
+    # This is the global Stripe object created by Stripe.js [v3+], included in the _stripe partial
+    stripe = stripeObject
+    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
+
+    # New Stripe Elements method
+    requestToken: (secrets, submit, loading_message = t("processing_payment")) ->
+      Loading.message = loading_message
+
+      stripe.createToken(card).then (response) =>
+        if(response.error)
+          $rootScope.$apply ->
+            Loading.clear()
+            RailsFlashLoader.loadFlash({error: t("error") + ": #{response.error.message}"})
+        else
+          console.log(response)
+          secrets.token = response.token.id
+          secrets.cc_type = @mapCC(response.token.card.brand)
+          secrets.card = response.token.card
+          submit()
+
+    mapCC: (ccType) ->
+      if ccType == 'MasterCard'
+        return 'mastercard'
+      else if ccType == 'Visa'
+        return 'visa'
+      else if ccType == 'American Express'
+        return 'amex'
+      else if ccType == 'Discover'
+        return 'discover'
+      else if ccType == 'Diners Club'
+        return 'dinersclub'
+      else if ccType == 'JCB'
+        return 'jcb'
+      return

app/assets/stylesheets/darkswarm/checkout.css.sass

@@ -81,3 +81,6 @@ checkout
         display: inline
       span.accordion-down
         display: none
+
+  .error
+    color: #c82020

app/views/checkout/_payment.html.haml

@@ -1,4 +1,6 @@
 %fieldset#payment
+  :javascript
+    angular.module('Darkswarm').value("stripeObject", Stripe("#{ENV['STRIPE_INSTANCE_PUBLISHABLE_KEY']}"))
   %ng-form{"ng-controller" => "PaymentCtrl", name: "payment"}
 
     %h5{"ng-class" => "{valid: payment.$valid, dirty: payment.$dirty || submitted}"}

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

@@ -0,0 +1,6 @@
+%label{:for => "card-element"}
+    Credit or debit card
+    / 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,12 +8,9 @@
       = t('.or_enter_new_card')
 
 %div{ ng: { if: '!secrets.selected_card' } }
-  = render "spree/checkout/payment/gateway", payment_method: payment_method
+  = render "/checkout/payment/stripe"
 
   .row
     .small-12.columns.text-right
       = check_box_tag 'secrets.save_requested_by_customer'
       = label_tag 'secrets.save_requested_by_customer', t('.remember_this_card')
-
-:javascript
-  Stripe.setPublishableKey("#{ENV['STRIPE_INSTANCE_PUBLISHABLE_KEY']}")