202 lines
6.7 KiB
Plaintext
202 lines
6.7 KiB
Plaintext
{{ 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 }}
|