Automatically select the customer's default card in the checkout

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

@@ -9,6 +9,10 @@ Darkswarm.controller "PaymentCtrl", ($scope, $timeout, savedCreditCards, Dates)
   $scope.secrets.card_month = "1"
   $scope.secrets.card_year = moment().year()
 
+  for card in (savedCreditCards || []) when card.is_default
+    $scope.secrets.selected_card = card.id
+    break
+
   $scope.summary = ->
     [$scope.Checkout.paymentMethod()?.name]
 

spec/features/consumer/shopping/checkout_spec.rb

@@ -199,10 +199,9 @@ feature "As a consumer I want to check out my cart", js: true, retry: 3 do
           # shows the saved credit card dropdown
           expect(page).to have_content I18n.t("spree.checkout.payment.stripe.used_saved_card")
 
-          # removes the input fields when a saved card is selected"
-          expect(page).to have_selector "#card-element.StripeElement"
-          select "Visa x-1111 Exp:01/2025", from: "selected_card"
+          # default card is selected, form element is not shown
           expect(page).to_not have_selector "#card-element.StripeElement"
+          expect(page).to have_select 'selected_card', selected: "Visa x-1111 Exp:01/2025"
 
           # allows checkout
           place_order

spec/javascripts/unit/darkswarm/controllers/checkout/payment_controller_spec.js.coffee

@@ -0,0 +1,17 @@
+describe "PaymentCtrl", ->
+  ctrl = null
+  scope = null
+  card1 = { id: 1, is_default: false }
+  card2 = { id: 3, is_default: true }
+  cards = [card1, card2]
+
+  beforeEach ->
+    module("Darkswarm")
+    angular.module('Darkswarm').value('savedCreditCards', cards)
+    inject ($controller, $rootScope) ->
+      scope = $rootScope.$new()
+      scope.secrets = {}
+      ctrl = $controller 'PaymentCtrl', {$scope: scope}
+
+  it "sets the default card id as the selected_card", ->
+    expect(scope.secrets.selected_card).toEqual card2.id