move some common parts in common.js

cmd/web/templates/buy-once.page.gohtml

@@ -66,10 +66,7 @@ Buy one widget
         <div class="alert-success text-center" id="card-success" role="alert"></div>
     </div>
     <hr>
-    <a href="javascript:void(0)"
+    <a href="javascript:void(0)" id="pay-button" class="btn btn-primary">Charge Card</a>
-       id="pay-button"
-       class="btn btn-primary"
-       onclick="val({{.API}})">Charge Card</a>
     <div class="text-center d-none" id="processing-payment">
         <div class="spinner-border text-primary" role="status">
             <span class="visually-hidden">Loading...</span>
@@ -95,6 +92,13 @@ Buy one widget
 {{ end }}
 {{ define "js" }}
 <script src="https://js.stripe.com/v3/"></script>
-<script src="/static/js/stripe.js"></script>
+<script type="module" src="/static/js/stripe.js"></script>
-<script>stripeInit('{{.StripePubKey}}');</script>
+<script type="module">
+    import {stripeInit} from "/static/js/common.js";
+    import {val} from "/static/js/stripe.js"
+    stripeInit('{{.StripePubKey}}');
+    document.getElementById("pay-button").addEventListener("click", () => {
+        val({{.API}});
+    })
+</script>
 {{ end }}

cmd/web/templates/terminal.page.gohtml

@@ -49,10 +49,7 @@ Virtual Terminal
         <div class="alert-success text-center" id="card-success" role="alert"></div>
     </div>
     <hr>
-    <a href="javascript:void(0)"
+    <a href="javascript:void(0)" id="pay-button" class="btn btn-primary">Charge Card</a>
-       id="pay-button"
-       class="btn btn-primary"
-       onclick="val({{.API}})">Charge Card</a>
     <div class="text-center d-none" id="processing-payment">
         <div class="spinner-border text-primary" role="status">
             <span class="visually-hidden">Loading...</span>
@@ -78,8 +75,10 @@ Virtual Terminal
 {{ end }}
 {{ define "js" }}
 <script src="https://js.stripe.com/v3/"></script>
-<script src="/static/js/stripe.js"></script>
+<script type="module" src="/static/js/stripe.js"></script>
-<script>
+<script type="module">
+    import {stripeInit} from "/static/js/common.js";
+    import {val} from "/static/js/stripe.js"
     stripeInit('{{.StripePubKey}}');
     document.getElementById("charge_amount").addEventListener("change", (evt) => {
         if (evt.target.value !== "") {
@@ -88,13 +87,10 @@ Virtual Terminal
             document.getElementById("amount").value = 0;
         }
     });
-    // function termVal() {
+
-    //     const chargeAmount = document.getElementById("charge_amount");
+    document.getElementById("pay-button").addEventListener("click", () => {
-    //     if (chargeAmount.value !== "") {
+        val({{.API}});
-    //         document.getElementById("amount").value = parseInt((chargeAmount.value * 100), 10);
+    })
-    //     } else {
+
-    //         document.getElementById("amount").value = 0;
-    //     }
-    // }
 </script>
 {{ end }}

static/js/common.js

@@ -0,0 +1,63 @@
+export let card;
+export let stripe;
+const cardMessages = document.getElementById("card-messages");
+const payButton = document.getElementById("pay-button");
+export const processing = document.getElementById("processing-payment");
+
+export function hidePayButton() {
+    payButton.classList.add("d-none");
+    processing.classList.remove("d-none");
+}
+
+export function showPayButton() {
+    payButton.classList.remove("d-none");
+    processing.classList.add("d-none");
+}
+
+export function showCardError(msg) {
+    cardMessages.classList.add("alert-danger");
+    cardMessages.classList.remove("alert-success");
+    cardMessages.classList.remove("d-none");
+    cardMessages.innerText = msg;
+}
+
+export function showCardSuccess() {
+    cardMessages.classList.add("alert-success");
+    cardMessages.classList.remove("alert-danger");
+    cardMessages.classList.remove("d-none");
+    cardMessages.innerText = "Trasaction successful";
+}
+
+export function stripeInit(pubKey) {
+    stripe = Stripe(pubKey);
+
+    (function () {
+        // create stripe & elements
+        const elements = stripe.elements();
+        const style = {
+            base: {
+                fontSize: '16px',
+                lineHeight: '24px',
+            }
+        };
+
+        // create card entry
+        card = elements.create('card', {
+            style: style,
+            hidePostalCode: true,
+        });
+        card.mount("#card-element");
+
+        // check for input errors
+        card.addEventListener('change', function (event) {
+            var displayError = document.getElementById("card-errors");
+            if (event.error) {
+                displayError.classList.remove('d-none');
+                displayError.textContent = event.error.message;
+            } else {
+                displayError.classList.add('d-none');
+                displayError.textContent = "";
+            }
+        });
+    })();
+}

