Before you begin
This guide provides an overview of the hybrid checkout workflow. Each step links to a dedicated implementation guide covering the required configuration, APIs, and examples.
This guide explains how to build a custom checkout experience around the Ventrata Checkout Widget while continuing to use Checkout for booking creation, validation, and customer data collection.
A hybrid checkout lets your application take control of the customer journey while continuing to rely on Checkout for booking creation, validation, and customer data collection.
Typical reasons for building a hybrid checkout include:
Custom cart or checkout UI
Custom payment processing
CRM or loyalty integrations
Additional business validation before payment
Custom marketing or upsell flows
Hybrid Checkout Flow
During a hybrid checkout, control moves between the Checkout Widget and your application as the customer progresses through the booking journey.
Checkout Widget
│
Customer selects products
│
Order created
│
Checkout hands control to your application
│
Your application manages the cart
│
├── Order complete?
├── Yes → Continue to payment
└── No
│
Determine the first incomplete step
│
Re-open Checkout on the required page
│
Customer completes missing information
│
Return to your application
│
Proceed to payment
The Checkout Widget continues to own booking creation, validation, and order updates, while your application controls the overall checkout experience, including payment and any custom business logic.
Step 1: Create a Hybrid Cart
Begin by configuring Checkout Widget to hand control to your application when the customer reaches the Contact Details page.
This creates the booking and order inside Ventrata while allowing your own application to continue the checkout journey.
Step 2: Listen for Checkout Events
Checkout communicates with your application through Custom Events.
These events notify your application when important actions occur, such as:
Order creation
Order updates
Customer details being updated
Checkout completion
Opening the external cart
Rather than polling the API, your application should respond to these events to keep its own state synchronised with Checkout.
Step 3: Validate the Order Before Payment
Before starting payment, your application should verify that the order is complete. This ensures the customer has provided all required booking information before payment is confirmed.
Package availability
Booking questions
Unit questions
Contact details
Pickup selection
Dropoff selection
Order questions
If any required information is missing, determine the first incomplete step and return the customer to Checkout to complete it before continuing.
Step 4: Return the Customer to Checkout
If additional information is required, send the customer back into Checkout on the page that requires their attention.
Instead of restarting Checkout from the beginning, launch it directly on the appropriate page, allowing the customer to continue where they left off.
Examples include:
Contact Details
Booking Questions
Pickup
Dropoff
Order Questions
Recommended Integration Flow
The customer selects products using the Checkout Widget.
Checkout creates the order.
Checkout transfers control to your external cart.
Your application listens for Checkout events and synchronises its state.
Before payment, validate the order.
If required information is missing, reopen Checkout on the appropriate page.
Continue listening for order updates.
When the order is complete, begin payment.
Complete the booking.
Following this workflow allows your application to provide a fully customised checkout experience while continuing to rely on Checkout for booking validation and data collection.