Don't add payment forms to checkout DOM unless required

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

@@ -6,7 +6,7 @@ Darkswarm.controller "PaymentCtrl", ($scope, $timeout) ->
     {key: "January", value: "1"},
     {key: "February", value: "2"},
     {key: "March", value: "3"},
-    {key: "April", value: "4"}, 
+    {key: "April", value: "4"},
     {key: "May", value: "5"},
     {key: "June", value: "6"},
     {key: "July", value: "7"},
@@ -20,4 +20,4 @@ Darkswarm.controller "PaymentCtrl", ($scope, $timeout) ->
   $scope.years = [moment().year()..(moment().year()+15)]
   $scope.secrets.card_month = "1"
   $scope.secrets.card_year = moment().year()
-  $timeout $scope.onTimeout 
+  $timeout $scope.onTimeout

app/assets/javascripts/darkswarm/mixins/fieldset_mixin.js.coffee

@@ -1,7 +1,7 @@
 window.FieldsetMixin = ($scope)->
   $scope.next = (event = false)->
     event.preventDefault() if event
-    $scope.show $scope.nextPanel 
+    $scope.show $scope.nextPanel
 
   $scope.onTimeout = ->
     if $scope[$scope.name].$valid
@@ -36,7 +36,6 @@ window.FieldsetMixin = ($scope)->
           when "number"   then "must be number"
           when "email"    then "must be email address"
 
-    #server_errors = $scope.Order.errors[path.replace('order.', '')] 
-    #errors.push server_errors if server_errors? 
-    (errors.filter (error) -> error?).join ", "
-    
+    #server_errors = $scope.Order.errors[path.replace('order.', '')]
+    #errors.push server_errors if server_errors?
+    (errors.filter (error) -> error?).join ", "

app/views/checkout/_form.html.haml

@@ -1,5 +1,5 @@
-= f_form_for current_order, url: main_app.update_checkout_path, 
-  html: {name: "checkout", 
+= f_form_for current_order, url: main_app.update_checkout_path,
+  html: {name: "checkout",
     id: "checkout_form",
     novalidate: true,
     name: "checkout"} do |f|
@@ -10,8 +10,8 @@
     angular.module('Darkswarm').value('order', #{render "checkout/order"})
 
   %div
-    / %h3.text-center.pad-top 
-    /   Checkout from 
+    / %h3.text-center.pad-top
+    /   Checkout from
     /   = current_distributor.name
 
     = render partial: "checkout/details", locals: {f: f}
@@ -19,7 +19,7 @@
     = render partial: "checkout/shipping", locals: {f: f}
     = render partial: "checkout/payment", locals: {f: f}
     %p
-      %button.button.primary{type: :submit, 
+      %button.button.primary{type: :submit,
       "ng-click" => "purchase($event)",
       "ng-disabled" => "checkout.$invalid"}
         Place order now

app/views/checkout/_payment.html.haml

@@ -1,7 +1,7 @@
 %fieldset#payment
   %ng-form{"ng-controller" => "PaymentCtrl", name: "payment"}
 
-    %h5{"ng-class" => "{valid: payment.$valid, dirty: payment.$dirty}"} 
+    %h5{"ng-class" => "{valid: payment.$valid, dirty: payment.$dirty}"}
       %span.right
         %label.label.round.alert.right
           %i.ofn-i_009-close
@@ -14,16 +14,16 @@
       %accordion-heading
         .row
           .small-8.medium-10.columns
-            %em 
+            %em
               %small
                 {{ Checkout.paymentMethod().name }}
           .small-4.medium-2.columns.text-right
             %span.accordion-up
-              %em 
+              %em
                 %small Hide
-              %i.ofn-i_053-point-up 
+              %i.ofn-i_053-point-up
             %span.accordion-down
-              %em 
+              %em
                 %small Expand
               %i.ofn-i_052-point-down
 
@@ -38,7 +38,7 @@
                 "ng-model" => "order.payment_method_id"
               = method.name
 
-        .row{"ng-show" => "order.payment_method_id == #{method.id}"}
+        .row{"ng-if" => "order.payment_method_id == #{method.id}"}
           .small-12.columns
             = render partial: "spree/checkout/payment/#{method.method_type}", :locals => { :payment_method => method }
 

app/views/checkout/edit.html.haml

@@ -1,16 +1,16 @@
-= inject_enterprises 
+= inject_enterprises
 
 .darkswarm
   - content_for :order_cycle_form do
-    
+
     %closing Checkout now
-    %p 
+    %p
       Order ready for
       %strong
         = pickup_time current_order_cycle
 
   = render partial: "shopping_shared/details"
-   
+
   %accordion{"close-others" => "true"}
     %checkout.row{"ng-controller" => "CheckoutCtrl"}
       .small-12.medium-8.large-9.columns