In some cases, you may want to combine the convenience of the standard Ventrata checkout widget with the flexibility of your own custom cart. You can do so by letting customers use the widget until they reach the Contact Details page, and then switch to a custom cart from there.
This approach gives you more control over the checkout experience without needing to build everything from scratch.
When to Switch
The ideal time to switch is after the customer selects their products and sets up their cart, but before they enter any personal or payment information. This happens when the checkout flow reaches the Contact Detail page.
At this point, the widget has collected all product-related details, and you are free to redirect the customer to a custom cart.
How it Works
By default, the checkout widget does not redirect customers to external pages. To build a hybrid flow, you need to listen for a custom event and handle the redirection manually.
Event: ventrata-open-external-cart
This custom event is automatically triggered by the widget when the customer reaches the Contact Details page. No personal information has been collected yet, at this point.
Use this event to trigger a redirect to your custom cart:
document.addEventListener('ventrata-open-external-cart',
({detail: {id}}) =>
alert(`order ${id} created and flow is finished, now you can redirect`
)
)📒 NOTE
Replace the alert ( .. ) with your actual redirect logic.
If You Need Customer Contact Details
If your custom flow requires collecting the customer's contact info, you will need to listen for two events - in this specific order:
ventrata-open-external-cart- triggers when the checkout reaches the Contact Details page.ventrata-order-updated- fires when the order is updated, including when contact details are added.
📒 NOTE
The first event signals that the user has reached the contact step, while the second confirms that their details are available. Redirecting too early may result in missing or incomplete data.
Redirect only after the customer's details are available.
Benefits of a Hybrid Approach
🎨 Customisation & Layout Control
Create a custom UI, add add extra steps, or break up the process into multiple pages.
🔄 Pre-Checkout Data Enrichment
Add custom logic before collecting user info, such as checking availability with external systems, or tagging the cart with extra data.
🌍 Localisation or Legal Compliance
Implement region-specific flows or legal consent steps.