From 6e52aa9acdc48c8c9539f3f32641ea74507af4c6 Mon Sep 17 00:00:00 2001
From: Joerg Lehmann <joerg.lehmann@nbit.ch>
Date: Thu, 23 Apr 2020 19:29:08 +0200
Subject: [PATCH] load stripe functions only when needed

---
 snippets/scales.html | 71 +++++++++++++++++++++++++++-----------------
 1 file changed, 44 insertions(+), 27 deletions(-)

diff --git a/snippets/scales.html b/snippets/scales.html
index d155225..5f60bfe 100644
--- a/snippets/scales.html
+++ b/snippets/scales.html
@@ -1,6 +1,3 @@
-{{define "header_additions"}}
-    <script src="https://js.stripe.com/v3/"></script>
-{{end}}
 {{define "body_content"}}
 {{ if ne .UserName "" }}
 <div id="modal" class="modal">
@@ -281,6 +278,7 @@ function add_years(dt,n)
 
 $(".abo_pay").click(function() {
   console.log("pay...");
+  loadStripeLibrary();
   counter = 0; 
   charge_data = '';
   abo_table = '<table class="table is-bordered is-fullwidth" >';
@@ -390,31 +388,50 @@ $("#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({ locale: "de" });
+function loadStripeLibrary() {
+    $.ajax({
+        url: "https://js.stripe.com/v3/",
+        dataType: "script",
+        async: false,           // <-- This is the key
+        success: function () {
+            // all good...
+            console.log("loadStripeLibrary called...");
+            SetupStripe();
+        },
+        error: function () {
+            throw new Error("Could not load script " + script);
+        }
+    });
+}
 
-// 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-errors-article").hide();
-
-card.addEventListener('change', ({error}) => {
-  if (error) {
-    $("#card-errors").text(error.message);
-    $("#card-errors-article").show();
-  } else {
-    $("#card-errors").text("");
-    $("#card-errors-article").hide();
-  }
-});
+function SetupStripe() {
+  console.log("SetupStripe");
+  // 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
+  stripe = Stripe('pk_test_YkSGqH3Tk9WKK9HrlY63GhAg');
+  elements = stripe.elements({ locale: "de" });
+  
+  // Set up Stripe.js and Elements to use in checkout form
+  style = {
+    base: {
+      color: "#32325d",
+    }
+  };
+  
+  card = elements.create("card", { style: style });
+  card.mount("#card-element");
+  $("#card-errors-article").hide();
+  
+  card.addEventListener('change', ({error}) => {
+    if (error) {
+      $("#card-errors").text(error.message);
+      $("#card-errors-article").show();
+    } else {
+      $("#card-errors").text("");
+      $("#card-errors-article").hide();
+    }
+  });
+}
 
 function ConfirmPayment(clientSecret) {
   stripe.confirmCardPayment(clientSecret, {