diff --git a/cmd/web/templates/bronze-plan.page.gohtml b/cmd/web/templates/bronze-plan.page.gohtml
index ad4082f..85a2f4e 100644
--- a/cmd/web/templates/bronze-plan.page.gohtml
+++ b/cmd/web/templates/bronze-plan.page.gohtml
@@ -91,6 +91,12 @@ Bronze Plan
 {{ end }}
 {{ define "js" }}
 <script src="https://js.stripe.com/v3/"></script>
-<script 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-plan.js"
+    stripeInit('{{.StripePubKey}}');
+    document.getElementById("pay-button").addEventListener("click", () => {
+        val({{.API}});
+    })
+</script>
 {{ end }}
diff --git a/cmd/web/templates/buy-once.page.gohtml b/cmd/web/templates/buy-once.page.gohtml
index c719620..c28e915 100644
--- a/cmd/web/templates/buy-once.page.gohtml
+++ b/cmd/web/templates/buy-once.page.gohtml
@@ -92,7 +92,6 @@ Buy one widget
 {{ end }}
 {{ define "js" }}
 <script src="https://js.stripe.com/v3/"></script>
-<script type="module" src="/static/js/stripe.js"></script>
 <script type="module">
     import {stripeInit} from "/static/js/common.js";
     import {val} from "/static/js/stripe.js"
diff --git a/cmd/web/templates/terminal.page.gohtml b/cmd/web/templates/terminal.page.gohtml
index 683998a..0ad8087 100644
--- a/cmd/web/templates/terminal.page.gohtml
+++ b/cmd/web/templates/terminal.page.gohtml
@@ -75,7 +75,6 @@ Virtual Terminal
 {{ end }}
 {{ define "js" }}
 <script src="https://js.stripe.com/v3/"></script>
-<script type="module" src="/static/js/stripe.js"></script>
 <script type="module">
     import {stripeInit} from "/static/js/common.js";
     import {val} from "/static/js/stripe.js"
diff --git a/static/js/stripe-plan.js b/static/js/stripe-plan.js
new file mode 100644
index 0000000..a9900aa
--- /dev/null
+++ b/static/js/stripe-plan.js
@@ -0,0 +1,40 @@
+import {
+    hidePayButton,
+    showPayButton,
+    showCardError,
+    showCardSuccess,
+    stripe,
+    card,
+    processing,
+} from './common.js';
+
+export 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 = document.getElementById("amount").value;
+
+    stripe.createPaymentMethod({
+        type: 'card',
+        card: card,
+        billing_details: {
+            email: document.getElementById("cardholder-email").value,
+        },
+    }).then(stripePaymentMethodHandler);
+}
+
+function stripePaymentMethodHandler(result) {
+    if (result.error) {
+        showCardError(result.error.message);
+    } else {
+        // create a customer and subscribe to plan
+    }
+}