Hi there,
I am trying to do a booking system which listen to the payment status and update the backend database if the payment is succesfully
I noticed that the checkout API will return a payment link object so in the front end I am trying to redirect the user to the payment page.
<!DOCTYPE html>
<html>
<head>
<title>Checkout Example</title>
</head>
<body>
<h1>Checkout Example</h1>
<form id="registrationForm" action="/create-checkout-session" method="post">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required><br><br>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" required><br><br>
<label for="lastName">Registration Name (AKA):</label>
<input type="text" id="userName" name="userName" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="email">Quantity:</label>
<input type="quantity" id="quantity" name="quantity" required><br><br>
<label for="email">Phone:</label>
<input type="phone" id="phone" name="phone" required><br><br>
<input type="submit" value="Submit">
</form>
<script>
const checkoutButton = document.getElementById('checkout-button');
const firstNameInput = document.getElementById('firstName');
const lastNameInput = document.getElementById('lastName');
const userNameInput = document.getElementById('userName');
const emailInput = document.getElementById('email');
const quantityInput = document.getElementById('quantity');
const phoneInput = document.getElementById('phone');
const registrationForm = document.getElementById("registrationForm");
registrationForm.addEventListener('submit', async (event) => {
event.preventDefault(); // prevent default form submission behavior
try {
const response = await fetch('/create-checkout-session', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
buyer_firstName: firstNameInput.value,
buyer_lastName: lastNameInput.value,
buyer_userName: userNameInput.value,
buyer_phone: phoneInput.value,
buyer_email: emailInput.value,
quantity: quantityInput.value
})
});
const responseData = await response.json();
url = responseData.url;
if (url) {
console.log("Redirecting to payment CLICK!")
window.location = url;
}
} catch (error) {
console.error(error);
}
});
</script>
</body>
</html>
I am not sure what should I do at the backend to listen to the customer’s payment status. Can anyone advice what will be the response for the Quick Pay Checkout page?
app.post('/create-checkout-session', async (req, res) => {
console.log("Payment create!!");
console.log("PAYMENT BODY IS",req.body)
try {
const response = await client.checkoutApi.createPaymentLink({
idempotencyKey: uuidv4() + "-order",
description: 'reservation',
order: {
locationId: process.env.LOCATION_ID,
lineItems: [
{
name: 'Badminton Booking',
quantity: req.body.quantity,
basePriceMoney: {
amount: '0',
currency: 'AUD'
}
}
]
},
checkoutOptions: {
askForShippingAddress: false,
allowTipping: false,
},
prePopulatedData: {
buyerEmail: req.body.buyer_email,
buyer_phone_number: '61414976832',
buyerAddress: {
firstName: req.body.buyer_firstName,
lastName: req.body.buyer_lastName,
}
}
});
console.log("RESULT IS",response.result);
res.status(200).json({
'url':response.result.paymentLink.url
});
} catch(error) {
console.log(error);
}
});
However, I am not sure where I should update my database to reflect the status. Should I do it in another route which call the get order end point and then monitor the status? (polling)
THank you
