Bookings Payroll Calculator

Calculate and display bookings payments for staff members.

Intermediate Last updated: 27 Aug 2025

Open Example Preview

About

In this example, we retrieve appointment and class bookings for staff members within a given date range. We then calculate the payments due to each staff member based on the given amounts per appointment and class participant.

Before you begin

To use this example:

• Your site must have a payment provider connected, and be upgraded to a premium plan.
• You must have at least one Bookings service and one staff member set up.
• Each staff member's payroll sum is calculated based on participants' check-ins to the relevant service (appointment / class) within the searched date range.

APIs

• $w.Repeater API
• Bookings - Extended Bookings

How we built it

We added the following to our site:

Page Elements

• A form for specifying a date range and payment amounts for each appointment and class.
• A repeater for displaying each staff member’s payments for classes and appointments.

Frontend Code

Home

The code in this file initializes the page’s state, retrieves staff data from the backend, and displays the calculated payments.

In this file, we:

• Initialize the elements on the page by setting initial values for the form fields and by setting up the repeater to receive staff payment data.
• Retrieve staff payment data by calling a backend function on form submission.
• Display the data returned from the backend in a repeater.

Backend Code

booking-functions.js

The code in this file retrieves and formats the staff booking information we need to make our payment calculations.

We defined the following methods:

• getBookingsByStaff(): Calls the other methods to retrieve the bookings and format the information so that it is sorted by staff member.
• retrieveAllBookings(): Retrieves all the bookings in the given range. Since you can only query for 100 bookings at a time, this method uses the query paging information to repeatedly query for more bookings if necessary. Bookings where the participants did not attend are not returned.
• sortByStaff(): Takes the raw bookings information and sorts it by staff member to allow for easy calculation of staff payments.

calculator.web.js

The code in this file calculates staff payments based on their retrieved bookings.

We defined the following methods:

• getStaffData(): A web method that retrieves the staff bookings data and then calculates the staff payments.
• calculatePayments(): Calculates each staff member’s payments based on the number of participants in the staff member’s appointments and classes.

Code Snippets

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.