diff --git a/src/carts/urls.py b/src/carts/urls.py
index b45a1ea..5532c27 100644
--- a/src/carts/urls.py
+++ b/src/carts/urls.py
@@ -12,5 +12,4 @@
     url(r'^checkout/success/$', checkout_done_view, name='success'),
     url(r'^checkout/$', checkout_home, name='checkout'),
     url(r'^update/$', cart_update, name='update'),
-]
-
+]
\ No newline at end of file
diff --git a/src/db.sqlite3 b/src/db.sqlite3
index 3ca1c14..96ac765 100644
Binary files a/src/db.sqlite3 and b/src/db.sqlite3 differ
diff --git a/src/static_my_proj/js/ecommerce.main.js b/src/static_my_proj/js/ecommerce.main.js
index 0776ad2..453c944 100644
--- a/src/static_my_proj/js/ecommerce.main.js
+++ b/src/static_my_proj/js/ecommerce.main.js
@@ -71,23 +71,99 @@ card.addEventListener('change', function(event) {
 });
 
 // Handle form submission
-var form = document.getElementById('payment-form');
-form.addEventListener('submit', function(event) {
+// var form = document.getElementById('payment-form');
+// form.addEventListener('submit', function(event) {
+//   event.preventDefault();
+//   // get the btn
+//   // display new btn ui
+//   var loadTime = 1500
+//   var errorHtml = "<i class='fa fa-warning'></i> An error occured"
+//   var errorClasses = "btn btn-danger disabled my-3"
+//   var loadingHtml = "<i class='fa fa-spin fa-spinner'></i> Loading..."
+//   var loadingClasses = "btn btn-success disabled my-3"
+
+//   stripe.createToken(card).then(function(result) {
+//     if (result.error) {
+//       // Inform the user if there was an error
+//       var errorElement = document.getElementById('card-errors');
+//       errorElement.textContent = result.error.message;
+//     } else {
+//       // Send the token to your server
+//       stripeTokenHandler(nextUrl, result.token);
+//     }
+//   });
+// });
+
+var form = $('#payment-form');
+var btnLoad = form.find(".btn-load")
+var btnLoadDefaultHtml = btnLoad.html()
+var btnLoadDefaultClasses = btnLoad.attr("class")
+
+form.on('submit', function(event) {
   event.preventDefault();
+  // get the btn
+  // display new btn ui
+  var $this = $(this)
+  // btnLoad = $this.find('.btn-load')
+  btnLoad.blur()
+  var loadTime = 1500
+  var currentTimeout;
+  var errorHtml = "<i class='fa fa-warning'></i> An error occured"
+  var errorClasses = "btn btn-danger disabled my-3"
+  var loadingHtml = "<i class='fa fa-spin fa-spinner'></i> Loading..."
+  var loadingClasses = "btn btn-success disabled my-3"
 
   stripe.createToken(card).then(function(result) {
     if (result.error) {
       // Inform the user if there was an error
-      var errorElement = document.getElementById('card-errors');
+      var errorElement = $('#card-errors');
       errorElement.textContent = result.error.message;
+      currentTimeout = displayBtnStatus(
+                            btnLoad, 
+                            errorHtml, 
+                            errorClasses, 
+                            1000, 
+                            currentTimeout
+                        )
+
+
     } else {
       // Send the token to your server
+      currentTimeout = displayBtnStatus(
+                            btnLoad, 
+                            loadingHtml, 
+                            loadingClasses, 
+                            10000, 
+                            currentTimeout
+                        )
+
       stripeTokenHandler(nextUrl, result.token);
+
     }
   });
 });
 
 
+function displayBtnStatus(element, newHtml, newClasses, loadTime, timeout){
+    // if (timeout){
+    //   clearTimeout(timeout)
+    // }
+    if (!loadTime){
+      loadTime = 1500
+    }
+    //var defaultHtml = element.html()
+    //var defaultClasses = element.attr("class")
+    element.html(newHtml)
+    element.removeClass(btnLoadDefaultClasses)
+    element.addClass(newClasses)
+    return setTimeout(function(){
+        element.html(btnLoadDefaultHtml)
+        element.removeClass(newClasses)
+        element.addClass(btnLoadDefaultClasses)
+    }, loadTime)
+}
+
+
 function redirectToNext(nextPath, timeoffset) {
     // body...
     if (nextPath){
@@ -118,11 +194,16 @@ function stripeTokenHandler(nextUrl, token){
             } else {
                 alert(succesMsg)
             }
+            btnLoad.html(btnLoadDefaultHtml)
+            btnLoad.attr('class', btnLoadDefaultClasses)
             redirectToNext(nextUrl, 1500)
             
         },
         error: function(error){
-            console.log(error)
+            // console.log(error)
+            $.alert({title: "An error occured", content:"Please try adding your card again."})
+            btnLoad.html(btnLoadDefaultHtml)
+            btnLoad.attr('class', btnLoadDefaultClasses)
         }
     })
 }
