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 automatically created or appended 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
Information about the slot to be booked.
Information about the payment method and coupon codes.
Returns
Fulfilled - Results of the booking checkout.
Return Type:
NAME
TYPE
DESCRIPTION
ID of the booking that was checked out.
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?
1import wixBookingsFrontend from 'wix-bookings-frontend';23// ...45let chosenSlot = // get chosen slot67let formFieldValues = [8 {9 "_id": "20657271-c55f-43d6-adfd-39b7acc38e11", // name field ID10 "value": "John Doe"11 }, {12 "_id": "87edd4e0-42b1-4802-8766-584f3eeb6436", // email field ID13 "value": "john@doe.com"14 }15];1617let bookingInfo = {18 "slot": chosenSlot,19 "formFields": formFieldValues20};2122wixBookingsFrontend.checkoutBooking(bookingInfo)23 .then( (results) => {24 let id = results.bookingId;25 let status = results.status;26 } );
1import wixBookingsFrontend from 'wix-bookings-frontend';23// ...45let chosenSlot = // get chosen slot67let formFieldValues = [8 {9 "_id": "20657271-c55f-43d6-adfd-39b7acc38e11", // name field ID10 "value": "John Doe"11 }, {12 "_id": "87edd4e0-42b1-4802-8766-584f3eeb6436", // email field ID13 "value": "john@doe.com"14 }15];1617let bookingInfo = {18 "slot": chosenSlot,19 "formFields": formFieldValues20};2122let options = {23 "paymentType": "wixPay_Offline",24 "couponCode": "thecouponcode"25}2627wixBookingsFrontend.checkoutBooking(bookingInfo, options)28 .then( (results) => {29 let id = results.bookingId;30 let status = results.status;31 } );
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.
1import wixData from 'wix-data';2import wixBookingsFrontend from 'wix-bookings-frontend';34let formFields; // form fields the selected service requires5let selectedSlot; // service slot that was selected67// When the page loads, query for all services and use the8// 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});1617// When the service repeater's data is set, populate its items18// 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}2425// When a service is selected, store its form fields for later,26// get the service's available slots, and use the results to set27// 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 } );3233 wixBookingsFrontend.getServiceAvailability(event.context.itemId)34 .then( (availability) => {35 $w("#slotRepeater").data = availability.slots;36 } );37}3839// When the slot repeater's data is set, populate its items40// 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}4546// When a slot is selected, store it for later, use the stored form47// 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 } );5253 $w("#formFieldRepeater").data = formFields;54}5556// When the form field repeater's data is set, populate its items57// with the form fields.58export function formFieldRepeater_itemReady($item, itemData, index) {59 $item("#fieldInput").placeholder = itemData.label;60}6162// 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 = [];6667 $w("#formFieldRepeater").forEachItem( ($item, itemData, index) => {68 formFieldValues.push({69 "_id": itemData._id,70 "value": $item("#fieldInput").value71 });72 } );7374 let bookingInfo = {75 "slot": selectedSlot,76 "formFields": formFieldValues77 };7879 wixBookingsFrontend.checkoutBooking(bookingInfo)80 .then( (results) => {81 $w("#confirmationText").text = `Booking ID: ${results.bookingId} Status: ${results.status}`;82 } );83}84