tickets


ticketsTicketsRead-only

Gets an object containing ticketing functionality.

Use the Tickets object to reserve and checkout tickets for an event.

Note: To work with the Wix Events API, you need to publish your site.

Reserve, checkout, and update tickets
JavaScript
import wixEventsFrontend from "wix-events-frontend"; import wixData from "wix-data"; import wixPayFrontend from "wix-pay-frontend"; let eventId; let reservationId; let orderNumber; let tickets; $w.onReady(function () { // Retrieve data and set up page await getData(); $w("#ticketRepeater").onItemReady(displayTickets); $w("#ticketRepeater").data = tickets; // Define button click actions $w("#reservationButton").onClick(reserveTickets); $w("#checkoutButton").onClick(checkoutTickets); $w("#updateButton").onClick(updateTickets); // Verify coupon code when it is entered $w("#couponCode").onCustomValidation(verifyCouponCode); }); async function getData() { // Run a query that returns only one event. Add // additional filtering to the query if necessary. const eventResults = await wixData .query("Events/Events") .eq("title", "My Event") .find(); if (eventResults.items.length > 0) { eventId = eventResults.items[0]._id; // Get tickets for the event const ticketResults = await wixData .query("Events/Tickets") .eq("event", eventId) .find(); if (ticketResults.items.length > 0) { tickets = ticketResults.items; } else { $w("#ticketRepeater").hide(); console.log("Could not find tickets"); } } else { console.log("Could not find event"); } } function displayTickets($item, itemData, index) { $item("#ticketName").text = itemData.name; $item("#ticketPrice").text = itemData.price.toString(); $item("#ticketQuantity").value = 0; } function reserveTickets() { const selectedTickets = getSelectedTickets(); wixEventsFrontend.tickets .reserve(eventId, selectedTickets) .then((reservation) => { reservationId = reservation.id; }) .catch((error) => { console.log("Error", error.message); }); } function getSelectedTickets() { let selectedTickets = []; $w("#ticketRepeater").forEachItem(($item, itemData, index) => { if ($item("#ticketQuantity").value > 0) { selectedTickets.push({ ticketId: itemData._id, quantity: $item("#ticketQuantity").value, }); } }); return selectedTickets; } function checkoutTickets() { wixEventsFrontend.tickets .checkout(eventId, reservationId, { formValues: getFormValues(), coupon: $w("#couponCode").value, }) .then(({ order }) => { orderNumber = order.orderNumber; wixPayFrontend.startPayment(order.paymentId); // Note that PDF tickets are available before payment is complete $w("#ticketsPdfLink").value = order.ticketsPdf; }) .catch((error) => { console.log("Error", error.message); }); } function updateTickets() { wixEventsFrontend.tickets .updateOrder(eventId, orderNumber, { formValues: getFormValues(), }) .catch((error) => { console.log("Error", error.message); }); } function verifyCouponCode(value, reject) { const coupon = $w("#couponCode").value; wixEventsFrontend.tickets .verifyCoupon(eventId, reservationId, coupon) .then((result) => { if (result.discountErrors) { // handle verification failure $w("#couponCode").updateValidityIndication(); $w("#couponErrorMsg").show(); $w("#couponSuccessMsg").hide(); reject("Coupon is invalid"); } else { // handle coupon verified $w("#couponErrorMsg").hide(); $w("#couponSuccessMsg").show(); } }); } function getFormValues() { return [ { name: "firstName", value: $w("#firstName").value }, { name: "lastName", value: $w("#lastName").value }, { name: "email", value: $w("#email").value }, { name: "custom", value: $w("#foodAllergies").value }, // When a form contains an address, the way you format the // address information for submission depends on what type // of input elements you use to gather that information. // Wix address input element. { name: "address", value: $w("#address").value }, // Single element which is not an address // input element, such as a text input. { name: "address", value: [$w("#address").value] }, // Multiple elements for the // various parts of an address. { name: "address", value: [ $w("#street").value, $w("#city").value, $w("#state").value, $w("#country").value, $w("#postalCode").value, ], }, // When a form contains an input for adding more guests to an // RSVP, format the guest names for submission in an array // where each element is the full name of a guest. { name: "additionalGuests", value: $w("#additionalGuests").value }, { name: "guestNames", value: [ `${$w("#guest1FirstName").value} ${$w("#guest1LastName").value}`, `${$w("#guest2FirstName").value} ${$w("#guest2LastName").value}`, ], }, ]; }
Did this help?