diff --git a/src/templates/base/js_templates.html b/src/templates/base/js_templates.html
index f539f06..59d142d 100644
--- a/src/templates/base/js_templates.html
+++ b/src/templates/base/js_templates.html
@@ -14,7 +14,7 @@
     <div id="card-errors" role="alert"></div>
   </div>
 
-  <button class='btn btn-primary my-3'>{{:btnTitle }}</button>
+  <button class='btn btn-primary my-3 btn-load'>{{:btnTitle }}</button>
 
     </form>
 
diff --git a/static_cdn/static_root/js/ecommerce.main.js b/static_cdn/static_root/js/ecommerce.main.js
index 0776ad2..ef2758f 100644
--- a/static_cdn/static_root/js/ecommerce.main.js
+++ b/static_cdn/static_root/js/ecommerce.main.js
@@ -71,23 +71,99 @@ card.addEventListener('change', function(event) {
 });
 
 // Handle form submission
-var form = document.getElementById('payment-form');
-form.addEventListener('submit', function(event) {
+// var form = document.getElementById('payment-form');
+// form.addEventListener('submit', function(event) {
+//   event.preventDefault();
+//   // get the btn
+//   // display new btn ui
+//   var loadTime = 1500
+//   var errorHtml = "<i class='fa fa-warning'></i> An error occured"
+//   var errorClasses = "btn btn-danger disabled my-3"
+//   var loadingHtml = "<i class='fa fa-spin fa-spinner'></i> Loading..."
+//   var loadingClasses = "btn btn-success disabled my-3"
+
+//   stripe.createToken(card).then(function(result) {
+//     if (result.error) {
+//       // Inform the user if there was an error
+//       var errorElement = document.getElementById('card-errors');
+//       errorElement.textContent = result.error.message;
+//     } else {
+//       // Send the token to your server
+//       stripeTokenHandler(nextUrl, result.token);
+//     }
+//   });
+// });
+
+var form = $('#payment-form');
+var btnLoad = form.find(".btn-load")
+var btnLoadDefaultHtml = btnLoad.html()
+var btnLoadDefaultClasses = btnLoad.attr("class")
+
+form.on('submit', function(event) {
   event.preventDefault();
+  // get the btn
+  // display new btn ui
+  var $this = $(this)
+  // btnLoad = $this.find('.btn-load')
+  btnLoad.blur()
+  var loadTime = 1500
+  var currentTimeout;
+  var errorHtml = "<i class='fa fa-warning'></i> An error occured"
+  var errorClasses = "btn btn-danger disabled my-3"
+  var loadingHtml = "<i class='fa fa-spin fa-spinner'></i> Loading..."
+  var loadingClasses = "btn btn-success disabled my-3"
 
   stripe.createToken(card).then(function(result) {
     if (result.error) {
       // Inform the user if there was an error
-      var errorElement = document.getElementById('card-errors');
+      var errorElement = $('#card-errors');
       errorElement.textContent = result.error.message;
+      currentTimeout = displayBtnStatus(
+                            btnLoad, 
+                            errorHtml, 
+                            errorClasses, 
+                            1000, 
+                            currentTimeout
+                        )
+
+
     } else {
       // Send the token to your server
+      currentTimeout = displayBtnStatus(
+                            btnLoad, 
+                            loadingHtml, 
+                            loadingClasses, 
+                            1000, 
+                            currentTimeout
+                        )
+
       stripeTokenHandler(nextUrl, result.token);
+
     }
   });
 });
 
 
+function displayBtnStatus(element, newHtml, newClasses, loadTime, timeout){
+    // if (timeout){
+    //   clearTimeout(timeout)
+    // }
+    if (!loadTime){
+      loadTime = 1500
+    }
+    //var defaultHtml = element.html()
+    //var defaultClasses = element.attr("class")
+    element.html(newHtml)
+    element.removeClass(btnLoadDefaultClasses)
+    element.addClass(newClasses)
+    return setTimeout(function(){
+        element.html(btnLoadDefaultHtml)
+        element.removeClass(newClasses)
+        element.addClass(btnLoadDefaultClasses)
+    }, loadTime)
+}
+
+
 function redirectToNext(nextPath, timeoffset) {
     // body...
     if (nextPath){
@@ -118,11 +194,16 @@ function stripeTokenHandler(nextUrl, token){
             } else {
                 alert(succesMsg)
             }
+            btnLoad.html(btnLoadDefaultHtml)
+            btnLoad.attr('class', btnLoadDefaultClasses)
             redirectToNext(nextUrl, 1500)
             
         },
         error: function(error){
             console.log(error)
+            $.alert({title: "An error occured", content:"Please try adding your card again."})
+            btnLoad.html(btnLoadDefaultHtml)
+            btnLoad.attr('class', btnLoadDefaultClasses)
         }
     })
 }