Updating the front end JS to call paymentIntent handler

cmd/api/routes-api.go

@@ -18,6 +18,6 @@ func (app *application) routes() http.Handler {
 		MaxAge:           300,
 	}))
 
-	mux.Get("/api/payment-intent", app.GetPaymentIntent)
+	mux.Post("/api/payment-intent", app.GetPaymentIntent)
 	return mux
 }

cmd/web/templates/terminal.page.gohtml

@@ -57,6 +57,12 @@ Virtual Terminal
             <span class="visually-hidden">Loading...</span>
         </div>
     </div>
+
+    <input id="payment_intent" type="hidden" name="payment_intent" value="payment_intent">
+    <input id="payment_method" type="hidden" name="payment_method" value="payment_method">
+    <input id="payment_amount" type="hidden" name="payment_amount" value="payment_amount">
+    <input id="payment_currency" type="hidden" name="payment_currency" value="payment_currency">
+
 </form>
 {{ end }}
 {{ define "js" }}
@@ -76,6 +82,25 @@ function hidePayButton() {
     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");
 
@@ -87,6 +112,60 @@ function val() {
     }
     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("http://localhost:4001/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_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();
+                                // would submit the form
+                            }
+                        }
+                    })
+                console.log(data);
+
+            } catch (err) {
+                console.log(err);
+                showCardError("Invalid response from payment gateway!");
+                showPayButton();
+            }
+        });
 }
 
 (function () {