Overview: How to customise the Limio Modular Checkout

The Limio Modular Checkout is the next iteration of the Limio Commerce platform checkout ✨.

Instead of the single, inflexible component used for our legacy checkout, Modular Checkout uses a series of flexible subcomponents to give full flexibility on the layout of the checkout. Modular Checkout is delivered via a component leveraging the native React functionalities of Form (learn more in Modular Checkout Subomponents in Form), which has the following benefits:

• Structured data collection: Forms provide an organized approach to gather all the necessary information for completing a purchase, ensuring nothing is missed.
• Validation and error handling: Forms allow you to validate user input via regex, reducing errors and ensuring accurate data submission.
• Improved user experience: Forms with tooltips and labelling enhance the checkout experience by guiding users and making data entry more convenient.
• Flexibility and customisation: Forms enable you to customise the checkout layout and order of fields to match your specific business needs, creating a tailored experience.
• Data consistency and integrity: By enforcing a consistent data structure, forms help maintain data integrity, facilitating accurate calculations and order management.
• Easier integration and processing: Forms simplify the integration of checkout data with server-side applications or APIs, ensuring seamless communication and processing.

Limio Modular Checkout is available since Release 84. It requires to use the new Page Builder v2.

This document will give you an overview of the customisation available for the Modular Checkout. If you are looking for a detailed document on the Limio Component, go here: Component: Form . If you are interested in the legacy checkout, go to Overview: How to customise the legacy Limio Checkout

Made for subscription companies (and beyond)

Limio Modular Checkout allow for our Customers:

• Allow for quantity-based products 
• Sell multiple products in one transaction
• Sell one-off products
• Run tax and complex pricing calculation
• Have renewal checkout for existing termed subscription

In the background, a basket or cart is created and persist. The cart can be displayed and can also be used for abandon basket campaign. Additionally within the checkout, Layouts can be used to display a Product Basket side by side with your Form.

Conversion optimised

It is also optimised to accelerate input, for example:

• Prefill fields from identity solutions such as name and email
• Add express checkout options such as Apple Pay, PayPal and Google Pay as soon as possible
• Provide integrations to prefill addresses such as Loqate

Configurable via no code

It is fully configurable within the Limio app, via subcomponents or the Style editor:

Subcomponents allow to add:

• As many fields as you want including non Limio Standard fields to collection additional information in the Checkout, Field Types include:
  • First Name (First Name Field)
  • Last Name (Last Name Field)
  • Email (Email Field)
  • Address Fields (Address Fields)
  • Payment (Payment Field)
  • Display Text (for headings, additional information, copy) (Display Text)
  • Generic Field that can collect standard HTML types (Field, which allow Input, Date, Number, Email Address, Text Area, Phone Number, Dropdown, Radio Buttons, Checkbox)
• Rearrange the order of fields with a drag an drop interface
• Change copy, validation rules, required fields and size of the fields

Fields can be based on conditions, to allow for more dynamic experiences, for example surfacing fields when specific products are in the basket or when certain payment methods are selected.

Analytics in mind: The Limio Form also works well with analytics and reporting solution, for example to capture user events from the checkout and making sure orders pass through parameters such as UTM tags.

A/B test and experiments: It is possible to have as many checkouts as possible, allowing to A/B tests checkout, deliver specific checkout for specific Limio Offer, in different languages, or to support brand-specific or product-specific UX.

Compliance: There is also a range of off-the-shelf enforcement components for the checkout, such as Block Related Purchase Component or Block Purchase Dialog to prevent duplicate orders.

Extensible with code: Finally, it also supports adding more components, whether Limio Component or custom components, that can handle logic externally to the Form or interact with it. Those components can leverage the Limio SDK, for example to:

• Display custom fields that require external validation and lock the checkout before those validation rules are met.
• Show the basket in a different manner than the Limio basket.
• Enforce specific rules based on who the customer is and what they have in their basket.