vinchent/udemy-go-web-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updating the front end JS to call paymentIntent handler

Browse Source
This commit is contained in:
vinchent 2024-08-04 17:34:39 +02:00
parent 1b4d1aef58
commit 48695949e3
2 changed files with 80 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cmd/api/routes-api.go
View File

@ -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
}

79
cmd/web/templates/terminal.page.gohtml
View File

@ -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 () {