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.