Skip to main content
Implementation Guide

Discover the Ventrata checkout widget features and how to implement them.

Lucia Burin Sestakova avatar
Written by Lucia Burin Sestakova
Updated over 2 months ago

Ventrata provides a streamlined checkout solution that enables customers

to add selected products to a virtual shopping cart and proceeding through a series of steps to complete the purchase.

Ventrata checkout solution supports two modes: embedded and pop-up.

Pop-up

Embedded


Configuration Structure

Ventrata checkout features a sophisticated customisation flow. You have your a global (apiKey-wide) configuration stored in the cloud, which serves as a template for all future checkouts. This template includes settings like colours, Google Analytics configuration, and more, allowing for easy integration without additional adjustments. You can manage these configurations via the Ventrata dashboard or via client-specific support requests.

The configuration structure follows a layered hierarchy, where settings can be overriden by more specific configurations. The order is as follows:

​Cloud > Script Tag > Specific Page Element (for example, button, anchor)

Layer

Description

Cloud

the apiKey-wide configuration template for all future checkouts

Script Tag

the <script> tag is embedded in your website's HTML enables Ventrata checkout and can override the cloud settings

<page element>

individual page elements, such as buttons or anchors, can trigger the checkout as a pop-up and load configurations like language, currency and options; these settings are specified in the data-config attribute


πŸ“— TIP
Using button elements is recommended due to their natural semantic correctness.


πŸ“˜ EXAMPLE

Imagine your cloud configuration specifies a button colour of #AE8173. If a page contains the <script> tag with a button colour of #820857, the checkout pop-ups on that page will adopt the colour #820857 instead of the cloud default.

Now, suppose there are three pop-up buttons on this page, all configured with #820857. If you want to customise only the third button with a unique colour, such as #6FD316, you can specify this colour in the data-config attribute for that button.

Consequently:

  • The first two buttons will retain the #820857 colour from the <script> tag.

  • The third button will display #6FD316.

  • If you remove the colour setting from the <script> tag, the first two buttons will revert to the cloud colour #AE8173, while the third button remains unchanged.


Integrate Ventrata Checkout

Below are the basic steps to integrate Ventrata checkout, which, by default, operates in pop-up mode. While most settings apply to both pop-up and embedded modes, if you choose to implement the embedded mode, please follow the steps on how to integrate the checkout in embedded mode.

Locate apiKey

πŸ“’ NOTE

Each layer of the configuration flow is optional with the exception of the apiKey. An apiKey is required in at least one page element.

  1. In your Ventrata dashboard, go to Web Checkouts > Checkouts.

  2. Select one of your existing checkouts.

  3. Your apiKey is located on the Checkout Details tab of the selected checkout.
    ​

API Key


Add <script> tag

To integrate Ventrata checkout, add the below <script> tag to the HTML pages of your website.

Live

The script will load the configuration for your specific account with the production gateway, therefore all payments and orders will be recorded as if they were orders made by customers.

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

Test

The script will load the configuration for your specific account in a test environment.

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

Attribute

Description

apiKey

replace <YOUR_API_TOKEN> with the apiKey located in your checkout

"env"

"live" - all payments and orders will be recorded as if they were orders made by customers

"test" - all payments and orders will be recorded as test and will not be included in your accounting


πŸ“— TIP

If the "env" attribute is not specified in the <script> tag, the checkout will remain in a test environment by default.



Display Checkout on Element Click or Event Trigger

You can configure the checkout to display in one of two ways:

  1. Static analysis

    • Pop-up Mode: Use the ventrata-checkout attribute on the HTML element.

    • Embedded Mode: Use the ventrata-embedded-widget attribute on the HTML.

  2. Dynamic Execution

    • Use the global JavaScript function called Ventrata.

πŸ“— TIP

For more information, refer to this article.


Supported Configuration Inputs

Configuration inputs are settings and parameters that define how checkout operates and behaves.

πŸ“— TIP

Learn more in our list of supported configuration inputs.


Checkout Feature List

Ventrata offers specific functionalities designed to facilitate the purchase process and enhance the user experience.

πŸ“— TIP

Learn more in our checkout feature list.


Gift Cards Feature List

Gift cards typically have a stored value that can be spent over multiple transactions until the balance is depleted, for example, for an experience and/or a gift shop item.

Set up the basic properties for your gift cards and take advantage of features that allow you to offer gift cards redeemable for any product or ones tied to a specific pre-selected product.

πŸ“— TIP

Learn more in our article on gift cards.


Option Selector Feature List

The Option Selector feature, along with its sub-features, lets you customise how product options and tour commentary languages are presented. With various settings, you can create a highly tailored layout.

πŸ“— TIP

Learn more in our article on the option selector feature.


Colour Themes

Ventrata checkout offers two basic colour modes: LIGHT and DARK. You can customise these modes using the data-config attribute in your checkout.

Additionally, specific elements of your web checkout can be configured as a JavaScript object for further customisation.

πŸ“— TIP

Learn more in our article on colour themes.


Multi-booking

Multi-booking is an application flow, where your users are able to add multiple products to the cart. It allows you to have a fully managed shopping cart flow through our application or just provide an edit action for already created bookings within the order.

πŸ“— TIP

For a full description of this flow, please refer to Multi-Booking.


Manage My Booking (Check-in Portal)

The Check-In, also known as Manage My Booking (MMB), portal allows customers to reschedule, cancel or update their bookings, as well as redeem reseller vouchers.

πŸ“’ NOTE

The current Manage My Booking solution is part of the old checkout (V2 and older), which is no longer supported. You can, however, implement this solution into your new checkout (V3) using the steps in this article.

πŸ“— TIP
If you would like to implement a check-in page (manage my booking) into your website, please follow this space and stay tuned for more information coming soon.


Custom Events

Integrate the Ventrata checkout solution to external applications using custom events.

πŸ“— TIP

For a full list of custom events, please refer to this article.

Did this answer your question?