Basic UI for adding credit card details and getting a Stripe token without making a payment

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

@@ -1,4 +1,4 @@
-Darkswarm.controller "PaymentCtrl", ($scope, $timeout, savedCreditCards) ->
+Darkswarm.controller "PaymentCtrl", ($scope, $timeout, savedCreditCards, Dates) ->
   angular.extend(this, new FieldsetMixin($scope))
   defaultCard = [ {id: null, formatted: t("new_credit_card")} ]
   $scope.savedCreditCards = defaultCard.concat savedCreditCards if savedCreditCards
@@ -7,22 +7,9 @@ Darkswarm.controller "PaymentCtrl", ($scope, $timeout, savedCreditCards) ->
 
   $scope.name = "payment"
 
-  $scope.months = [
-    {key: t("january"), value: "1"},
-    {key: t("february"), value: "2"},
-    {key: t("march"), value: "3"},
-    {key: t("april"), value: "4"},
-    {key: t("may"), value: "5"},
-    {key: t("june"), value: "6"},
-    {key: t("july"), value: "7"},
-    {key: t("august"), value: "8"},
-    {key: t("september"), value: "9"},
-    {key: t("october"), value: "10"},
-    {key: t("november"), value: "11"},
-    {key: t("december"), value: "12"},
-  ]
+  $scope.months = Dates.months
 
-  $scope.years = [moment().year()..(moment().year()+15)]
+  $scope.years = Dates.years
   $scope.secrets.card_month = "1"
   $scope.secrets.card_year = moment().year()
 

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

@@ -0,0 +1,25 @@
+Darkswarm.controller "CreditCardsCtrl", ($scope, $timeout, CreditCard, savedCreditCards, StripeJS, Dates, Loading) ->
+  angular.extend(this, new FieldsetMixin($scope))
+  $scope.savedCreditCards = savedCreditCards
+  $scope.CreditCard = CreditCard
+  $scope.allow_name_change = true
+  $scope.disable_fields = false
+
+  $scope.months = Dates.months
+  $scope.years = Dates.years
+
+  $scope.secrets = CreditCard.secrets
+
+
+
+  $scope.storeCard = =>
+    Loading.message = "Saving"
+    CreditCard.requestToken($scope.secrets)
+
+
+
+
+
+    # Need to call Spree::Gateway::StripeConnect#provider.store(creditcard)
+    # creditcard should be formatted as for a payment
+    # The token then needs to be associated with the Customer (in Stripe) - can be done in Ruby.

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

@@ -0,0 +1,16 @@
+Darkswarm.factory 'CreditCard', ($injector, $rootScope, StripeJS, Navigation, $http, RailsFlashLoader, Loading)->
+  new class CreditCard
+    errors: {}
+
+    requestToken: (secrets) ->
+      #$scope.secrets.name = $scope.secrets.first_name + " " + $scope.secrets.last_name
+      secrets.name = @full_name(secrets)
+      StripeJS.requestToken(secrets, @submit)
+
+    submit: =>
+      $rootScope.$apply ->
+        Loading.clear()
+      Navigation.go '/account'
+
+    full_name: (secrets) ->
+      secrets.first_name + " " + secrets.last_name

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

@@ -0,0 +1,18 @@
+Darkswarm.factory "Dates", ->
+  new class Dates
+    months: [
+      {key: t("january"), value: "1"},
+      {key: t("february"), value: "2"},
+      {key: t("march"), value: "3"},
+      {key: t("april"), value: "4"},
+      {key: t("may"), value: "5"},
+      {key: t("june"), value: "6"},
+      {key: t("july"), value: "7"},
+      {key: t("august"), value: "8"},
+      {key: t("september"), value: "9"},
+      {key: t("october"), value: "10"},
+      {key: t("november"), value: "11"},
+      {key: t("december"), value: "12"},
+    ]
+
+    years: [moment().year()..(moment().year()+15)]

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

@@ -1,7 +1,7 @@
 Darkswarm.factory 'StripeJS', ($rootScope, Loading, RailsFlashLoader) ->
   new class StripeJS
-    requestToken: (secrets, submit) ->
-      Loading.message = "Processing Payment..."
+    requestToken: (secrets, submit, loading_message = t("processing_payment")) ->
+      Loading.message = loading_message
       params =
         number: secrets.card_number
         cvc: secrets.card_verification_value
@@ -13,7 +13,7 @@ Darkswarm.factory 'StripeJS', ($rootScope, Loading, RailsFlashLoader) ->
         if response.error
           $rootScope.$apply ->
             Loading.clear()
-            RailsFlashLoader.loadFlash({error: "Error: #{response.error.message}"})
+            RailsFlashLoader.loadFlash({error: t("error") + ": #{response.error.message}"})
         else
           secrets.token = response['id']
           secrets.cc_type = @mapCC(response.card.brand)