Custom Event Ticket Purchase Flow

Database Collection:

In this example, we use the “Events/Tickets” and “Events/Events” database collections. When installing Wix Events & Tickets on your site, these collections are automatically added.

Data Connections:

We added an “Events/Tickets” dataset to connect the “Events/Tickets” collection to the repeater for displaying tickets.

Page Elements:

We added the following elements to our site:

• Repeater: Displays event tickets.

• Text: Displays ticket name, price, and totals.

• Dropdown: Used to select the ticket quantity.

• Buttons: To reserve/buy tickets, and to verify the coupon code.

• Text Input: Used to enter buyer details and coupon codes.

Code:

We added the following code to our site:

1. Set up the repeater to fetch ticket data from the Tickets dataset. 

2. After clicking the Buy Tickets button:

  2.1. Fetch the event ID from the Events dataset and save it for the checkout page. 

  2.2. Add the selected ticket quantity along with the ticket type ID to the array.

  2.3. Reserve the tickets. Save the reservation ID and total price for the checkout page. Redirect the site visitor to the checkout page.

3. Display the total price on the checkout page.

4. If the site visitor enters a discount code, verify the coupon. Display a validity notification below the text input. If the discount is applied, update the total price.

5. Once the site visitor enters the contact details into the form and clicks the Checkout button, get the form values along with the event ID, reservation ID, and discount coupon value for the checkout.

6. Proceed to checkout and call the Wix Pay API. A new window will open, requiring the site visitor to confirm the details.

7. If the checkout is successful, redirect to the thank you page.