> For the complete documentation index, see [llms.txt](https://docs.limio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.limio.com/product/checkout/overview-how-to-customise-the-limio-modular-checkout.md).
# 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 your checkout with no-code.
Modular Checkout is delivered via a component leveraging the native React functionalities of [Form](/components/component-library/modular-checkout-components/component-checkout-form.md). 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 integrate with address, tax, payment and authentication systems to streamline the experience and make sure all data is accurate in connected systems such as [Zuora](https://docs.limio.com/integrations/zuora-integration), [Stripe](https://docs.limio.com/integrations/stripe-billing-integration) and [Salesforce](https://docs.limio.com/integrations/salesforce-integrations).
* **Omnichannel:** Modular Checkout can be used to shift sales-assisted quotes or customer service-initiated orders to online quotes/checkout. Learn more at [Checkout Link](/integrations/using-limio-for-salesforce/generate-checkout-link.md) and [Quote](/integrations/using-limio-for-salesforce/using-quoting-tool.md).
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: [Form](/components/component-library/modular-checkout-components/component-checkout-form.md). If you are interested in the legacy checkout, go to [Component: Single Page Checkout](/components/component-library/legacy-configuration-components/component-single-page-checkout.md).
## **Made for subscription and recurring products companies (and beyond)**
Limio Modular Checkout allows our customers to:
* [Offer quantity-based products](/product/pricing/what-are-offers-and-how-to-configure-them/how-to-activate-the-quantity-field-to-sell-multiple-subscriptionsitems-at-once.md)
* [Sell bundles in one transaction](https://docs.limio.com/product/pricing/what-are-offers-and-how-to-configure-them/how-to-add-a-bundle-to-an-offer)
* [Sell one-off products](https://docs.limio.com/product/pricing/what-are-offers-and-how-to-configure-them/how-to-configure-a-one-time-offer)
* Sell with complex prices such as [volume pricing](https://docs.limio.com/product/pricing/what-are-offers-and-how-to-configure-them/volume-pricing)
* [Run tax calculation](https://docs.limio.com/integrations/zuora-integration/manage-your-pricing/how-to-configure-subscriptions-in-limio-offers-with-external-price-and-zuora-rate-plans)
* Embed different payment gateways and payment methods. If you use Zuora, see [Zuora payment gateways](https://docs.limio.com/integrations/zuora-integration/configuring-payment-gateways). If you use Stripe Billing, see [Stripe payment methods](https://docs.limio.com/integrations/stripe-billing-integration/manage-payments)
* Support [physical delivery](https://docs.limio.com/components/component-library/modular-checkout-components/modular-checkout-subcomponents-in-form/form-subcomponent-address-fields) and [gift checkouts](https://docs.limio.com/components/component-library/modular-checkout-components/modular-checkout-how-to-configure-a-gift-checkout)
* Have [renewal checkout](/product/self-service/what-are-the-standard-functionality-of-limio-self-service-manage-my-account/how-to-create-a-personalised-renewal-experience.md) for existing termed subscription
* Run B2C checkouts, B2B self-serve checkouts and [partner / reseller checkouts](/product/partner-portal/partner-portal-overview.md) (including flows where the bill-to and sold-to parties differ) from the same platform
Additionally within the checkout, [Layouts](https://docs.limio.com/product/page-builder/page-builder-overview-of-key-features/configure-layout) can be used to display [Cart Components](/components/component-library/cart-components.md) side by side with your Form, including [Promo Codes](/product/pricing/how-to-configure-and-implement-promo-codes.md), [Upselling](/product/checkout/how-to-configure-upselling-in-the-cart-and-checkout.md) and [Cross-Selling](/product/checkout/how-to-configure-cross-selling-in-the-cart-and-checkout.md) 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](https://docs.limio.com/product/analytics/how-to-configure-the-limio-data-layer-to-collect-user-events-for-analytics) and making sure [orders pass through parameters such as UTM tags](https://docs.limio.com/product/analytics/how-to-configure-limio-for-tracking-and-attribution-in-salesforce-and-zuora).
**Abandoned cart:** In the background, a basket or [cart](https://docs.limio.com/components/component-library/cart-components/using-cart-components-for-acquisition) is created and persist. The cart can be displayed and can also be used for [abandon basket campaign](https://docs.limio.com/developers).
**A/B test and experiments:** You can create multiple checkouts and [A/B tests](https://docs.limio.com/product/journey/what-are-limio-journeys/create-a-journey-based-on-a-ab-test) them. You can also deliver specific checkout for specific Limio Offer, in different languages, or to support brand-specific or product-specific UX.
**Multi-brand, multi-language and multi-currency:** Run different checkouts for different brands, regions or currencies from a single Limio instance. Field labels, copy, validation messages and Terms & Conditions can all be localised, and the layout or UX can be tailored per brand, product or geography.
**Compliance:** There is also a range of off-the-shelf enforcement components for the checkout, such as [Block Related Purchase Component](https://docs.limio.com/components/component-library/standard-components/component-block-related-purchase-modal) or [Block Purchase Dialog](https://docs.limio.com/components/component-library/standard-components/component-block-purchase-dialog) to prevent undesired orders. You can also configure T\&Cs and marketing preferences via [Form Subcomponent: Field](/components/component-library/modular-checkout-components/modular-checkout-subcomponents-in-form/form-subcomponent-field.md).
**Auto-renewal compliance:** Limio Modular Checkout complies with existing auto-renewal regulations across major jurisdictions, including:
* **UK** — Digital Markets, Competition and Consumers Act 2024 (DMCC) subscription-contract rules
* **EU / EEA** — Consumer Rights Directive and Omnibus / Modernisation Directive requirements on automatically renewed contracts
* **US (federal)** — FTC "Click-to-Cancel" rule (Negative Option Rule) and Restore Online Shoppers' Confidence Act (ROSCA)
* **US (state)** — California Automatic Renewal Law (ARL), and equivalent statutes in New York, Illinois, Oregon, Colorado, Virginia, Vermont, Washington D.C. and other states
The checkout can be configured to capture the relevant auto-renewal consent at the point of purchase (separate, affirmative opt-in where required) and to share the contract information — renewal cadence and price, cancellation rights, and post-purchase confirmation — with the customer before and after the order is placed.
**Security:** Limio supports a range of security features for the checkout, including:
* IP / browser fingerprinting to detect suspicious sessions
* [Google reCAPTCHA bot protection](/product/settings/security/recaptcha-bot-protection.md)
* [Rate limiting](/product/settings/security/rate-limiting.md) on submission endpoints
* 3D Secure (3DS) strong customer authentication, delivered via the underlying payment gateway
* [Content Security Policy (CSP)](/product/settings/security/content-security-policy-csp.md) and [CORS configuration](/product/settings/security/cors-configuration.md)
* [SSO / OpenID Connect login options](/product/settings/security/login-options-sso.md) and [audit logging of configuration changes](/product/settings/security/track-changes.md)
Learn more at [Security Settings](/product/settings/security.md).
**Conversion-optimised:** It is also optimised to accelerate input, for example:
* [Prefill fields from identity solutions such as name and email](/product/authentication/sso-your-authentication.md)
* [Add express checkout options such as Apple Pay, PayPal and Google Pay as soon as possible](https://docs.limio.com/integrations/zuora-integration/configuring-payment-gateways/configuring-payment-type/how-to-configure-apple-pay-for-zuora-in-limio)
* [Provide integrations to prefill addresses such as Loqate](https://docs.limio.com/integrations/other-integrations/loqate)
## **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 collect 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](https://www.w3schools.com/html/html_form_input_types.asp) (Field, which allow Input, Date, Number, Email Address, Text Area, Phone Number, Dropdown, Radio Buttons, Checkbox)
* Rearrange the order of fields with a drag-and-drop interface
* Change copy, validation rules, required fields and size of the fields
* Write custom field values back to your billing provider (for example into the subscription, order or account custom fields) — useful for capturing B2B sales attribution, partner names, internal IDs or KYC data without writing any code
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](https://docs.limio.com/components/component-library/modular-checkout-components/managing-conditionality-in-subcomponents "mention") 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](https://docs.limio.com/developers/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 [Custom Subcomponents](/developers/custom-components/custom-subcomponents.md).
## **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)](https://docs.limio.com/integrations/zuora-integration/configuring-payment-gateways/how-to-set-up-zuora-hosted-payment-methods-for-limio) or [Zuora Payment Forms](https://docs.limio.com/integrations/zuora-integration/configuring-payment-gateways/how-to-set-up-zuora-payment-forms-for-limio) as a secure iFrame within the checkout. The token is created directly in Zuora.
* **Stripe:** Limio renders [Stripe Payment Elements](https://docs.limio.com/integrations/stripe-billing/getting-started/configure-stripe-payment-settings) for a seamless card entry experience. When using Stripe with Zuora billing, Limio tokenises the card in Stripe and [passes the token to Zuora](https://docs.limio.com/integrations/zuora-integration/configuring-payment-gateways/limio-stripe-payments-integration) 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](https://docs.limio.com/integrations/zuora-integration/configuring-payment-gateways/how-configure-a-nexi-upc-integration-in-limio) 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:
| Payment Method | Zuora | Stripe |
| ------------------------ | ----- | ------ |
| 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](https://www.limio.com/contact) — 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](https://docs.limio.com/integrations/zuora-integration/configuring-payment-gateways/how-to-setup-a-second-payment-gateway) and let customers choose their preferred method using the [Payment Method Selector](https://docs.limio.com/components/component-library/modular-checkout-components/modular-checkout-subcomponents-in-form/form-subcomponents-payment-method-selector-field).
For detailed setup guides, see [Configuring Payment Gateways](https://docs.limio.com/integrations/zuora-integration/configuring-payment-gateways) or [Stripe Payment Settings](https://docs.limio.com/integrations/stripe-billing/getting-started/configure-stripe-payment-settings).
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.limio.com/product/checkout/overview-how-to-customise-the-limio-modular-checkout.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.