133 lines
4.4 KiB
JavaScript
133 lines
4.4 KiB
JavaScript
let card;
|
|
let stripe;
|
|
const cardMessages = document.getElementById("card-messages");
|
|
const payButton = document.getElementById("pay-button");
|
|
const processing = document.getElementById("processing-payment");
|
|
|
|
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(api) {
|
|
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 = document.getElementById("amount").value;
|
|
console.log(amountToCharge);
|
|
let payload = {
|
|
amount: amountToCharge,
|
|
currency: 'eur',
|
|
};
|
|
|
|
const requestOptions = {
|
|
method: 'post',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(payload),
|
|
};
|
|
|
|
fetch(api + "/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_intent").value = result.paymentIntent.id;
|
|
document.getElementById("payment_method").value = result.paymentIntent.payment_method;
|
|
document.getElementById("payment_amount").value = result.paymentIntent.amount;
|
|
document.getElementById("payment_currency").value = result.paymentIntent.currency;
|
|
processing.classList.add("d-none");
|
|
showCardSuccess();
|
|
document.getElementById("charge_form").submit();
|
|
}
|
|
}
|
|
})
|
|
console.log(data);
|
|
|
|
} catch (err) {
|
|
console.log(err);
|
|
showCardError("Invalid response from payment gateway!");
|
|
showPayButton();
|
|
}
|
|
});
|
|
}
|
|
|
|
function stripeInit(pubKey) {
|
|
stripe = Stripe(pubKey);
|
|
|
|
(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 = "";
|
|
}
|
|
});
|
|
})();
|
|
}
|