Skip to main content
All CollectionsWeb CheckoutManuals
How to Use Gift Cards on the Web Checkout
How to Use Gift Cards on the Web Checkout

Gift cards are prepaid vouchers that can be purchased by customers and then used as a form of payment for experiences.

L
Written by Lucia Burin Sestakova
Updated over a week ago

πŸ“£ UPDATE NOTICE πŸ“£

Please note that we have changed how features related to the gift card functionality are recorded in the script. Please see Gift Cards Feature List below for more information.

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. Gift cards are often used as gifts for friends, family, or colleagues, allowing recipients the flexibility to choose their own items or experiences.
​
Ventrata offers customers the opportunity to buy vouchers for any desired amount. These vouchers can subsequently be used to buy any product from your offering. They are redeemable on the customer-facing checkout widget.
​


Setting up Gift Voucher

Dashboard

  1. In the Ventrata dashboard, go to Web Checkouts > Checkouts .
    ​

    Web Checkout - Checkouts

  2. Select an existing checkout.

  3. Press the EDIT DETAILS button to edit the checkout.
    ​

  4. Scroll down the checkout form or simply search for 'Allow Gift Voucher' and check the box to allow purchasing gift vouchers through the checkout widget.
    ​

    Allow Gift Voucher

  5. Press the Update Checkout button to save your changes.
    ​

    Update Checkout


Gift Card Parameters

You have the option to further specify certain gift card parameters, such as minimum value amount and expiry period.
​

  1. In the Ventrata dashboard, go to Supplier Settings > Supplier Settings .
    ​

  2. Press the EDIT DETAILS button.
    ​

  3. Scroll down the supplier detail form or simply search for 'Gift Card Min Amount'.

  4. Enter the minimum value of a gift card in your default currency.
    ​

    Gift Card Min Amount

  5. Enter the gift card's expiration period in days, month or years.
    ​

    Gift Expiry

  6. Press the Update Supplier button.
    ​

    Update Supplier


Gift Cards Feature List

The Gift Cards feature supports several sub-features which can be added to your Ventrata checkout solution by doing one of two things:

  • Update Data-Config Attribute - by adding the below piece of code, replacing the subfeatureName with the name of one of the supported features and specifying its value, see sub-feature table below.
    ​



    πŸ“— TIP

    If you wish to include multiple sub-features, include all of them in the same gifts object. Remember, that the gifts object itself is included in the features object.


    "features": { 
    "gifts": {
    "subfeatureName": value,
    "subfeatureName1": value
    }
    }

  • Add sub-feature to Script or Button - add the sub-feature to your data-config for script or button in the following format:
    ​



    πŸ“— TIP
    If you wish to include multiple sub-features, include all of them in the same gifts object, each sub-feature separated by a comma. Remember, that the gifts object itself is included in the features object.
    ​


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

Ventrata Gift Cards feature supports the following sub-features:

Sub-feature

Default

Available Values

Description

allowed

true

true / false

when enabled from the dashboard, this feature may appear in the script

mode

by default not set

simple

default mode is the standard mode where the process begins with the selection of a product before proceeding to the gift card flow, as it is the default mode, it does not have to be defined in the script; simple mode allows the purchase of a standalone gift card without selecting a specific product using a dedicated button

openByDefault

false

true / false

allows the purchase of gift cards via web checkout; used only in default mode

disableAmountInput

false

true / false

disables the ability to adjust the per unit price of the gift card; used only in default mode


Gift Cards Flow

Default Mode

The customer selects a product where gift cards are allowed. On the Tickets page, a Buy as a gift card link appears below the unit selectors.

When the customer presses the link, the right-hand side of the widget is populated with a brief description of the feature, a field to enter the gift card value amount, followed by instructions about the minimum amount and terms of purchase.

πŸ“— TIP

Once the customer enters the gift card flow, a Back to ticket purchase link replaces the Buy as a gift card link, which allows the customer to exit the gift card flow and continue with the regular ticket purchase.

The customer has the option to:

  • set a total amount without selecting a unit, or

  • set an amount per unit, then select the number of the desired units; a break down of the purchase is listed above the 'Gift card value' field.

The Continue button takes the customer to the Checkout page, where

  • on the left-hand side of the page, the customer can enter their contact details
    ​



    πŸ“’ NOTE

    The email address is the only required field.


  • on the right-hand, a gradient background and a gift card icon is displayed with the value of the gift card
    ​



    πŸ“’ NOTE
    The colours of the gradient are pulled from the brand settings in the Ventrata dashboard.


  • a note stating the gift card's validity period as set up on the Supplier Settings page.
    the total amount due
    ​



    πŸ“’ NOTE
    If the promoAndGiftCardInput feature is set to true, you can allow the customer to redeem promotion codes or other gift cards. If the promoAndGiftCardInput feature is set to false, the promotion input field is not displayed and discounts cannot be applied. For more information, see the Checkout Feature List.
    ​



