refactor payment process - second step

snippets/scales.html

@@ -69,7 +69,10 @@ Device ID: <span id="deveui"></span>
         </div>
         
         <!-- We'll put the error messages in this element -->
-        <div id="card-errors" role="alert"></div>
+        <article class="message is-danger has-margin-top-20" id="card-errors-article" role="alert">
+          <div class="message-body" id="card-errors">
+          </div>
+        </article>
       </div>
     </section>
     <footer class="modal-card-foot">
@@ -350,7 +353,7 @@ $("#modal-save").click(function() {
 // Set your publishable key: remember to change this to your live publishable key in production
 // See your keys here: https://dashboard.stripe.com/account/apikeys
 var stripe = Stripe('pk_test_YkSGqH3Tk9WKK9HrlY63GhAg');
-var elements = stripe.elements();
+var elements = stripe.elements({ locale: "de" });
 
 // Set up Stripe.js and Elements to use in checkout form
 var style = {
@@ -361,47 +364,20 @@ var style = {
 
 var card = elements.create("card", { style: style });
 card.mount("#card-element");
+$("#card-errors-article").hide();
 
 
 card.addEventListener('change', ({error}) => {
-  const displayError = document.getElementById('card-errors');
   if (error) {
-    displayError.textContent = error.message;
+    $("#card-errors").text(error.message);
+    $("#card-errors-article").show();
   } else {
-    displayError.textContent = '';
+    $("#card-errors").text("");
+    $("#card-errors-article").hide();
   }
 });
 
-
-function GetClientSecret() {
-  var result = "";
-  $.ajax({
-    async: false,
-    url: "getstripepaymentintent",
-    type: "get", //send it through get method
-    dataType: "json",
-    data: { 
-      charge_data: $("#charge_data").html()
-    },
-    success: function(response) {
-      console.log('pay success');
-      console.log(response.stripesessionid);
-      console.log('rc: '+response.rc);
-      if (response.rc == 0) {
-        result = response.stripeclientsecret;
-      }
-    },
-    error: function(xhr) {
-      console.log('getstripepaymentintent error');
-      //Do Something to handle error
-    }
-  });
-
-  return result;
-}
-
-$('#cart-pay').on('click', function(ev) {
-  var clientSecret = GetClientSecret();
+function ConfirmPayment(clientSecret) {
   stripe.confirmCardPayment(clientSecret, {
     payment_method: {
       card: card,
@@ -413,6 +389,10 @@ $('#cart-pay').on('click', function(ev) {
     if (result.error) {
       // Show error to your customer (e.g., insufficient funds)
       console.log(result.error.message);
+      $('#card-errors').text(result.error.message);
+      $('#card-errors-article').show();
+      //Do Something to handle error
+      EndPaymentProgress();
     } else {
       // The payment has been processed!
       if (result.paymentIntent.status === 'succeeded') {
@@ -422,10 +402,51 @@ $('#cart-pay').on('click', function(ev) {
         // payment_intent.succeeded event that handles any business critical
         // post-payment actions.
         console.log("Payment succeeded!!!");
+        $('#card-errors').text("");
+        $('#card-errors-article').hide();
         $("#cart").removeClass("is-active");
+        EndPaymentProgress();
       }
     }
   });
+}
+
+function StartPaymentProgress() {
+  $("#cart-pay").attr("disabled", true).addClass("is-loading");
+  $("#cart-close").attr("disabled", true);
+}
+
+function EndPaymentProgress() {
+  $("#cart-pay").attr("disabled", false).removeClass("is-loading");
+  $("#cart-close").attr("disabled", false);
+}
+
+function PayMe() {
+  $.ajax({
+    url: "getstripepaymentintent",
+    type: "get", //send it through get method
+    dataType: "json",
+    data: { 
+      charge_data: $("#charge_data").html()
+    },
+    success: function(response) {
+      console.log('pay success');
+      console.log('rc: '+response.rc);
+      if (response.rc == 0) {
+        ConfirmPayment(response.stripeclientsecret);
+      }
+    },
+    error: function(xhr) {
+      console.log('getstripepaymentintent error');
+      //Do Something to handle error
+      EndPaymentProgress();
+    }
+  });
+}
+
+$('#cart-pay').on('click', function(ev) {
+  StartPaymentProgress();
+  PayMe();
 });
 </script>