refactor payment process - first step

snippets/checkout.html

@@ -0,0 +1,102 @@
+{{define "header_additions"}}
+    <script src="https://js.stripe.com/v3/"></script>
+{{end}}
+{{define "body_content"}}
+<p class="title is-4">Checkout</p>
+
+<p id="charge_data" hidden>0002CC01000003F7:2</p>
+
+<div id="card-element">
+  <!-- Elements will create input elements here -->
+</div>
+
+<!-- We'll put the error messages in this element -->
+<div id="card-errors" role="alert"></div>
+
+<button id="submit">Pay</button>
+
+<script type="text/javascript">
+  // 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();
+
+
+// Set up Stripe.js and Elements to use in checkout form
+var style = {
+  base: {
+    color: "#32325d",
+  }
+};
+
+var card = elements.create("card", { style: style });
+card.mount("#card-element");
+
+
+card.addEventListener('change', ({error}) => {
+  const displayError = document.getElementById('card-errors');
+  if (error) {
+    displayError.textContent = error.message;
+  } else {
+    displayError.textContent = '';
+  }
+});
+
+
+var submitButton = document.getElementById('submit');
+
+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;
+}
+
+submitButton.addEventListener('click', function(ev) {
+  var clientSecret = GetClientSecret();
+  stripe.confirmCardPayment(clientSecret, {
+    payment_method: {
+      card: card,
+      billing_details: {
+        name: 'Jenny Rosen'
+      }
+    }
+  }).then(function(result) {
+    if (result.error) {
+      // Show error to your customer (e.g., insufficient funds)
+      console.log(result.error.message);
+    } else {
+      // The payment has been processed!
+      if (result.paymentIntent.status === 'succeeded') {
+        // Show a success message to your customer
+        // There's a risk of the customer closing the window before callback
+        // execution. Set up a webhook or plugin to listen for the
+        // payment_intent.succeeded event that handles any business critical
+        // post-payment actions.
+        alert("Payment succeeded!!!");
+      }
+    }
+  });
+});
+</script>
+{{end}}

snippets/scales.html

@@ -1,3 +1,6 @@
+{{define "header_additions"}}
+    <script src="https://js.stripe.com/v3/"></script>
+{{end}}
 {{define "body_content"}}
 {{ if ne .UserName "" }}
 
@@ -56,10 +59,21 @@ Device ID: <span id="deveui"></span>
       <p class="modal-card-title">Abo verl&auml;ngern</p>
     </header>
     <p id="charge_data" hidden>0</p>
-    <section class="modal-card-body" id="abos_verlaengern">
-      <!-- Content ... -->
+    <section class="modal-card-body">
+      <div id="abos_verlaengern">
+        <!-- Content ... -->
+      </div>
+      <div>
+        <div class="has-margin-top-20" id="card-element">
+          <!-- Elements will create input elements here -->
+        </div>
+        
+        <!-- We'll put the error messages in this element -->
+        <div id="card-errors" role="alert"></div>
+      </div>
     </section>
     <footer class="modal-card-foot">
+
       <button id="cart-pay" class="button is-success">Bezahlen</button>
       <button id="cart-close" class="button">Cancel</button>
     </footer>
@@ -185,7 +199,6 @@ $(".show-modal").click(function() {
 });
 
 $("#cart-close").click(function() {
-   console.log("blabla");
    $("#cart").removeClass("is-active");
 });
 
@@ -334,20 +347,37 @@ $("#modal-save").click(function() {
 
 });
 
-</script>
-
-<script src="https://js.stripe.com/v3/"></script>
-
-<script>
-
+// 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();
 
-$("#cart-pay").click(function() {
-   console.log("hoopla");
-  $("#cart").removeClass("is-active");
+// Set up Stripe.js and Elements to use in checkout form
+var style = {
+  base: {
+    color: "#32325d",
+  }
+};
 
+var card = elements.create("card", { style: style });
+card.mount("#card-element");
+
+
+card.addEventListener('change', ({error}) => {
+  const displayError = document.getElementById('card-errors');
+  if (error) {
+    displayError.textContent = error.message;
+  } else {
+    displayError.textContent = '';
+  }
+});
+
+
+function GetClientSecret() {
+  var result = "";
   $.ajax({
-    url: "getstripesession",
+    async: false,
+    url: "getstripepaymentintent",
     type: "get", //send it through get method
     dataType: "json",
     data: { 
@@ -358,23 +388,44 @@ $("#cart-pay").click(function() {
       console.log(response.stripesessionid);
       console.log('rc: '+response.rc);
       if (response.rc == 0) {
-        console.log('redirectToCheckout');
-        stripe.redirectToCheckout({
-          sessionId: response.stripesessionid
-        }).then(function (result) {
-          // If `redirectToCheckout` fails due to a browser or network
-          // error, display the localized error message to your customer
-          // using `result.error.message`.
-        });
+        result = response.stripeclientsecret;
       }
     },
     error: function(xhr) {
-      console.log('getstripesession error');
+      console.log('getstripepaymentintent error');
       //Do Something to handle error
     }
   });
 
+  return result;
+}
 
+$('#cart-pay').on('click', function(ev) {
+  var clientSecret = GetClientSecret();
+  stripe.confirmCardPayment(clientSecret, {
+    payment_method: {
+      card: card,
+      billing_details: {
+        name: '{{ .UserName }}'
+      }
+    }
+  }).then(function(result) {
+    if (result.error) {
+      // Show error to your customer (e.g., insufficient funds)
+      console.log(result.error.message);
+    } else {
+      // The payment has been processed!
+      if (result.paymentIntent.status === 'succeeded') {
+        // Show a success message to your customer
+        // There's a risk of the customer closing the window before callback
+        // execution. Set up a webhook or plugin to listen for the
+        // payment_intent.succeeded event that handles any business critical
+        // post-payment actions.
+        console.log("Payment succeeded!!!");
+        $("#cart").removeClass("is-active");
+      }
+    }
+  });
 });
 </script>