diff --git a/static/js/stripe.js b/static/js/stripe.js
new file mode 100644
index 0000000..1f185b3
--- /dev/null
+++ b/static/js/stripe.js
@@ -0,0 +1,131 @@
+let card;
+let stripe;
+const cardMessages = document.getElementById("card-messages");
+const payButton = document.getElementById("pay-button");
+const processing = document.getElementById("processing-payment");
+
+// FIXME: not working in this way
+stripe = Stripe('{{index .StringMap "publishable_key"}}');
+
+function hidePayButton() {
+    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() {
+    let form = document.getElementById("charge_form");
+
+    if (form.checkValidity() === false) {
+        this.event.preventDefault();
+        this.event.stopPropagation();
+        form.classList.add("was-validated");
+        return;
+    }
+    form.classList.add("was-validated");
+    hidePayButton();
+
+    let amountToCharge = String(parseFloat(document.getElementById("amount").value) * 100);
+    let payload = {
+        amount: amountToCharge,
+        currency: 'eur',
+    };
+
+    const requestOptions = {
+        method: 'post',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+    };
+
+    fetch("{{index .API}}/api/payment-intent", requestOptions)
+    .then(response => response.text())
+        .then(response => {
+            let data;
+            try {
+                data = JSON.parse(response);
+                stripe.confirmCardPayment(data.client_secret, {
+                    payment_method: {
+                        card: card,
+                        billing_details: {
+                            name: document.getElementById("cardholder-name").value,
+                        }
+                    }
+                }).then(function(result) {
+                        if (result.error) {
+                            // card declined, or sth went wrong with the card
+                            showCardError(result.error.message);
+                            showPayButton();
+                        } else if (result.paymentIntent) {
+                            if (result.paymentIntent.status === "succeeded") {
+                                // we have charged the card
+                                document.getElementById("payment_intent").value = result.paymentIntent.id;
+                                document.getElementById("payment_method").value = result.paymentIntent.payment_method_types[0];
+                                document.getElementById("payment_amount").value = result.paymentIntent.amount;
+                                document.getElementById("payment_currency").value = result.paymentIntent.currency;
+                                processing.classList.add("d-none");
+                                showCardSuccess();
+                                document.getElementById("charge_form").submit();
+                            }
+                        }
+                    })
+                console.log(data);
+
+            } catch (err) {
+                console.log(err);
+                showCardError("Invalid response from payment gateway!");
+                showPayButton();
+            }
+        });
+}
+
+(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 = "";
+        }
+    });
+})();
+