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.
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 |
| the apiKey-wide configuration template for all future checkouts |
| the |
| 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
π TIP
|
π 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.
In your Ventrata dashboard, go to Web Checkouts > Checkouts.
Select one of your existing checkouts.
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 |
| replace |
|
π TIP If the "env" attribute is not specified in the
|
Display Checkout on Element Click or Event Trigger
You can configure the checkout to display in one of two ways:
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.
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.