top of page
Custom Event Ticket Purchase Flow

Custom Event Ticket Purchase Flow

Create a custom ticket purchase flow without using the Wix Events widget

Intermediate.png

Intermediate

1K

Published:

January 16, 2024

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example, instead of using the standard Wix Events widget, we created a customized ticket picker, checkout, and thank you page for customers who want to book our event. 

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

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. 

APIs We Used

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Filter events by category

Filter events by category

Create a filter to filter events by assigned categories.

Intermediate.png

Intermediate

Custom Event Ticket Picker on Events Frontend

Custom Event Ticket Picker on Events Frontend

Create a custom ticket picker for your events.

Intermediate.png

Intermediate

Anchor 2
bottom of page