checkoutBooking( )

Books a service and processes payment for the service.

Description

The checkoutBooking() function returns a Promise that resolves to a unique booking ID when the service is booked successfully.

To understand how checkoutBooking() is used in a typical booking lifecycle, see Typical Booking Lifecycle.

Call the checkoutBooking() with a BookingInfo object that contains the slot to book, values for all the form fields, and the number of spots to book.

The form fields contain additional information required for the booking.

If the service being checked out is not a free service, you also need to pass a PaymentOptions object containing information about the method of payment and any coupon codes. If an online method of payment is specified, a payment popup is presented for the user to input payment information, such as credit card information. The function's returned Promise resolves after the user finishes entering the payment information and the service has been successfully booked. If no payment or an offline method of payment is specified, the payment popup is not presented and the Promise resolves when the service has been successfully booked.

If a service is configured as a paid service in the Dashboard, attempting to perform a checkout as if it is a free service results in an error.

When a service is booked successfully:

A site contact is created with the provided booking information.
An email is sent to you about the new booking.
An email is sent to the user confirming that the service was booked.

Note: To use checkoutBooking() you need to upgrade to a Business Premium Plan.

Syntax

function checkoutBooking(bookingInfo: BookingInfo, [options: PaymentOptions]): Promise<BookingResult>

checkoutBooking Parameters

NAME

TYPE

DESCRIPTION

bookingInfo

BookingInfo

Information about the slot to be booked.

options

Optional

PaymentOptions

Information about the payment method and coupon codes.

Returns

Fulfilled - Results of the booking checkout.

Return Type:

Promise<BookingResult>

NAME

TYPE

DESCRIPTION

bookingId

string

ID of the booking that was checked out.

status

string

Status of the booking that was checked out. One of:

"Confirmed": Payment was successful or payment is to be done offline.
"Pending Payment": Payment is pending.
"Terminated": Payment failed or was cancelled.

Was this helpful?

Book a service

Copy Code

1import wixBookingsFrontend from 'wix-bookings-frontend';
2
3// ...
4
5let chosenSlot = // get chosen slot
6
7let formFieldValues = [
8  {
9    "_id": "20657271-c55f-43d6-adfd-39b7acc38e11", // name field ID
10    "value": "John Doe"
11  }, {
12    "_id": "87edd4e0-42b1-4802-8766-584f3eeb6436", // email field ID
13    "value": "john@doe.com"
14  }
15];
16
17let bookingInfo = {
18  "slot": chosenSlot,
19  "formFields": formFieldValues
20};
21
22wixBookingsFrontend.checkoutBooking(bookingInfo)
23  .then( (results) => {
24    let id = results.bookingId;
25    let status = results.status;
26  } );

Book a service with payment options

Copy Code

1import wixBookingsFrontend from 'wix-bookings-frontend';
2
3// ...
4
5let chosenSlot = // get chosen slot
6
7let formFieldValues = [
8  {
9    "_id": "20657271-c55f-43d6-adfd-39b7acc38e11", // name field ID
10    "value": "John Doe"
11  }, {
12    "_id": "87edd4e0-42b1-4802-8766-584f3eeb6436", // email field ID
13    "value": "john@doe.com"
14  }
15];
16
17let bookingInfo = {
18  "slot": chosenSlot,
19  "formFields": formFieldValues
20};
21
22let options = {
23  "paymentType": "wixPay_Offline",
24  "couponCode": "thecouponcode"
25}
26
27wixBookingsFrontend.checkoutBooking(bookingInfo, options)
28  .then( (results) => {
29    let id = results.bookingId;
30    let status = results.status;
31  } );

A full bookings scenario

This example demonstrates a simple bookings scenario. In the interest of simplicity the code does not deal with display considerations or validations that would normally be required to make sure users perform the flow as intended. The code assumes a page with the following elements:

serviceRepeater: Displays the services that can be booked. The elements in the repeater match the information we want to display for each service.
slotRepeater: Displays the slots that are available for the selected service. The elements in the repeater match the information we want to display for each slot.
formFieldRepeater: Contains input fields for collecting form field values needed to book the selected service. Each item contains one input element.
bookButton: Performs a booking checkout after a service and slot are selected and the form fields have been entered.

Copy Code

1import wixData from 'wix-data';
2import wixBookingsFrontend from 'wix-bookings-frontend';
3
4let formFields;   // form fields the selected service requires
5let selectedSlot; // service slot that was selected
6
7// When the page loads, query for all services and use the
8// results to set the service repeater's data.
9$w.onReady(function () {
10  wixData.query("Bookings/Services")
11    .find()
12    .then( (results) => {
13      $w("#serviceRepeater").data = results.items;
14    } );
15});
16
17// When the service repeater's data is set, populate its items
18// with the service data.
19export function serviceRepeater_itemReady($item, itemData, index) {
20  $item("#serviceName").text = itemData.serviceName;
21  $item("#tagLine").text = itemData.tagLine;
22  $item("#image").src = itemData.imageURL;
23}
24
25// When a service is selected, store its form fields for later,
26// get the service's available slots, and use the results to set
27// the slot repeater's data.
28export function serviceRepeaterContainer_click(event) {
29  $w("#serviceRepeater").forItems([event.context.itemId], ($item, itemData, index) => {
30    formFields = itemData.form.fields;
31  } );
32
33  wixBookingsFrontend.getServiceAvailability(event.context.itemId)
34    .then( (availability) => {
35      $w("#slotRepeater").data = availability.slots;
36    } );
37}
38
39// When the slot repeater's data is set, populate its items
40// with the slot data.
41export function slotRepeater_itemReady($item, itemData, index) {
42  $item("#dateText").text = itemData.startDateTime.toLocaleDateString();
43  $item("#timeText").text = itemData.startDateTime.toLocaleTimeString();
44}
45
46// When a slot is selected, store it for later, use the stored form
47// fields to set form field repeater's data.
48export function slotRepeaterContainer_click(event) {
49  $w("#slotRepeater").forItems([event.context.itemId], ($item, itemData, index) => {
50    selectedSlot = itemData;
51  } );
52
53  $w("#formFieldRepeater").data = formFields;
54}
55
56// When the form field repeater's data is set, populate its items
57// with the form fields.
58export function formFieldRepeater_itemReady($item, itemData, index) {
59  $item("#fieldInput").placeholder = itemData.label;
60}
61
62// When the booking button is clicked, grab the form field values,
63// build the bookingInfo object, and perform a booking checkout.
64export function bookButton_click(event) {
65  let formFieldValues = [];
66
67  $w("#formFieldRepeater").forEachItem( ($item, itemData, index) => {
68    formFieldValues.push({
69      "_id": itemData._id,
70      "value": $item("#fieldInput").value
71    });
72  } );
73
74  let bookingInfo = {
75    "slot": selectedSlot,
76    "formFields": formFieldValues
77  };
78
79  wixBookingsFrontend.checkoutBooking(bookingInfo)
80    .then( (results) => {
81      $w("#confirmationText").text = `Booking ID: ${results.bookingId} Status: ${results.status}`;
82    } );
83}
84