Derek Holloway
179 lines
6.7 KiB
HTML
179 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Stripe-Payments</title>
|
|
<script src="https://js.stripe.com/v3/"></script>
|
|
<style>
|
|
|
|
#submit {
|
|
width: 200px;
|
|
height: 40px;
|
|
margin-left: calc(50% - 100px);
|
|
margin-top: 30px;
|
|
color: #fff;
|
|
background-color: #393;
|
|
font-size: 16px;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
overflow: hidden;
|
|
transition: .5s;
|
|
letter-spacing: 4px;
|
|
border: 1px solid #8F7CEC;
|
|
}
|
|
|
|
#submit:hover {
|
|
background: #353;
|
|
color: #fff;
|
|
border-radius: 5px;
|
|
border-color: #353;
|
|
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<form id="payment-form">
|
|
<div id="link-authentication-element">
|
|
<!--Stripe.js injects the Link Authentication Element-->
|
|
</div>
|
|
<div id="payment-element">
|
|
<!--Stripe.js injects the Payment Element-->
|
|
</div>
|
|
<button id="submit">
|
|
<div class="spinner hidden" id="spinner"></div>
|
|
<span id="button-text">Pay now</span>
|
|
</button>
|
|
<div id="payment-message" class="hidden"></div>
|
|
</form>
|
|
|
|
<script>
|
|
// This is your test publishable API key.
|
|
const stripe = Stripe('pk_live_51LBODxCozZzTNCNhFdVbzm93F1N3Kk5sEiOyUYeU8GlqxF8AkS6h1JOkIqmFJ1hBmkBCEEa8cfBCY7RotHlweS7g00UzyxkUnO');
|
|
|
|
let elements;
|
|
|
|
initialize();
|
|
checkStatus();
|
|
|
|
document.querySelector("#payment-form").addEventListener("submit", handleSubmit);
|
|
|
|
let emailAddress = '';
|
|
|
|
// Fetches a payment intent and captures the client secret
|
|
async function initialize() {
|
|
|
|
const response = await fetch("/api/getCheckoutToken?userID=" + new URL(window.location.href).searchParams.get("userID"), {
|
|
method: "POST",
|
|
headers: { "Content-Type": "text/plain" },
|
|
body: ""
|
|
});
|
|
|
|
const clientSecret = await response.text();
|
|
|
|
const appearance = {
|
|
theme: 'night',
|
|
};
|
|
elements = stripe.elements({ appearance, clientSecret });
|
|
|
|
const linkAuthenticationElement = elements.create("linkAuthentication");
|
|
linkAuthenticationElement.mount("#link-authentication-element");
|
|
|
|
linkAuthenticationElement.on('change', (event) => {
|
|
emailAddress = event.value.email;
|
|
});
|
|
|
|
const paymentElementOptions = {
|
|
layout: "tabs",
|
|
};
|
|
|
|
const paymentElement = elements.create("payment", paymentElementOptions);
|
|
paymentElement.mount("#payment-element");
|
|
}
|
|
|
|
async function handleSubmit(e) {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
|
|
const { error } = await stripe.confirmPayment({
|
|
elements,
|
|
confirmParams: {
|
|
// Make sure to change this to your payment completion page
|
|
return_url: "https://mistox.net/store/payment/success",
|
|
receipt_email: emailAddress,
|
|
},
|
|
});
|
|
|
|
// This point will only be reached if there is an immediate error when
|
|
// confirming the payment. Otherwise, your customer will be redirected to
|
|
// your `return_url`. For some payment methods like iDEAL, your customer will
|
|
// be redirected to an intermediate site first to authorize the payment, then
|
|
// redirected to the `return_url`.
|
|
if (error.type === "card_error" || error.type === "validation_error") {
|
|
showMessage(error.message);
|
|
} else {
|
|
showMessage("An unexpected error occurred.");
|
|
}
|
|
|
|
setLoading(false);
|
|
}
|
|
|
|
// Fetches the payment intent status after payment submission
|
|
async function checkStatus() {
|
|
const clientSecret = new URLSearchParams(window.location.search).get(
|
|
"payment_intent_client_secret"
|
|
);
|
|
|
|
if (!clientSecret) {
|
|
return;
|
|
}
|
|
|
|
const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret);
|
|
|
|
switch (paymentIntent.status) {
|
|
case "succeeded":
|
|
showMessage("Payment succeeded!");
|
|
break;
|
|
case "processing":
|
|
showMessage("Your payment is processing.");
|
|
break;
|
|
case "requires_payment_method":
|
|
showMessage("Your payment was not successful, please try again.");
|
|
break;
|
|
default:
|
|
showMessage("Something went wrong.");
|
|
break;
|
|
}
|
|
}
|
|
|
|
// ------- UI helpers -------
|
|
|
|
function showMessage(messageText) {
|
|
const messageContainer = document.querySelector("#payment-message");
|
|
|
|
messageContainer.classList.remove("hidden");
|
|
messageContainer.textContent = messageText;
|
|
|
|
setTimeout(function () {
|
|
messageContainer.classList.add("hidden");
|
|
messageText.textContent = "";
|
|
}, 4000);
|
|
}
|
|
|
|
// Show a spinner on payment submission
|
|
function setLoading(isLoading) {
|
|
if (isLoading) {
|
|
// Disable the button and show a spinner
|
|
document.querySelector("#submit").disabled = true;
|
|
document.querySelector("#spinner").classList.remove("hidden");
|
|
document.querySelector("#button-text").classList.add("hidden");
|
|
} else {
|
|
document.querySelector("#submit").disabled = false;
|
|
document.querySelector("#spinner").classList.add("hidden");
|
|
document.querySelector("#button-text").classList.remove("hidden");
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html> |