103 lines
3.1 KiB
JavaScript
103 lines
3.1 KiB
JavaScript
const stripe = Stripe('pk_test_51Hh9Y2L9s5P2Q8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4');
|
|
|
|
const form = document.querySelector("#signup-form");
|
|
form.addEventListener("submit", handleSubmit);
|
|
|
|
// Initially, disable the submit button until the form is filled
|
|
document.querySelector("#submit").disabled = true;
|
|
|
|
// Create and mount the Payment Element
|
|
const elements = stripe.elements();
|
|
const paymentElement = elements.create("payment");
|
|
paymentElement.mount("#payment-element");
|
|
|
|
// Re-enable the submit button when the Payment Element is ready
|
|
paymentElement.on('ready', () => {
|
|
document.querySelector("#submit").disabled = false;
|
|
});
|
|
|
|
|
|
async function handleSubmit(e) {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
|
|
const name = document.getElementById('name').value;
|
|
const email = document.getElementById('email').value;
|
|
const password = document.getElementById('password').value;
|
|
const passwordConfirm = document.getElementById('password_confirm').value;
|
|
const address = document.getElementById('address').value;
|
|
const planId = form.dataset.planId;
|
|
|
|
if (password !== passwordConfirm) {
|
|
showMessage("Passwords do not match.");
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
if (!name || !email || !address || !planId || !password) {
|
|
showMessage("Please fill out all fields.");
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
// Create customer, order, and payment intent on the server.
|
|
const response = await fetch("/api/process_signup.php", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
plan_id: planId,
|
|
name: name,
|
|
email: email,
|
|
password: password,
|
|
address: address
|
|
}),
|
|
});
|
|
|
|
const { clientSecret, error } = await response.json();
|
|
|
|
if (error) {
|
|
showMessage(error);
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
// Confirm the payment with the client secret.
|
|
const { error: stripeError } = await stripe.confirmPayment({
|
|
elements,
|
|
clientSecret,
|
|
confirmParams: {
|
|
return_url: window.location.origin + "/order_confirmation.php",
|
|
receipt_email: email,
|
|
},
|
|
});
|
|
|
|
if (stripeError) {
|
|
showMessage(stripeError.message);
|
|
}
|
|
|
|
setLoading(false);
|
|
}
|
|
|
|
// ------- UI helpers -------
|
|
function showMessage(messageText) {
|
|
const messageContainer = document.querySelector("#payment-message");
|
|
messageContainer.style.display = "block";
|
|
messageContainer.textContent = messageText;
|
|
setTimeout(function () {
|
|
messageContainer.style.display = "none";
|
|
messageContainer.textContent = "";
|
|
}, 5000);
|
|
}
|
|
|
|
function setLoading(isLoading) {
|
|
if (isLoading) {
|
|
document.querySelector("#submit").disabled = true;
|
|
document.querySelector("#spinner").style.display = "inline";
|
|
document.querySelector("#button-text").style.display = "none";
|
|
} else {
|
|
document.querySelector("#submit").disabled = false;
|
|
document.querySelector("#spinner").style.display = "none";
|
|
document.querySelector("#button-text").style.display = "inline";
|
|
}
|
|
}
|