Unexpected token on checkoutBooking( )

Ask the community
, ,
1

Hi guys,
Almost at the finish line with my custom Booking page. I’m running into an odd JSON error when trying to execute checkoutBooking( ) to submit my booking.

Here is a screenshot of my editor:

1674×517 88.9 KB

Highlighted in RED is the formFieldValues array, _id’s of each field came from the services field list.
Highlighted in BLUE is the bookingInfo array, long value of “slot” is the slot._id
Highlighted in BLACK is the error.

Here is my checkout function, executed when the user hit’s the next button:

export function checkoutButton(event) {
//Add your code for this event here:
let cleanForm = true ;
let formFieldValues = ;
//build FormField

for ( let f=0; f<form.length;f++) {
let fieldname = ‘#i’+form[f].label.replace(’ ‘,’‘)+’';
console.info(form[f]._id)
console.info(form[f].label);
console.info($w(fieldname).value);
formFieldValues.push( {
“_id”: form[f]._id,
“value”: $w(fieldname).value
} );

}

let options = {
“paymentType”: “wixPay_Offline”,
“couponCode”: “militaryhonor”
}
//setServiceId
let bookingInfo = {
// selected slot object
“slot”: setServiceId,
“numberOfSpots”:“1”,
// form filed values collected above
“formFields”: formFieldValues
};

console.info(formFieldValues) 
console.info(bookingInfo)

if (cleanForm) {

    console.info('Submitting Registration')

// booking checkout
wixBookings.checkoutBooking(bookingInfo, options)
.then( (results) => {
$w(‘#iStatus’).text = results.status;
console.info(results.status);
} )
. catch ( (error) => {
console.info(error)
$w(‘#iStatus’).text = error;
} );
}
else {
return false ;
}
}

2

We will need your site editor URL and the page where the issue occurs in order to take a closer look at the issue.

3

Here you go:

https://editor.wix.com/html/editor/web/renderer/edit/aeae1048-870f-4192-b993-d8c6ddde72e4?metaSiteId=59353387-f95d-435f-9d8d-b7d86cd3fcce&editorSessionId=a406f1b7-daf6-486b-879d-a8647e4df644&referralInfo=my-account

This is a LightBox page that has incoming variables from the page that executes it. In order to execute please follow the below steps:

  1. Go to: https://www.warriorscalltactical.com/book-online (Our Service Page)
  2. On any Service locate the highlighted “blank” area and click it. There is a hidden link here to execute the new LightBox

766×443 36.1 KB

  1. Once clicked the system will make you login or create a account.
  2. Next the Light Box in question will open.
  3. Fill out the form and click Next
    • The Next button will execute the function checkoutButton() with the code in question.

I believe this has to do with a bad JSON object, but I can’t figure out why.

Note, I have some commented code in there as I was trying to manually build my JSON to see if I can find the issue.

David

4

Figured it out.

Documentation and the examples don’t clearly state that the whole slot JSON needs to be sent and not just the slot id.

Changed from:

let bookingInfo = { 
"slot":slot._id,
"numberOfSpots":"1",
"formFields":formFieldValues
};

To:

let bookingInfo = {  
"slot":slots[0], 
"numberOfSpots":"1", 
"formFields":formFieldValues
};  

/* slots[0]:
 * {
 *   "_id": "eyIjoxN2xhc3NJbnN0YW5jZUlkIjoiNjc4ZDYyMzItZ",
 *   "startDateTime": "2018-11-20T08:00:00Z",
 *   "endDateTime": "2018-11-20T09:00:00Z",
 *   "serviceId": "a642caa6-1aba-4aa4-9f07-5aed39fbd3ba",
 *   "capacity": 20,
 *   "remainingSpots": 20,
 *   "staffMemberId": "5a55aa7c-8e5d-488a-8191-7d430f2cdcc2"
 * }
 */
5

You saved my day, thanks