Simple Mode

Simple mode allows customers to purchase a gift card without having to select a product first.

πŸ“’ NOTE

In fact, the simple mode is a product-less flow altogether. Therefore, DO NOT include a productID in the data-config.

Settings

Add the gifts object and the underlying simple mode sub-feature to your data-config for script or button in the following format:

πŸ“’ NOTE

Please note, that the openByDefault and disableAmountInput are not supported in simple mode.

"features": { 
"gifts": {
"mode": "simple"
}
}


Default Currency

As simple mode is not tied to any specific destination or product, the list of supported currencies is pulled from the Web Checkout settings (Web Checkout > [selected-checkout] > Edit Details > Available Currencies). To make a specific currency the default currency, make sure that it appears first in the list of available currencies in your web checkout settings. To switch between currencies in simple mode, use the globe icon as usual.
​

Simple Mode: Default Currency


​
​

Flow

Upon pressing the dedicated gift card button, the customer is redirected to the simple gift card view.
​

Gift Cards: Simple Mode


The customer enters the gift card value in the dedicated field and presses the Continue button.
​
The customer is then taken to the Checkout page, where

  • on the left-hand side of the page, the customer can enter their contact details
    ​



    πŸ“’ NOTE

    The email address is the only required field.
    ​


  • on the right-hand, a gradient background and a gift card icon is displayed with the value of the gift card
    ​



    πŸ“’ NOTE
    The colours of the gradient are pulled from the brand settings in the Ventrata dashboard.
    ​


  • a note stating the gift card's validity period as set up on the Supplier Settings page.
    the total amount due
    ​



    πŸ“’ NOTE
    If the promoAndGiftCardInput feature is set to true, you can allow the customer to redeem promotion codes or other gift cards. If the promoAndGiftCardInput feature is set to false, the promotion input field is not displayed and discounts cannot be applied. For more information, see the Checkout Feature List.
    ​


    Simple Mode; Checkout Page


Gift Card Delivery Options

  • Deliver to Buyer - the customer enters their email address on the checkout page and the gift card is delivered to that address. That way the delivery of the gift card to the final recipient is handled by the buyer.

  • Deliver to Friend - the customer also has the option to send the gift card as a voucher directly to a friend (the recipient of the gift card). On the confirmation page following payment, another contact form becomes available to enter the recipient's full name, email and a personalised message.
    ​

Delivered To The Buyer (left) &amp; To Friend (right)


Custom Gift Card Settings

Update Data-Config

Add the one or both gift card features to your data-config for script or button to customise widget behaviour, see the Implementation Guide for more information.
​
​openByDefault (formerly openGiftFlow)
​
When this feature is enabled (set to true), the customer is automatically directed to the gift card flow for the product without needing to click a link. However, the gift card flow remains identical. This is particularly beneficial in instances where the product essentially functions as a gift card.

​
New syntax:

πŸ“’ NOTE

Please make sure, that any new features are recorded using the new syntax.

"features": { 
"gifts" : {
"openByDefault": true // by default: false
}
}


Old syntax:

"features": { 
"openGiftFlow": true, // by default: false
}


​disabledAmountInput (formerly disableGiftAmountInput)
​
This feature restricts the customer's ability to adjust the per unit price of the gift card; they can only choose the number of tickets.
​
New syntax:

πŸ“’ NOTE

Please make sure, that any new features are recorded using the new syntax.

"features": { 
"gifts" : {
"disableAmountInput": true // by default false
}
}


Old syntax:

"features": { 
"disableGiftAmountInput": true // by default false
}


​openByDefault + disableAmountInput (formerly openGiftFlow + disableGiftAmountInput)
​
The combination of the two features allows you to maintain a degree of control over the purchasing process for gift cards. That way, customers are seamlessly directed to the gift flow, while the per unit price of the gift card is fixed.
​
New syntax:

πŸ“’ NOTE

Please make sure, that any new features are recorded using the new syntax.

"features": { 
"gifts" : {
"openGiftFlow": true, // by default: false
"disableGiftAmountInput": true // by default false
}
}


Old syntax:

"features": { 
"openGiftFlow": true, // by default: false
"disableGiftAmountInput": true // by default false
}

Did this answer your question?