One Page Checkout

One Page Checkout presents the whole checkout — delivery, shipping, payment, and order review — in one continuous, native view, instead of guiding shoppers through separate login, shipping, and payment pages. There are no page reloads between steps: everything stays visible as customers move through it, and a quick scroll up is all it takes to re-check an address before paying. This shortens the path to purchase and removes the drop-off points that can occur between steps.

You decide which device types use it — desktop, mobile, or app. You can run One Page Checkout on mobile while keeping the multi-step flow on desktop, or switch it on across specific shops and countries. It is enabled in the Checkout Editor in the SCAYLE Panel, found under Checkout → Customization, and requires no development work or deployment. Developers can still control the behavior through the features.singlePageCheckout configuration.

Prerequisites

• Your shop runs on the current SCAYLE Checkout component.
• You have access to the Checkout Editor in the SCAYLE Panel for the shop and scope you want to change.

Enable One Page Checkout

One Page Checkout is switched on per shop, country, and device, so you can roll it out gradually. A device only uses the one-page layout when it is selected in the Checkout Editor; any device not selected continues to use the standard multi-step flow.

1. In the SCAYLE Panel, open the Checkout Editor for your shop.
   Checkout ➜ Customization
2. At the top of the Checkout Editor, choose the scope you want to change using the overwrite level (for example Global, a specific country, or a language).
3. Open the One Page Checkout setting.
   General Settings ➜ Layout ➜ Enable One Page Checkout
4. In the Devices field, select the devices that should use One Page Checkout. The available options are Desktop, Mobile, and App. You can select more than one.

   🧑‍💻 For developers:
   This maps to features.singlePageCheckout.conditions.enabled.devices in the checkout config schema, with the values desktop, mobile, and app. For example, selecting Mobile and App sets ["mobile", "app"] and leaves desktop on the multi-step flow.

5. Preview the change in the editor, then save the section. Changes apply without a deploy or engineering ticket. The layout takes effect for the selected devices within the chosen scope; the most specific matching scope applies.
6. Open the checkout on one of the selected devices to confirm the one-page layout renders. The available payment methods appear once the customer has entered their address, so a brief loading state on the payment section beforehand is expected.