I’m attempting to create a custom payment and registration system for some courses we are offering through our website and I am really struggling to figure out what I’m doing wrong. Any help would be really appreciated. What am I doing wrong to cause these errors? What modification needs to be made to the code below to make this work? Thank you in advance!
When attempting to submit a bookings request through the wixBookings module (i.e. wixBookings.checkoutBooking(bookingInfo) ), I am getting errors that I cannot resolve.
The screen prints below show the errors. They are from the Firefox and Microsoft Edge Developer Consoles. I also logged the contents of the ’ bookingInfo ’ object in the logs prior to calling wixBookings.checkoutBooking(bookingInfo) , so you can see what is being sent during the call.
Microsoft Edge:
Firefox:
Here is my code. I have highlighted the call to wixBookings.checkoutBooking(bookingInfo) in RED to help make it easy to locate the relevant code. Also, note that this remains a work in progress - so there are some hard coded values in places and other comments to go back and fill in code later.
import { createToken, encodeCard, calcSubscriptionExp } from “public/stripeAPI.js” ;
import { onetimeCharge, subscriptionCharge, createCustomer } from ‘backend/stripeProxy’ ;
import { assignRole } from ‘backend/roleAssignment’ ;
import { session } from ‘wix-storage’ ;
import wixUsers from ‘wix-users’ ;
import wixBookings from ‘wix-bookings’ ;
import wixLocation from ‘wix-location’ ;
import wixData from ‘wix-data’ ;
//Pull in the Pricing session variable and display on the payment input form
$w.onReady( function () {
let loadedPlanPrice = session.getItem( “clientPlanPrice” );
$w( ‘#passedAmt’ ).value = loadedPlanPrice.toLocaleString( ‘en’ );
});
var payment;
var custFullName;
var items = [ “price_1I5jQMGhT9A543xYJSEzsQOw” ];
var address = ;
var subscriptionLength = 42 ;
var customerEmail;
let slotOptions;
let selectedSlot;
let slotIndex;
//Payment & Subscription Function - Execute the following on ‘Submit’ button click
export function paySubmit_click(event, $w) {
/ /Disable the submit button so they can't click twice & submit two requests to the payment API
$w( '#paySubmit' ).disable();
//Retrieve some session variables (chosen plan, first name, last name) captured on an earlier form
**let** planRecurr = session.getItem( "clientPlanRecurr" );
**let** custFirstName = $w( "#custFirstNm" ).value;
**let** custLastName = $w( "#custLastNm" ).value;
//Create a concatenated customer name string
custFullName = custFirstName.concat( " " ).concat(custLastName);
//Determine if the customer chose the One Time Payment option or the Subscription Option
//(planRecurr TRUE = Subscription, planRecurr FALSE = One Time)
//Customer chose one time payment option
**if** (planRecurr === "false" ) {
//Create and process the customer's credit card - one time charge
createToken(encodeCard(createCard())).then((token) => {
onetimeCharge(token, createOneTimePayment()).then((chargeResponse) => {
//If the credit card transaction SUCCESSFUL then assign the user id to the desired
//security role and process the course booking
**if** (chargeResponse.status === "succeeded" ) {
//Assign security role to signed in User ID
**let** user = wixUsers.currentUser;
**let** customerID = user.id;
assignRole(customerID)
.then((resultsStatus) => {
//Enter More code here to complete booking
} );
} **else** {
//If the credit card transaction FAILED then return error to input screen
//and enable Submit button
//Enter more code here to reset payment input screen with ERROR
}
});
});
}
//Customer choose Subscription Option
else {
//Create and process the customer’s credit card - subscription charge
createToken(encodeCard(createCard())).then((token) => {
//Since subscription chosen, create a customer in Stripe using Stripe API
customerEmail = $w( "#custEmail" ).value;
createCustomer(customerEmail, createCustDetails()).then((id) => {
**let** item = { "customer" : id, "items[0][plan]" : items, "cancel_at" :
calcSubscriptionExp(subscriptionLength) }
//Create and process the customer's credit card - subscription charge with
//subscription expiration
subscriptionCharge(token, item).then((chargeResponse) => {
//If the credit card transaction SUCCESSFUL then assign the user id to the
//desired security role and process the course booking
**if** (chargeResponse.status === "active" ) {
//Assign security role to signed in User ID
**let** user = wixUsers.currentUser;
[**let**](let customerID = user.id;
) [ customerID = user.id;](let customerID = user.id;
)
assignRole(customerID)
.then((resultsStatus) => {
//Enroll customer in selected Course using WIX Bookings
//Get thet available slots from the Bookings entry
wixBookings.getServiceAvailability(
"61f446d7-b59b-42cd-962a-d775c6947669" )
.then((availability) => {
//Set slots = the slot object returned
**let** slots = availability.slots
//Set the Name & Email values on the Bookings Form
//Fields. First create the formFieldValues array with
//the _id & value for each field
**let** formFieldValues = [{
"_id" : "00000000-0000-0000-0000-000000000001" ,
"value" : custFullName
},
{
"_id" : "00000000-0000-0000-0000-000000000002" ,
"value" : customerEmail
}
];
//create the bookingInfo (Slot Object + Form Field Values)
// to pass to the checkoutBookings method
**let** bookingInfo = {
"slot" : slots,
"formFields" : formFieldValues
};
wixBookings.checkoutBooking(bookingInfo)
.then((results) => {
$w("#confirmationText").value = `Booking ID:
${results.bookingId} Status: ${results.status}`;
});
//If bookings is successful, hide the payment fields
//on the input form and display a Thank You.
$w( '#paymentFields' ).hide;
//Enter Thank You logic here
});
})
} **else** {
//If the credit card transaction FAILED then return error to
//input screen and enable Submit button
//Enter more code here to reset payment input screen with ERROR
}
});
});
});
}
}