# 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](https://docs.limio.com/components/component-library/modular-checkout-components/component-checkout-form "mention")). 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](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 [https://docs.limio.com/integrations/using-limio-for-salesforce/generate-checkout-link](https://docs.limio.com/integrations/using-limio-for-salesforce/generate-checkout-link "mention") and [https://docs.limio.com/integrations/using-limio-for-salesforce/using-quoting-tool](https://docs.limio.com/integrations/using-limio-for-salesforce/using-quoting-tool "mention").
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](https://docs.limio.com/components/component-library/modular-checkout-components/component-checkout-form "mention"). If you are interested in the legacy checkout, go to [Broken mention](broken://pages/poiMcgk9oT4yo44B6NEG) ## **Made for subscription and recurring products companies (and beyond)** Limio Modular Checkout allow for our Customers: * [Allow for 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 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 [https://docs.limio.com/components/component-library/cart-components](https://docs.limio.com/components/component-library/cart-components "mention") 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. **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 [https://docs.limio.com/components/component-library/modular-checkout-components/modular-checkout-subcomponents-in-form/form-subcomponent-field](https://docs.limio.com/components/component-library/modular-checkout-components/modular-checkout-subcomponents-in-form/form-subcomponent-field "mention"). **Security:** Limio supports a range of security features, such as fingerprinting IP and Recaptcha. 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 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](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 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](https://docs.limio.com/components/component-library/modular-checkout-components/managing-conditionality-in-subcomponents "mention") for more details.
Conditions in the checkout
## **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 [https://docs.limio.com/developers/custom-components/custom-subcomponents](https://docs.limio.com/developers/custom-components/custom-subcomponents "mention"). ## **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: 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: ``` GET https://docs.limio.com/product/checkout/overview-how-to-customise-the-limio-modular-checkout.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.