static/js/stripe.js

@@ -1,34 +1,14 @@
-let card;
+import {
-let stripe;
+    hidePayButton,
-const cardMessages = document.getElementById("card-messages");
+    showPayButton,
-const payButton = document.getElementById("pay-button");
+    showCardError,
-const processing = document.getElementById("processing-payment");
+    showCardSuccess,
+    stripe,
+    card,
+    processing,
+} from './common.js';
 
-function hidePayButton() {
+export function val(api) {
-    payButton.classList.add("d-none");
-    processing.classList.remove("d-none");
-}
-
-function showPayButton() {
-    payButton.classList.remove("d-none");
-    processing.classList.add("d-none");
-}
-
-function showCardError(msg) {
-    cardMessages.classList.add("alert-danger");
-    cardMessages.classList.remove("alert-success");
-    cardMessages.classList.remove("d-none");
-    cardMessages.innerText = msg;
-}
-
-function showCardSuccess() {
-    cardMessages.classList.add("alert-success");
-    cardMessages.classList.remove("alert-danger");
-    cardMessages.classList.remove("d-none");
-    cardMessages.innerText = "Trasaction successful";
-}
-
-function val(api) {
     let form = document.getElementById("charge_form");
 
     if (form.checkValidity() === false) {
@@ -57,7 +37,7 @@ function val(api) {
     };
 
     fetch(api + "/api/payment-intent", requestOptions)
-    .then(response => response.text())
+        .then(response => response.text())
         .then(response => {
             let data;
             try {
@@ -69,24 +49,24 @@ function val(api) {
                             name: document.getElementById("cardholder-name").value,
                         }
                     }
-                }).then(function(result) {
+                }).then(function (result) {
-                        if (result.error) {
+                    if (result.error) {
-                            // card declined, or sth went wrong with the card
+                        // card declined, or sth went wrong with the card
-                            showCardError(result.error.message);
+                        showCardError(result.error.message);
-                            showPayButton();
+                        showPayButton();
-                        } else if (result.paymentIntent) {
+                    } else if (result.paymentIntent) {
-                            if (result.paymentIntent.status === "succeeded") {
+                        if (result.paymentIntent.status === "succeeded") {
-                                // we have charged the card
+                            // we have charged the card
-                                document.getElementById("payment_intent").value = result.paymentIntent.id;
+                            document.getElementById("payment_intent").value = result.paymentIntent.id;
-                                document.getElementById("payment_method").value = result.paymentIntent.payment_method;
+                            document.getElementById("payment_method").value = result.paymentIntent.payment_method;
-                                document.getElementById("payment_amount").value = result.paymentIntent.amount;
+                            document.getElementById("payment_amount").value = result.paymentIntent.amount;
-                                document.getElementById("payment_currency").value = result.paymentIntent.currency;
+                            document.getElementById("payment_currency").value = result.paymentIntent.currency;
-                                processing.classList.add("d-none");
+                            processing.classList.add("d-none");
-                                showCardSuccess();
+                            showCardSuccess();
-                                document.getElementById("charge_form").submit();
+                            document.getElementById("charge_form").submit();
-                            }
                         }
-                    })
+                    }
+                })
                 console.log(data);
 
             } catch (err) {
@@ -97,36 +77,3 @@ function val(api) {
         });
 }
 
-function stripeInit(pubKey) {
-    stripe = Stripe(pubKey);
-
-    (function () {
-        // create stripe & elements
-        const elements = stripe.elements();
-        const style = {
-            base: {
-                fontSize: '16px',
-                lineHeight: '24px',
-            }
-        };
-
-        // create card entry
-        card = elements.create('card', {
-            style:style,
-            hidePostalCode: true,
-        });
-        card.mount("#card-element");
-
-        // check for input errors
-        card.addEventListener('change', function(event) {
-            var displayError = document.getElementById("card-errors");
-            if (event.error) {
-                displayError.classList.remove('d-none');
-                displayError.textContent = event.error.message;
-            } else {
-                displayError.classList.add('d-none');
-                displayError.textContent = "";
-            }
-        });
-    })();
-}