udemy-go-web-2/cmd/web/templates/terminal.page.gohtml

{{ template "base" . }}
{{ define "title" }}
Virtual Terminal
{{ end }}
{{ define "content" }}
<h2 class="mt-3 text-center">Virtual Terminal</h2>
<hr>
<div class="alert alert-danger text-center d-none" id="card-messages"></div>
<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="javascript:void(0)"
       id="pay-button"
       class="btn btn-primary"
       onclick="val()">Charge Card</a>
    <div class="text-center d-none" id="processing-payment">
        <div class="spinner-border text-primary" role="status">
            <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" }}
<script src="https://js.stripe.com/v3/"></script>
<script>

let card;
let stripe;
const cardMessages = document.getElementById("card-messages");
const payButton = document.getElementById("pay-button");
const processing = document.getElementById("processing-payment");

stripe = Stripe(''); // TODO: Publish key to be added

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("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 () {
    // 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 = "";
        }
    });
})();
</script>
{{ end }}