Live One Page Checkout Plugin

Product Description:

The Sylius Live One Page Checkout Plugin replaces the default multi-step Sylius checkout with a single, live-updating checkout page. Shipping method, customer details, shipping and billing addresses, payment method, coupon and order summary are all collected on one page, and totals are recalculated instantly as the customer fills in the form, with no full page reloads.

Built on Symfony UX Live Components, the plugin recalculates prices, promotions, shipping costs and taxes on every change and keeps the list of available shipping and payment methods in sync with the entered address. A built-in order integrity check makes sure the customer always pays exactly what they have seen, even if prices or promotions change during checkout.

One page checkout is enabled per channel, so merchants can switch selected storefronts to the new flow while other channels keep the standard Sylius checkout. The whole UI is built with Twig Hooks and the same flow is exposed over the Sylius Shop API, making the plugin easy to customize and ready for headless storefronts.

Perfect for:

• Stores that want to reduce checkout abandonment by removing intermediate checkout steps
• Mobile-heavy shops where every page load and extra click matters
• Businesses running multiple channels that need different checkout flows per storefront
• Teams that want a gradual rollout or A/B test of a one page checkout on a single channel
• Headless and mobile projects that need a one page checkout flow over the API
• Developers who want a modern checkout that can be customized with Twig Hooks

Key Features

Single-Page Checkout

• Everything on One Page - Shipping method, email, shipping and billing addresses, payment method, coupon and order summary in a single view.
• Live Recalculation - Totals, taxes, promotions and shipping costs update instantly as the customer edits the form, powered by Symfony UX Live Components.
• Address Book Support - Logged-in customers can pick saved addresses, and their default address pre-fills the shipping address.
• Coupon Handling - Promotion coupons can be applied and removed without leaving the page.

Per-Channel Control

• Channel Toggle - Enable one page checkout for selected channels directly in the Admin Panel.
• Automatic Redirects - On enabled channels, all standard checkout step URLs redirect to the one page checkout.
• Zero Impact on Other Channels - Channels with the feature disabled keep the standard Sylius multi-step checkout unchanged.

Order Integrity and Security

• State Hash Protection - The order state is verified on submit, so the customer never pays for totals, promotions, shipping or payment they have not seen.
• Clear Customer Feedback - If the order changed during checkout, the customer is asked to review the updated summary before paying.

Extensibility and Integrations

• Twig Hooks UI - Every fragment of the checkout page can be overridden, reordered, disabled or extended.
• Headless Ready - Preview and complete endpoints in the Sylius Shop API mirror the live checkout, including anti-tamper hash validation.
• Mollie Integration - Mollie payment submethods and the credit card component work out of the box when the Mollie plugin is installed.
• State Machine Support - Works with both the Symfony Workflow and winzou state machine adapters.
• Custom Order Processors - Project-specific processors can be registered to take part in the live recalculation.

Additional Technical Information

The plugin adds a per-channel flag and a dedicated checkout route that collects all checkout data in a single Live Component form.

When a customer checks out on an enabled channel:

1. Standard checkout URLs redirect to the one page checkout.
2. Every form change recalculates the order without persisting intermediate checkout steps.
3. An order state hash is rendered into the form and verified again on submit.
4. On submit, the order moves directly from cart to completed.
5. The customer is redirected to the standard Sylius payment flow and the thank you page.

This architecture delivers a fast, reliable and fully extensible checkout experience aligned with the Sylius ecosystem.