Onsite Checkout - Implementation steps

1. Include the Javascript file

Add the following JavaScript file to your website. (Note: this is for the non-production environment).

<script type="module" src="https://uat-onsitecheckout.cdsglobal.co.uk/dist/main.js"></script>

2. Add HTML snippet

Add the following html to the desired areas of your webpage to initialise Onsite Checkout. Note: Onsite Checkout can be rendered in ‘embedded’ or ‘popup’ mode - examples below. Dynamic elements are contained within square brackets:

Embedded

<div class="onsite-checkout-embedded" data-api="uat-onsitecheckout.cdsglobal.co.uk/client" data-root="uat-onsitecheckout.cdsglobal.co.uk/dist" data-itemcode="[ITEM_CODE]" data-promotioncode="[PROMOTION_CODE]"></div>

Popup

<button class="onsite-checkout-popup-show" data-api="uat-onsitecheckout.cdsglobal.co.uk/client" data-root="uat-onsitecheckout.cdsglobal.co.uk/dist" data-itemcode="[ITEM_CODE]" data-promotioncode="[PROMOTION_CODE]">click here</button><div class="onsite-checkout-popup"></div>

Data Attributes

Data Attribute	Requirement status	Description
data-itemcode	Mandatory	Indicates the item being purchased
data-promotioncode	Mandatory	Indicates the promotion code being used to place the order
data-country	Mandatory	Indicates which country the recipient is situated in; if a country is not supplied, Onsite Checkout will IP detect the customer and set this value accordingly
data-currency	Mandatory	Indicates the currency in which the customer is paying; if a currency is not supplied, Onsite Checkout will automatically use the currency associated with the customer’s country (i.e. if the country is UK, it will use GBP)
data-email	Optional	Indicates the customers email address; if an email address is supplied then the email address field will be suppressed. This attribute is typically set if the customer is asked to supply an email address prior to initialising Onsite Checkout

IMPORTANT

• The domain of the host website where Onsite Checkout will be deployed must be whitelisted by CDS Global
• If Apple Pay is supported, the domain of the host website where Onsite Checkout will be deployed must be whitelisted within the Apple Developer portal