move some common parts in common.js

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 = "";
+            }
+        });
+    })();
+}