Added Stripe response handler and error handling js

Author: rycz

saasapp/Requirements.txt

@@ -6,7 +6,7 @@ Memberships
 
 Stripe Integration
 * Users should have a Stripe customer token in the users table.
-* Javascript should prevent Pro form from submitting, when user fills it out,
+* Javascript should prevent Pro form from submitting, after user fills it out,
 and should send card info to Stripe. Stripe will return with a card token.
 * Javascript should send user fields and card token to our rails app. Rails app
 should validate the user fields. Rails app will note whether plan 1 or plan 2.

saasapp/app/assets/javascripts/users.js

@@ -13,24 +13,60 @@ $(document).on('turbolinks:load', function(){
   submitBtn.click(function(event){
     // prevent default submission behavior.
     event.preventDefault();
+    submitBtn.val("Processing").prop('disabled', true);
 
     // Collect the credit card fields.
     var ccNum = $('#card_number').val(),
         cvcNum = $('#card_code').val(),
         expMonth = $('#card_month').val(),
         expYear = $('#card_year').val();
 
-    // Send the card info to Stripe.
-    Stripe.createToken({
-      number: ccNum,
-      cvc: cvcNum,
-      exp_month: expMonth,
-      exp_year: expYear
-    }, stripeResponseHandler);
+    // Use Stripe JS library to check for card errors.
+    var error = false;
+    
+    // Validate card number.
+    if (!Stripe.card.validateCardNumber(ccNum)) {
+      error = true;
+      alert('The credit card number appears to be invalid.');
+    }
+    
+    // Validate CVC number.
+    if (!Stripe.card.validateCVC(cvcNum)) {
+      error = true;
+      alert('The CVC number appears to be invalid.');
+    }
+    
+    // Validate expiration date.
+    if (!Stripe.card.validateExpiry(expMonth, expYear)) {
+      error = true;
+      alert('The expiration date appears to be invalid.');
+    }
+    
+    if (error) {
+      // If there are card errors, don't send to Stripe.
+      submitBtn.prop('disabled', false).val("Sign Up");
+    } else {
+      // Send the card info to Stripe.
+      Stripe.createToken({
+        number: ccNum,
+        cvc: cvcNum,
+        exp_month: expMonth,
+        exp_year: expYear
+      }, stripeResponseHandler);
+    }
+    
+    return false;
   });
-
 
   // Stripe will return a card token.
-  // Inject card token as hidden field into form.
-  // Submit form to our Rails app.
+  function stripeResponseHandler(status, response) {
+    // Get the token from the response.
+    var token = response.id;
+    
+    // Inject card token as hidden field into form.
+    theForm.append( $('<input type="hidden" name="user[stripe_card_token]">').val(token) );
+    
+    // Submit form to our Rails app.
+    theForm.get(0).submit();
+  }
 });