Get booking ID when booking is placed

How can i get the booking ID as soon as the user has placed the booking?

User will use the booking app to go through the flow - choose service, pick a time slot, enter details in form, checkout…

Is the booking ID exposed at any time, or can i access the booking ID s soon as the user completes the booking?

The reason for needing this: I am taking a crypto payment part way through (at form stage) and have a transaction ID. As i cant access any of the booking fields (in the prebuilt form), i am thinking to use the booking ID in an API call to update the booking with the transaction ID that i have.

Have you looked at the backend API’s, like onBookingConfirmed in events?

Thats for your reply and clarifying a few things.

If i remove the event from the function params, then how will it get the bookingId though? as it refers to “event . booking . _id” in the body of the funciton.

(https://www.wix.com/velo/reference/wix-bookings-backend/events/onbookingconfirmed)

The whole aim of this is to get that bookingID of the booking the user just booked. if there is a better, easier, preferred way i am all ears! :slight_smile:

@sonicswapstu You can catch the onbookingconfirmed event and store the bookingId in the collection. Then read the collection from FE.

Please disregard the path I was suggesting and refer to what Jacob has offered. The only way to use the event in the page code as you would like to is to first store it in the collection and then you can query for the id in the collection. Apologies for leading you astray.

@jacobg sounds promising, but which collection do you refer to?

@amandam no worries, thank you for getting me this far, appreciated.

I’m unsure though of which collection is referred to that I should save into?

It’s the final step for this integration, once I have the booking ID I can update the booking with my tx and have a very happy client, on Wix.

@sonicswapstu any collection of your choice. Simply create a new collection and use wix-data APIs to save data into it in BE and get data in FE.

@sonicswapstu No problem, I definitely misinterpret documentation myself sometimes too!
So…You will need to create a new collection for holding whatever booking events data you would like. Then in the FE you can query that collection to get the most recent bookingID.

Some things to consider: If you want to verify that the booking id you grabbed is connected to the user currently making the booking, you can use the backend function queryBookings to check this (in a jsw that you can call from the FE)

Another potential consideration is that if you query for the booking ID and nothing is returned for that user yet (or perhaps nothing that is from that moment) you will want to fire the query again. This could happen if your query fires prior to the event data being captured in the events.js event handler.

Can you point me to a doc that explains what is meant by a collection in this context? As in a list/array,Wix DB?

Hi Stuart, apologies on the naming conventions I wasn’t sure how deep you were into learning all of the WiX/Velo features.

Content collections are where you store any content related data. WiX apps (like bookings that you are using) automatically adds some of these tables, but you can add your own.

The Data API is how you will then query (there are backend and FE APIs available and depending on your approach you will want to decide where to put your queries)

Also make sure to read about permissions when creating a new collection. The collections added by the bookings app come configured (some can be modified), but when you create your own you will want to make sure to asses who should have permission to access the data.

Some reading…

Content Collections
Wix Data API
Content Collection Permissions

edit: also, i cleaned up our conversation to make it easier for anyone passing through to see how to do this and focus on what Jacob stated as he knows bookings much better than I do

Ok thanks. I am trying this out now and will report back. As long as i can save that bookingID from the event hook (in events.js or my jsw file…) then it should be ok.

Great and yes you definitely can. You will want to do in in events.js so that when the event is fired, you grab it and use insert to insert a new record to your collection. No need to keep an additional function in jsw. Keep me posted!

Can confirm i am able to grab the booking ID from the event and store it in a collection. Next step is to pull it back out on the front end and update the actual booking with my payment transaction ID.

Great progress thank you for your patience and help.

Here is the code for anyone else needing to write a field to a collection, please make sure you have defined the field you are writing to in the collection editor.

events.js:
import wixData from ‘wix-data’ ;

export function wixBookings_onBookingConfirmed ( event ) {
const bookingId = event.booking._id ;
let entry = {
“bookingId” : bookingId
};

wixData . insert ( “NameOfYourCollection” , entry ). then (( result ) => {
// OK
}). catch ( ( err ) => {
// Do something with err
});
}

I’m going to do a little test myself but first double check your collection ID. You said you are pointing to Name but wixData will want ID (case sensitive) which may be the same as the name, but that’s always a good first thing to check.

To double check your ID, in the content manager click the ellipsis next to “Add Item” and then click settings

Fantastic news! I know you are clearly working for a client deadline, but if you have the time after I think your use case would be interesting as a tutorial for how to connect a crypto payment to bookings and be able to insert the transaction ID without extra work for the user. Please share in our Tips,Tutorials category if you can and let us know if you need any more assistance.

Yes, i will indeed. There’s a few round the houses manoeuvres i’ve had to make, such as this storing a bookingId in a collection just to fetch it back out again - and then to update the actual booking with an additional field… But that is because i was reluctant to rebuild the whole booking system, and rather use the built-in one…!

The only addition i’ve done is to make a custom services list so i can pass a few bits of data to the modal that runs my crypto payment, so i know how many tokens to charge.

I’ll write it all up though, i am sure it would interest other devs wanting to do similar.

@sonicswapstu Yes! I think it’s common that a client may come to a dev having used the out-of-the box solutions and it is more complicated to extend those currently than to make your own. But we don’t always have the luxury of being part of the planning phase! glad it’s all working out

Just realised. It has been staring us in the face all this time…

The very last stage of the booking actually encrypts the entire booking JSON and puts it into the URL!

So, after all this, all i really need to do is have a listener for page URL change and then grab that segment, unencrypt it, and boom i have all the data i need!

Using this will save so much effort in manually entering to collections and then trying to fetch it back out again…

Oh wow! What a great discovery. I didn’t even think about checking the final url.