VRFS-2805 : Use jquery.payment to make the credit card and verification more user-friendly. Also use jquery.payment for validation.

web/Gemfile

@@ -56,6 +56,7 @@ gem 'aasm', '3.0.16'
 gem 'carrierwave', '0.9.0'
 gem 'carrierwave_direct'
 gem 'fog'
+gem 'jquery-payment-rails'
 gem 'haml-rails'
 gem 'unf' #optional fog dependency
 gem 'devise', '3.3.0' #3.4.0 causes uninitialized constant ActionController::Metal (NameError)

web/app/assets/javascripts/application.js

@@ -35,6 +35,7 @@
 //= require jquery.browser
 //= require jquery.custom-protocol
 //= require jquery.exists
+//= require jquery.payment
 //= require jstz
 //= require class
 //= require AAC_underscore

web/app/assets/javascripts/order.js

@@ -36,6 +36,7 @@
     function beforeShow() {
       beforeShowPaymentInfo();
       resetJamTrackDownloadInfo();
+
     }
 
     function beforeShowPaymentInfo() {
@@ -115,6 +116,7 @@
       purchasedJamTrackIterator = 0;
     }
 
+    // TODO: Refactor: this function is long and fraught with many return points.  
     function next(e) {
       e.preventDefault();
       $("#order_error").addClass("hidden")
@@ -308,10 +310,8 @@
         $paymentMethod.find('#divCardName .error-text').remove();
         $paymentMethod.find('#divCardName').addClass("error");
         $paymentMethod.find('#card-name').after("<ul class='error-text'><li>Card Name is required</li></ul>");
-
         return false;
-      }
-      else {
+      } else {
         $paymentMethod.find('#divCardName').removeClass("error");
       }
 
@@ -319,21 +319,37 @@
         $paymentMethod.find('#divCardNumber .error-text').remove();
         $paymentMethod.find('#divCardNumber').addClass("error");
         $paymentMethod.find('#card-number').after("<ul class='error-text'><li>Card Number is required</li></ul>");
-
         return false;
-      }
-      else {
+      } else if (!$.payment.validateCardNumber(card_number)) {     
+        $paymentMethod.find('#divCardNumber .error-text').remove();
+        $paymentMethod.find('#divCardNumber').addClass("error");
+        $paymentMethod.find('#card-number').after("<ul class='error-text'><li>Card Number is not valid</li></ul>");      
+        return false;
+      } else {
         $paymentMethod.find('#divCardNumber').removeClass("error");
       }
 
+      if (!$.payment.validateCardExpiry(card_month, card_year)) {     
+        $paymentMethod.find('#divCardExpiry .error-text').remove();
+        $paymentMethod.find('#divCardExpiry').addClass("error");
+        $paymentMethod.find('#card-expiry').after("<ul class='error-text'><li>Card Number is not valid</li></ul>");      
+      } else {
+        $paymentMethod.find('#divCardExpiry').removeClass("error");
+      }
+
       if (!card_verify) {
         $paymentMethod.find('#divCardVerify .error-text').remove();
         $paymentMethod.find('#divCardVerify').addClass("error");
-        $paymentMethod.find('#card_verify').after("<ul class='error-text'><li>Card Verification Value is required</li></ul>");
+        $paymentMethod.find('#card-verify').after("<ul class='error-text'><li>Card Verification Value is required</li></ul>");
 
         return false;
-      }
-      else {
+      } else if(!$.payment.validateCardCVC(card_verify)) {
+        $paymentMethod.find('#divCardVerify .error-text').remove();
+        $paymentMethod.find('#divCardVerify').addClass("error");
+        $paymentMethod.find('#card-verify').after("<ul class='error-text'><li>Card Verification Value is not valid.</li></ul>");
+
+        return false;
+      } else {
         $paymentMethod.find('#divCardVerify').removeClass("error");
       }
 
@@ -606,6 +622,10 @@
         radioClass: 'iradio_minimal',
         inheritClass: true
       });
+
+      // Use jquery.payment to limit characters and length:
+      $paymentMethod.find("#card-number").payment('formatCardNumber');
+      $paymentMethod.find("#card-verify").payment('formatCardCVC');
     }
 
     function initialize() {

web/app/views/clients/_order.html.slim

@@ -71,19 +71,20 @@ div layout="screen" layout-id="order" id="orderScreen" class="screen secondary"
                     input type="text" id="card-name"
                   .clearall
                 #divCardNumber
-                  .card-label
+                  .card-label.mt10
                     label for="card-number" Card Number:
-                  .card-value
+                  .card-value.mt10
                     input type="text" id="card-number"
                   .clearall
-                .card-label Expiration Date:
-                .card-value
-                  = date_select("card", "expire-date", use_two_digit_numbers: true, discard_day: true, :start_year => Time.now.year, :end_year => Time.now.year + 18, :order => [:month, :day, :year], :default => -25.years.from_now, :html=>{:class => "account-profile-birthdate"} )
-                .clearall
+                #divCardExpiry
+                  .card-label.mt10 Expiration Date:
+                  .card-value.mt10
+                    =date_select("card", "expire-date", use_two_digit_numbers: true, discard_day: true, :start_year => Time.now.year, :end_year => Time.now.year + 18, :order => [:month, :day, :year], :default => -25.years.from_now, :html=>{:class => "account-profile-birthdate", :id=>"card-expiry"} )
+                  .clearall
                 #divCardVerify
-                  .card-label
+                  .card-label.mt10
                     label for="card-verify" Verification Value:
-                  .card-value
+                  .card-value.mt10
                     input type="text" id="card-verify"
                   .clearall
                 .card-label.mt15