104 lines
3.3 KiB
Plaintext
104 lines
3.3 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Your Ticket</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<%- include('partials/nav') %>
|
|
<div class="content">
|
|
<form id="payment-form">
|
|
Payment Here!!!<%=amount%>
|
|
<!-- Stripe Elements will inject the Card Element here -->
|
|
|
|
<label for="card-number-element">Card Number</label>
|
|
<div id="card-number-element"></div>
|
|
|
|
<label for="card-expiry-element">Expiration Date</label>
|
|
<div id="card-expiry-element"></div>
|
|
|
|
<label for="card-cvc-element">CVC</label>
|
|
<div id="card-cvc-element"></div>
|
|
|
|
<label for="card-postal-element">ZIP Code</label>
|
|
<div id="card-postal-element"></div>
|
|
|
|
<button id="submit-button" type="submit">Pay <%=amount%> Now</button>
|
|
</form>
|
|
</div>
|
|
<!-- Stripe.js -->
|
|
<script src="https://js.stripe.com/v3/"></script>
|
|
<script>
|
|
// Initialize Stripe
|
|
const stripe = Stripe("pk_test_51QZlMSCHHjDgpHosSrxdAEHgUCBmyhXCihiELaXjxcXzGtIY9Vw1YgOeiJfNpn7P9WkcMj5FWk13cDRavez3HhyN0001mNBtXW");
|
|
|
|
// Set up Stripe.js and Elements
|
|
const elements = stripe.elements();
|
|
const cardNumberElement = elements.create('cardNumber');
|
|
const cardExpiryElement = elements.create('cardExpiry');
|
|
const cardCvcElement = elements.create('cardCvc');
|
|
const cardPostalElement = elements.create('postalCode');
|
|
|
|
cardNumberElement.mount('#card-number-element');
|
|
cardExpiryElement.mount('#card-expiry-element');
|
|
cardCvcElement .mount('#card-cvc-element');
|
|
cardPostalElement.mount('#card-postal-element');
|
|
|
|
const paymentForm = document.getElementById("payment-form");
|
|
paymentForm.addEventListener("submit", async (e) => {
|
|
e.preventDefault();
|
|
|
|
// 1. Create a PaymentMethod
|
|
const { paymentMethod, error } = await stripe.createPaymentMethod({
|
|
type: "card",
|
|
card: cardNumberElement,
|
|
});
|
|
|
|
if (error) {
|
|
console.error(error);
|
|
alert(error.message);
|
|
return;
|
|
}
|
|
|
|
// 2. Send PaymentMethod ID to server
|
|
const response = await fetch("/charge", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ paymentMethodId: paymentMethod.id, ticket:"<%=ticket%>", amount:"<%=amount%>" }),
|
|
});
|
|
|
|
const responseData = await response.json();
|
|
|
|
if (responseData.error) {
|
|
console.error(responseData.error);
|
|
alert(responseData.error);
|
|
return;
|
|
}
|
|
|
|
if (responseData.requiresAction) {
|
|
// 3. Handle Additional Action if required (e.g., 3DS)
|
|
const { error: confirmError } = await stripe.confirmCardPayment(
|
|
responseData.paymentIntentClientSecret
|
|
);
|
|
|
|
if (confirmError) {
|
|
console.error(confirmError);
|
|
alert(confirmError.message);
|
|
return;
|
|
}
|
|
|
|
alert("Payment succeeded");
|
|
// redirect or show success message
|
|
window.location.href = responseData.redirect_url;
|
|
} else if (responseData.success) {
|
|
// Payment succeeded without additional action
|
|
alert("Payment succeeded.");
|
|
window.location.href = responseData.redirect_url;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|