This capability supports several uses cases, such as:

directing customers straight to the Checkout page to review their order
opening the Cart Summary when they click a shopping cart button, or
guiding them to pages like Upgrade Your Experience or Pickups

Supported Values

The page input parameter allows you to define which part of the checkout flow to open.

📒 NOTE

The page input must always be used in combination with an orderID.

Input	Default	Available Values	Description
page	not set	`"upgrade"`	product offers to replace the current selection
		`"cross-sell"`	product offers in addition to the current selection
		`"pickups"`	select a pickup point
		`"dropoffs"`	select a dropoff point
		`"questions"`	booking and per-ticket questions
		`"order-questions"`	questions relevant to the entire order
		`"cart-summary"`	in embedded mode, a separate page with a list of bookings
		`"checkout"`	in pop-mode, shows customer details and cart summary on the same page
		`"package-availability"`	shows the selected multi-date package and available includes after tickets are selected

Implementation

Update the data-config attribute in the <script> tag (or button) to include the page you want the widget to open on when a customer lands on your website or clicks a Book now button.

<script 
  src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js" 
  type="module" 
  data-config='{
    "apiKey":"<YOUR_API_TOKEN>",
    "orderID": "<ORDER_ID>",
    "bookingID": "<BOOKING_ID>",
    "page": "checkout"
 }'>
</script>

📒 NOTE

bookingID is optional. It is required only if you are using multiboooking and you need to target a specific booking within the order. If you include it, it must be paired with orderID.

Opening an Order from a Different Session

If the order you are opening was created outside the browser session that's about to load Checkout, for example, created by your own backend, by a server-to-server API call, or in a different browser or tab, you must also pass the recoveryToken that was returned when the order was created.

<script 
  src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js" 
  type="module" 
  data-config='{
    "apiKey":"<YOUR_API_TOKEN>",
    "orderID": "<ORDER_ID>",
    "recoveryToken": "<RECOVERY_TOKEN>",
    "page": "checkout"
 }'>
</script>

📒 NOTE orderID alone identifies the cart, but Checkout also needs to verify that the browser opening it is allowed to. recoveryToken provides that proof for the first handoff into a new session. Without it, Checkout will reject the order.

You only need to pass recoveryToken once, on the first load in a given session. Checkout stores its own session state from then on, so subsequent page navigations within the same session do not need to keep resending it.

This applies the same way in the test environment as it does in live.

Detecting Order Confirmation

Once the customer completes payment, listen for ventrata-order-confirmation event to know the order is paid.

document.addEventListener('ventrata-order-confirmed',
   (event) => {
      alert(`ventrata order with ID :${event.detail.id} was successfully paid`)
    }
  )

📗 TIP

See Custom Events for the full list of events Checkout emits.

How to Trigger Checkout with a Specific Page

Supported Values

Implementation

Opening an Order from a Different Session

Detecting Order Confirmation