i am using nodeJS with mongoDB.
i am using a get request to load the checkout form and then a post request to create a paymentIntent and load the stripe checkout form. then the form is submitted using a javascript file on the checkout page which then sends the user to a success page if it was successful, where would be the best place to save the purchase to the database and update the user to add it to their purchases, if i do it on the post request, it is too early and saves it before the user has a chance to pay.
routes
router.get('/pay/:id', catchAsync (async(req, res, next) => {
if (!req.isAuthenticated()){
req.flash('sir', 'you must be signed in')
return res.redirect('/account/sign-in')
}
try{
const { id } = req.params
const user = req.user._id
const concert = await Concert.findById(id).populate('artist')
const artistId = concert.artist
const artist = await Artist.findById(artistId)
const foundUser = await User.findById(user)
const user_purchases = foundUser.purchased_content.toString()
const concert_id = concert.id
if(!concert || concert.artist.banned === 'true' || concert.visibility === 'private') {
// return next(new AppError('page not found'))
req.flash('paynf', 'sorry, the concert you are looking for could not be found')
return res.redirect('/posts')
}
console.log(artist.stripe_id)
res.render('pay', { concert, foundUser})
}catch(e){
console.log(e.name)
req.flash('paynf', 'sorry, the concert you are looking for could not be found')
res.redirect('/posts')
}
}))
router.post('/pay/:id', catchAsync (async(req, res, next) => {
if (!req.isAuthenticated()){
req.flash('sir', 'you must be signed in')
return res.redirect('/account/sign-in')
}
try{
const { id } = req.params;
const user = req.user._id
const concert = await Concert.findById(id).populate('artist')
const concert_id = concert.id
const artistId = concert.artist
const artist = await Artist.findById(artistId)
const stripe_id = artist.stripe_id
const foundUser = await User.findById(user)
if(!concert || concert.artist.banned === 'true' || concert.visibility === 'private') {
// return next(new AppError('page not found'))
req.flash('paynf', 'sorry, the concert you are looking for could not be found')
return res.redirect('/posts')
}
const purchase = new Purchase(req.body)
const customer = ({
id: foundUser.cus_id,
name: 'john',
email: foundUser.email
});
// Create a PaymentIntent with the order amount and currency
const paymentIntent = await stripe.paymentIntents.create({
customer: customer.id,
amount: concert.price*100,
description: `${concert.title} by ${concert.artName}`,
currency: "gbp",
receipt_email: customer.email,
automatic_payment_methods: {
enabled: true,
},
application_fee_amount: Math.round(concert.price*100*0.35),
transfer_data: {
destination: artist.stripe_id,
},
});
res.send({
clientSecret: paymentIntent.client_secret,
});
}
catch(e){
console.log(e)
return res.send('/posts')
}}))
javascript for checkout page:
const stripe = Stripe("pk_test_51KJaaVEnftAKbusC8A9kTrtzrLKklZDHQdserQ2ZrYMHRqFRfbMk9SrGVnQlLoSjIfqmOCOEsDmcsTnO0evWY2Pr00nNd02KLv");
let elements;
initialize();
checkStatus();
document
.querySelector("#payment-form")
.addEventListener("submit", handleSubmit);
// Fetches a payment intent and captures the client secret
async function initialize() {
const response = await fetch(window.location.href, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ items }),
});
const { clientSecret } = await response.json();
const appearance = {
theme: 'stripe'
}
elements = stripe.elements({ appearance, clientSecret });
const paymentElement = elements.create("payment");
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: "http://localhost:3000/success",
receipt_email: '[email protected]'
},
});
// 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 occured.");
}
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");
}}```