Started Stripe Integration
This commit is contained in:
80
views/checkout.ejs
Normal file
80
views/checkout.ejs
Normal file
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Checkout</title>
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Checkout</h1>
|
||||
<form id="payment-form">
|
||||
<!-- Stripe Elements will inject the Card Element here -->
|
||||
<div id="card-element"></div>
|
||||
<button id="submit-button" type="submit">Pay $19.99</button>
|
||||
</form>
|
||||
|
||||
<!-- 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 cardElement = elements.create("card");
|
||||
cardElement.mount("#card-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: cardElement,
|
||||
});
|
||||
|
||||
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 }),
|
||||
});
|
||||
|
||||
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 = "/";
|
||||
} else if (responseData.success) {
|
||||
// Payment succeeded without additional action
|
||||
alert("Payment succeeded!");
|
||||
window.location.href = "/";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
103
views/checkout2.ejs
Normal file
103
views/checkout2.ejs
Normal file
@@ -0,0 +1,103 @@
|
||||
<!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">
|
||||
|
||||
<!-- 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 $19.99</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: cardElement,
|
||||
});
|
||||
|
||||
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 }),
|
||||
});
|
||||
|
||||
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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user