Improved error handling when using wrong cart input

Jquerified form sending

Author: ljl

README.md

@@ -19,6 +19,10 @@ Test cards can be located here: https://stripe.com/docs/testing
 When a order is complete, it can be viewed in admin with shipping details and completion status.
 
 ##Changelog
+### [1.0.5] - 2016-08-24
+#### Added
+- Improved error handling when using wrong card input
+
 ### [1.0.4] - 2016-08-19
 #### Removed
 - Customer carts have been temporary disabled due to some inconsistent errors.

gradle.properties

@@ -2,7 +2,7 @@
 # Project settings
 #
 group = no.iskald
-version = 1.0.4
+version = 1.0.5
 projectName = store
 appName = no.iskald.payup
 displayName = PayUp! Store

package.json

@@ -1,6 +1,6 @@
 {
   "name": "payup",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "",
   "scripts": {
     "build": "./gradlew build",

src/main/resources/site/services/checkout/checkout.html

@@ -6,27 +6,28 @@
 
     function stripeResponseHandler(status, response) {
         if (status != 200) {
-            document.getElementById('payment-result').innerHTML = response;
+            console.error(response);
+            document.getElementById('payment-result').innerHTML = response.error.message;
         } else {
             var paymentForm = document.getElementById('payment-form');
-            var formData = new FormData(paymentForm);
-            formData.append('token', response.id);
-            var xhr = new XMLHttpRequest();
-            xhr.open('POST', completeCheckoutUrl, true);
-            xhr.send(formData);
-            xhr.onreadystatechange = function (e) {
-                var DONE = 4;
-                if (xhr.readyState === DONE) {
-                    if (xhr.status === 200) {
-                        document.querySelector('.payup-payment').style = "display:none;";
-                        document.getElementById('payment-result').innerHTML = e.target.response;
-                    }
-                    if (xhr.status === 500) {
-                        document.getElementById('payment-result').innerHTML = "An error occured. Please try again";
-                    }
+            var formData = $(paymentForm).serializeArray();
+            formData.push({name: "token", value: response.id});
+            $.ajax({
+                type: "POST",
+                url: completeCheckoutUrl,
+                data: $.param(formData),
+                success: function(data) {
+                    $('.payup-payment').hide();
+                    $('#payment-result').html(data);
+                },
+                error: function(data) {
+                    console.error(data);
+                    $('#payment-result').html("An error occured. Please try again");
+                },
+                complete: function(data) {
+                    refreshCart();
                 }
-                refreshCart();
-            };
+            });
         }
     }