Component: Single Page Checkout

This feature is for the legacy Limio checkout. A newer version of our checkout is available.

Purpose: Allows customers to checkout and purchase their desired subscription. The component can be configured to allow customers to enter contact details, delivery address, payment method, gift subscription details, and billing details (as applicable).

We recommend your first read the before reading this document. This document describes in details the customisation of the checkout.

SPC.svg

Since the checkout experience is highly configurable, the component is managed in 3 places. Changes to the customer-facing UI are made through the component properties, details on what the customer is purchasing are made through the Offers and Products themselves, and Zuora payment integration is managed through the Settings screen.

Note: If reCAPTCHA is enabled on your site, it will perform checks on pages which use this component. Read more:

Customisation of the checkout via the Component Properties

Prop	Prop Label	Type	Default Value	Notes
heading	Checkout heading	string	Checkout	The heading of the component
subheading	Checkout subheading	string
The subheading of the component
innerHeading	Inner Heading	string	Please confirm your details	Text about the customer details heading
reverseHeadings	Reverse headings?	boolean	false	Reverses the heading and subheading order
customerDetailsHeading	Customer Details Heading	string	Your details	The heading above the customer details section
firstNameInputLength	First Name Length Limit	number	35	The character length limit of the first name. Applies to customer details and gift recipient details.
lastNameInputLength	Last Name Length Limit	number	35	The character length limit of the last name. Applies to customer details and gift recipient details.
emailInputLength	Email Address Length Limit	number	35	The character length limit of the email. Applies to customer details and gift recipient details.
paymentDetailsHeading	Payment Details Heading	string	Payment details	The heading above the payment details section
selectFirstPaymentType	Preselect First Payment Type	boolean	false	If set to true, this preselects the first payment method. Note: The first payment method will be the first option added to the Payment Methods field on the Attributes tab of the Offers screen. See section below ("Preselecting a first payment type").
billingAddressHeading	Billing Address Heading	string	Billing address	The heading above the billing address section
deliveryAddressHeading	Delivery Address Heading	string	Delivery address	The heading above the delivery address section
note: this will only show if the product has hasDelivery set to true
giftRecipientHeading	Your gift recipient details	string	Gift recipient heading	The heading above the gift recipient section. Note: this will only show if the offer has isGift set to true
hideTotals	Hide totals?	boolean	false	If true this hides the total from the order summary
goBackButtonText	Go back button text	string	Go back	Text for the go back button
continueButtonText	Continue button text	string	Continue	Text for the continue button
checkoutButtonText	Checkout button text	string	Checkout	Text for the checkout button
processingButtonText	Processing button text	string	Loading	Text for the loading button
autoRenewalHeading	Auto-renewal terms heading	string	Auto-renewal terms heading	The heading for the auto renewal terms
autoRenewalText	Auto-renewal terms body	richtext	richtext	Auto-renewal terms body
showOptionalFields	Highlight optional fields?	boolean	false	If set to true it will mark certain fields as optional
alwaysShowAuthorisationMessage	Always show authorisation message?	boolean	false	If set to true it will show the authorisation message
phoneNumberRequired	Phone number required?	boolean	false	if set to true it will mark the phone number field as required
hidePhoneNumberField	Hide phone number field?	boolean	false	if set to true it will hide the phone number field
disableBillingAddressInitially	Disable billing address input fields before customer data is provided?	boolean	true	If set to true it will disable the billing address until the customer details have been filled in
bringMobileBasketToTop	Bring mobile basket to top?	boolean	false	If true the basket will be placed at the top of the page. Note: this is only for the mobile view
disableRemoveFromBasket	Disable remove from basket?	boolean	false	If true a button will show to allow a customer to edit thier subscription in the order summary
showBasketShoppingRegion	Show basket shopping region?	boolean	false	If true the order summary will display the shopping region
enableFloatingBasket	Enable floating basket?	boolean	false
showContinueButton	Show 'Continue' button on customer details?	boolean	true	If true a continue button would be present under the customer details section
initialTermDisplay	Show initial term?	string	Initial term: {{today}} to {{endDate}}	Shows the initial term
consents	Consents & Information	schema		There are 3 types of consent types available: radio, checkbox and information presented as such
prefillMapping	Label Mapping	list
regionMessage	Billing region message	string		Shows the region message in the payment section
deliveryRegionMessage	Delivery region message	string		Shows the region message in the payment section for delivery orders
regionCta	Region CTA	string	Click here	Text for the region cta button
phoneNumberPicklist	Show a country code picklist for phone number?	boolean	false	If true the phone field willl show a dropdown of country codes which will get appended to the phone number
billingAddressOnTop	Show billing address above card details?	boolean	false	If true the billing address will be placed above the payment frame
countryFieldOnTopOfAddress	Show country field at the top of billing/delivery details?	boolean	false	If true there will be a country field above the address
address1Label	Billing Address line 1 label	string	Address line 1	Billing Address line 1 label
address2Label	Billing Address line 2 label	string	Address line 2	Billing Address line 2 label
cityLabel	Billing City label	string	{{city_name_type}}
stateLabel	Billing County / State label	string	{{state_name_type}}
postalCodeLabel	Billing Postal code / ZIP code label	string	{{zip_name_type}}
countryLabel	Billing Country label	string	Country	Billing Country label
deliveryAddress1Label	Delivery Address line 1 label	string	Address line 1	Delivery Address line 1 label
deliveryAddress2Label	Delivery Address line 2 label	string	Address line 2	Deilvery Address line 2 label
deliveryCityLabel	Delivery City label	string	City	Delivery City label
deliveryStateLabel	Delivery County / state label	string	{{state_name_type}}
deliveryPostalCodeLabel	Delivery Postal code / ZIP code label	string	{{zip_name_type}}
deliveryCountryLabel	Delivery Country label	string	Country	Delivery Country label
deliveryCompanyLabel	Delivery Company label	string	Company	Delivery Company label
compactAddressPlaceholderText	Compact address form placeholder text	string	Start typing your address...	Text for the compact address placeholder
showCompanyField	Show Delivery Company Field?	boolean	false	If true the delivery company field will be present
invalidFirstNameMessage	Invalid first name message	string	First name is required	Text for invalid first name
invalidLastNameMessage	Invalid last name message	string	Last name is required	Text for invalid last name
invalidEmailMessage	Invalid email message	string	Please provide a valid email address	Text for invalid email
invalidPhoneMessage	Invalid phone number message	string	Please provide a valid phone number	Text for invalid phone number
invalidAddressMessage	Invalid address message	string	Address is required	Text if the address field is empty
invalidCityMessage	Invalid city message	string	City is required	Text if the city field is empty
invalidStateMessage	Invalid state/county message	string	{{state_name_type}} is required	Text if the state field is empty
invalidPostalCodeMessage	Invalid zip/postal code message	string	{{zip_name_type}} is required	Text if the zip code/post code field is empty
invalidCountryMessage	Invalid country message	string	Country is required	Text if the country field is empty
invalidPaymentMethodMessage	Invalid payment method message	string	Oops! Something went wrong. Please wait a moment and try again.	Text for invalid payment method
invalidGiftStartDateMessage	Invalid gift start date message	string	Please provide a gift start date	Text for invalid gift start date
giftRecipientEmailLabel	Gift recipient email label	string	Your gift recipient details	Gift recipient email label
giftRecipientStartDateLabel	Gift recipient start date label	string	Start date	Gift recipient start date label
giftRecipientStartDateDescription	Gift recipient start date description	string	This is when your recipient will be emailed their gift. Their gift will expire a year from purchase date	Gift recipient start date description
showGiftMessage	Display gift message	boolean	true	If true a gift message text box will appear
giftMessageLabel	Gift message	string	Gift message	Gift message label
giftMessagePlaceholder	Gift message placeholder	string	Write a personal message	Gift message placeholder in the textbox
giftDeliveryCheckboxLabel	Gift recipient delivery address checkbox label	string	Recipient delivery address	Gift recipient delivery address checkbox label
giftMessageLimitReachedMessage	The character limit has been reached	string	The character limit has been reached	Text for when the character limit in the gift message field has been reached. The limit is defaulted to 255.
giftDeliveryCheckboxText	Gift recipient delivery address checkbox text	string	Don’t know the delivery address? Have us ask them later	Gift recipient delivery address checkbox text
emailSmallPrint	Email small print for renewal checkout	richtext	To update the email associated with your account, please contact us.	Email small print for renewal checkout
orderCompleteURL	Order complete URL	string	/complete/	Order complete URL
emailValidationRegex	Email validation regular expression	string		Email validation regular expression
defaultPurchaseAction	Default Purchase Action for Existing Basket	picklist		Default Purchase Action for Existing Basket

Customisation of the Checkout via Offers and Products

Single Page Checkout via Offers and Products

Customisation of the Checkout via Settings

HPM Integration

• Authorisation Specific Amount

• Authorisation Message

• Text to display below payment information - allows the customer see the regulatory information related to the payment method that is displayed below the Zuora Iframe

How to set up Zuora Payment Gateways in Limio

Types of checkouts

Delivery

delivert.png

Screenshot_2022-11-24_at_10.17.27.png

Gift

gift.png

Screenshot_2022-11-24_at_16.16.16.png

Student

Screenshot_2022-11-24_at_16.16.56.png

Screenshot_2022-11-24_at_16.16.48.png

Trial behaviour

When a customer is authenticated, Limio will check if they have an existing (active or not) Limio Subscription with a set to true. If they do, Limio will set a cookie called that will persist on the user session.

It is then possible to use a Limio Component to show a trial message on the offer page. This is supported for example in the Offer component prop ''.

Preselecting a first payment type

If an offer has multiple payment types associated to it, the order which the payment types are displayed is determined by the order which they are added. Payment types will be ordered from left to right.

In the example below, the "Zuora Card Payment" would be the first payment type.

Screenshot_2022-12-01_at_13.40.36.png