load stripe functions only when needed

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,19 +388,37 @@ $("#modal-save").click(function() {
 
 });
 
+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);
+        }
+    });
+}
+
+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
-var stripe = Stripe('pk_test_YkSGqH3Tk9WKK9HrlY63GhAg');
+  stripe = Stripe('pk_test_YkSGqH3Tk9WKK9HrlY63GhAg');
-var elements = stripe.elements({ locale: "de" });
+  elements = stripe.elements({ locale: "de" });
   
   // Set up Stripe.js and Elements to use in checkout form
-var style = {
+  style = {
     base: {
       color: "#32325d",
     }
   };
   
-var card = elements.create("card", { style: style });
+  card = elements.create("card", { style: style });
   card.mount("#card-element");
   $("#card-errors-article").hide();
   
@@ -415,6 +431,7 @@ card.addEventListener('change', ({error}) => {
       $("#card-errors-article").hide();
     }
   });
+}
 
 function ConfirmPayment(clientSecret) {
   stripe.confirmCardPayment(clientSecret, {