Modular Checkout
The Limio Modular Checkout is the next iteration of the Limio Commerce platform checkout ✨.
Instead of the single, inflexible component, Modular Checkout uses a series of flexible subcomponents to give full flexibility on yoyur checkout with no-code.
Modular Checkout is delivered via a component leveraging the native React functionalities of Form (learn more in https://docs.limio.com/components/component-library/modular-checkout-components/component-checkout-form). It has the following benefits:
Structured data collection: Forms ensure all required purchase information is collected in a structured manner.
Validation and error handling: Use regex and min/max rules in forms to validate user input, minimising errors and ensuring data accuracy.
Improved user experience: Use tooltips and labels to simplify checkout form input.
Flexibility and customisation: Customise checkout forms to tailor the layout and field order to your business needs.
Integrated: Forms integrates with address, tax, payment and authentication systems to streamline the experience and make sure all data is accurate in connected systems such as Zuora and Salesforce.
Omnichannel: Modular Checkout can be used to shift sales-assisted quotes or customer service-initiated orders to online quotes/checkout. Learn more at https://docs.limio.com/integrations/using-limio-for-salesforce/generate-checkout-link and https://docs.limio.com/integrations/using-limio-for-salesforce/using-quoting-tool.
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: https://docs.limio.com/components/component-library/modular-checkout-components/component-checkout-form. If you are interested in the legacy checkout, go to
Made for subscription and recurring products companies (and beyond)
Limio Modular Checkout allow for our Customers:
Sell with complex prices such as volume pricing
Embed different payment gateways and payment methods
Support physical delivery and gift checkouts
Have renewal checkout for existing termed subscription
Additionally within the checkout, Layouts can be used to display https://docs.limio.com/components/component-library/cart-components side by side with your Form, including Promo Codes, Upselling and Cross-Selling components.
Best-in-class features for checkouts
Analytics in mind: The Limio Form also works well with analytics and reporting solutions, for example to capture user events from the checkout and making sure orders pass through parameters such as UTM tags.
Abandoned cart: 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.
A/B test and experiments: You can create multiple checkouts and A/B tests them. You can also 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 undesired orders. You can also configure T&Cs and marketing preferences via https://docs.limio.com/components/component-library/modular-checkout-components/modular-checkout-subcomponents-in-form/form-subcomponent-field.
Security: Limio supports a range of security features, such as fingerprinting IP and Recaptcha. Learn more at Security Settings.
Conversion-optimised: It is also optimised to accelerate input, for example:
Configurable via no code
Modular Checkout 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. See https://docs.limio.com/components/component-library/modular-checkout-components/managing-conditionality-in-subcomponents for more details.
Extensible with low code
Extending Limio's Modular Checkout
Developers have the flexibility to enhance Limio's Modular Checkout by integrating features like identity verification services or API checks using Limio Custom Subcomponents. These subcomponents can utilize the Limio SDK to:
Display custom fields that require external validation, ensuring the checkout process is paused until validation is complete.
Present the shopping basket differently from the default Limio basket.
Apply specific rules depending on customer identity and their selected items.
For more information, please visit https://docs.limio.com/developers/custom-components/custom-subcomponents.
Payment gateway and payment method flexibility
Limio's Modular Checkout is designed to work with the payment gateways and payment methods your business already uses — even if your billing provider doesn't natively support them.
How payments work in Limio
At checkout, Limio securely collects your customer's payment details and passes the resulting payment token to your billing provider (such as Zuora or Stripe) to manage the subscription. How that token is collected depends on your setup:
Billing-native payment methods — For payment gateways that your billing provider supports out of the box, Limio embeds the billing provider's own payment form directly in the checkout:
Zuora: Limio renders Zuora Hosted Payment Methods (HPM) or Zuora Payment Forms as a secure iFrame within the checkout. The token is created directly in Zuora.
Stripe: Limio renders Stripe Payment Elements for a seamless card entry experience. When using Stripe with Zuora billing, Limio tokenises the card in Stripe and passes the token to Zuora via Credit Card Referenced Transactions.
Third-party payment providers — For gateways not natively supported by your billing provider, Limio connects directly with the payment provider to collect the payment token, then passes it back to the billing system using a supported framework:
Zuora Universal Payment Connector (UPC): Limio integrates with providers like Nexi and Datatrans, handles the payment form or redirect, and creates a UPC payment method in Zuora with the token received. This means Zuora manages the subscription and recurring billing, even though the payment was collected by a different provider.
Direct integrations: For providers like Twikey, Limio manages the payment agreement directly and links it to the billing provider for ongoing subscription management.
This approach means you are not limited to the payment gateways your billing provider supports. If your preferred payment provider can produce a token, Limio can route it to your billing system.
Supported payment methods
Limio supports a wide range of payment methods across billing providers. What is available to your customers depends on your billing provider and payment gateway configuration:
Credit / Debit Cards
✅
✅
Apple Pay
✅
✅
Google Pay
✅
✅
PayPal
✅
✅
ACH / Direct Debit
✅
✅
SEPA Direct Debit
✅
✅
Invoice / Purchase Order
✅
—
Bank Transfer
✅
✅
Nexi (via UPC)
✅
—
Datatrans (via UPC)
✅
—
Twikey
✅
—
Beyond this list, any payment method supported by your billing provider or connectable via frameworks like Zuora UPC can be integrated. If you have a specific payment gateway requirement, get in touch — chances are, we can support it.
Configuring payment methods
Payment methods are configured per offer, giving you full control over which options appear in the checkout for each product. You can also offer multiple payment gateways and let customers choose their preferred method using the Payment Method Selector.
For detailed setup guides, see Configuring Payment Gateways or Stripe Payment Settings.
Last updated
Was this helpful?