📒 NOTE
Before you continue, please familiarise yourself with the Implementation Guide as it describes the flow characteristics required for this feature to work.
How to Enable Multi-Booking
Add multi-booking: true to the data-config attribute, for example:
<script
src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js"
type="module"
data-config='{"apiKey":"<YOUR_API_TOKEN>", "multibooking": true, "env": "live" }'>
</script>
This triggers the bottom bar, a component at the bottom of the page, which contains ongoing bookings within the created order.
📗 TIP
Learn more about checkout features and what they do. New features will be added in future releases.
This change also introduces a closable popup without automatic order cancellation. This behaviour allows your users to continue shopping without losing the bookings they have already made.
How to Edit an Order if External Cart Functionality is Enabled
If you are using the Ventrata checkout in combination with your custom cart or checkout pages, you may want to trigger our checkout for the edit booking flow. It can be done using regular ventrata-checkout triggers, which should contain the specific orderID and bookingID to correctly trigger the edit flow.
📒 NOTE
This functionality REQUIRES the presence of multibooking in the data-config attribute in one of your elements.
📘 EXAMPLE
<li
ventrata-checkout
data-config='{"apiKey":"<YOUR_API_TOKEN>","bookingID":"6fb927e9-1502-4b3f-924c-17ed855f6a2f","orderID":"8e520579-4cb6-40af-a464-668fb32c61b1","multibooking": true}'
>
Booking to Edit
</li>
The same can be achieved also programmatically:
window.Ventrata({
"apiKey": "<YOUR_API_TOKEN>",
"bookingID": "6fb927e9-1502-4b3f-924c-17ed855f6a2f",
"orderID": "8e520579-4cb6-40af-a464-668fb32c61b1",
"multibooking": true,
})
How to Trigger Checkout with a Specific Page
If you want to open the application with a specific page, or element, for example, the shopping cart button, and show a listing of the order summary to the customer (Checkout page), provide the orderID and page to render. In this case, it would be page: "checkout".
📗 TIP
To learn how to apply the configuration for the application, read the Checkout Implementation Guide.
📘 Example using JavaScript directly:
window.Ventrata({ "orderID": "8e520579-4cb6-40af-a464-668fb32c61b1", "page": "checkout" })📘 Example using the embedded solution:
<li ventrata-checkout data-config='{"orderID":"8e520579-4cb6-40af-a464-668fb32c61b1", "page": "checkout"}' > Cart </li>
Important Notes
Make sure that
multibookingis present in thedata-configattribute, or else your pages may not work correctly, for example, thebottom barmay not be visible to your users.
📒 NOTE
You can include
multibookingin the initial script element when adding the ventrata-checkout.min.js to your page.
📘 EXAMPLE
<script
src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js"
type="module"
data-config='{"apiKey":"<YOUR_API_TOKEN>", "env": "live", "multibooking": true }'
></script>If your page contains a custom cart, you may be interested in using the hybrid cart form of our checkout solution.
This way, language and currency are solely dictated externally by you, see configuration.
Use the Ventrata checkout solution only for the customisation of an already created booking as described in the How to Edit an Order if External Cart Functionality is Enabled section of his page.