Custom Ticket Booking Page
Create a custom page where visitors can book multiple kinds of tickets for an event.
Advanced
Last updated: 27 Aug 2025
About
In this example, we build a page that allows visitors to purchase different quantities of 2 distinct types of event tickets.
Before you begin
To use this example:
- You must install Wix Events & Tickets on your site.
- Your site must have an event with at least 2 types of tickets.
APIs
How we built it
We added the following to our site:
Page Elements
- A repeater to display the types of tickets. Repeater items contain:
- A button to reserve tickets and then proceed to the payment page.
Frontend Code
Home
The code in this file sets up the repeater to display the different ticket types for the event, and allows visitors to buy varying amounts of each ticket by clicking the button.
In this file, we:
- Configure the repeater items to reflect the various tickets in the Events/Tickets collection.
- Add an onClick() event handler to the Buy Tickets button. The handler calls reserveTickets() from reserveTickets.js to reserve the tickets and navigate the visitor to a payment form.
Public Code
reserveTickets.js
The code in this file manages the ticket reservation process for the event. The code retrieves the correct event, collects the selected ticket types and quantities, reserves the tickets, and then navigates the visitor to a payment form.
We defined the following methods:
- getEventId(): Finds the event in the Events/Events collection by title, and returns the event’s id.
- getSelectedTickets(): Reads the visitor’s ticket selections from the page and returns a list of objects representing ticket types where the visitor chose an amount. Each object has the following fields:
- ticketId: The unique ID of the ticket type selected.
- quantity: The number of tickets the visitor chose for that type.
- reserveTickets(): Exported method. Uses getEventId() and getSelectedTickets() to reserve the visitor’s selected tickets for the event, and then redirects to a payment form page upon success, or logs an error if the reservation fails.
Code Snippets
undefined
Events
Home
Get Help
Join the community
Join the Wix Studio community on Discord, where experienced developers and fellow creators come together to share tips, troubleshoot issues, and collaborate.
Hire a developer
Building a coded solution on your own can be challenging. Let an experienced Wix developer build it for you, so you can keep working on your site or business. Visit the Wix Marketplace to find a trusted developer.