Creating the form

cmd/web/templates/base.layout.gohtml

@@ -20,11 +20,11 @@
                 <div class="col">{{ block "content" . }} {{ end }}</div>
             </div>
         </div>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
-            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
-            crossorigin="anonymous"></script>
-    {{ block "js" . }}
-    {{ end }}
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+                integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+                crossorigin="anonymous"></script>
+        {{ block "js" . }}
+        {{ end }}
     </body>
 </html>
 {{ end }}

cmd/web/templates/terminal.page.gohtml

@@ -3,7 +3,61 @@
 Virtual Terminal
 {{ end }}
 {{ define "content" }}
-<h2>Virtual Terminal</h2>
+<h2 class="mt-3 text-center">Virtual Terminal</h2>
+<hr>
+<form action="/payment-succecded"
+      method="post"
+      name="charge_form"
+      id="charge_form"
+      class="d-blick needs-validation charge-form"
+      autocomplete="off"
+      novalidate="">
+    <div class="mb-3">
+        <label for="amount" class="form-label">Amount</label>
+        <input type="text"
+               id="amount"
+               name="amount"
+               autocomplete="amount-new"
+               required=""
+               class="form-control">
+    </div>
+    <div class="mb-3">
+        <label for="cardholder-name" class="form-label">Cardholder Name</label>
+        <input type="text"
+               id="cardholder-name"
+               name="cardholder_name"
+               autocomplete="cardholder-name-new"
+               required=""
+               class="form-control">
+    </div>
+    <div class="mb-3">
+        <label for="cardholder-email" class="form-label">Cardholder Email</label>
+        <input type="text"
+               id="cardholder-email"
+               name="cardholder_email"
+               autocomplete="cardholder-email-new"
+               required=""
+               class="form-control">
+    </div>
+    <!-- card number will be built by stripe -->
+    <div class="mb-3">
+        <label for="card-element" class="form-label">Credit Card</label>
+        <div class="form-control" id="card-element"></div>
+        <div class="alert-danger text-center" id="card-errors" role="alert"></div>
+        <div class="alert-success text-center" id="card-success" role="alert"></div>
+    </div>
+    <hr>
+    <a href="javastript:void(0)"
+       id="pay-button"
+       class="btn btn-primary"
+       onclick="val()">Charge Card</a>
+</form>
 {{ end }}
 {{ define "js" }}
+<script src="https://js.stripe.com/v3/"></script>
+<script>
+function val() {
+
+}
+</script>
 {{ end }}