When a user reaches checkout, each additional step loses 5–10% of buyers?
Multi-step checkout of 3–4 stages guarantees a 15–25% loss of customers on the way to payment. In contrast, one-page checkout (ONE_PAGE) is three times more effective: it reduces abandonment to 5–10%. The bitrix:sale.order.ajax component solves this problem: all blocks—customer data, delivery, payment—are displayed on one page and updated via AJAX without reloads. We have implemented dozens of such checkouts for projects with catalogs ranging from 50,000 to 500,000 products and know all pitfalls. Configuring one-page checkout in 1C-Bitrix requires not just enabling the mode, but also customizations—saving data in localStorage, caching delivery calculations, handling AJAX request timeouts. You can read more about AJAX technology on Wikipedia. Official component documentation: dev.1c-bitrix.ru. Request a checkout setup and reduce abandonment by 15% right now. Typical savings: for a store with 1000 orders/month, cutting abandonment from 20% to 10% adds 100 extra orders, worth $5,000 in additional revenue at $50 average order.
Enabling ONE_PAGE Mode
In the component parameters on the checkout page:
$APPLICATION->IncludeComponent( 'bitrix:sale.order.ajax', '', [ 'DELIVERY_MODE' => 'ONE_PAGE', 'SHOW_DELIVERY_PICTURE' => 'Y', 'SHOW_DELIVERY_DESCRIPTION' => 'N', 'PAY_FROM_ACCOUNT' => 'N', 'SHOW_VAT' => 'N', ] ); In ONE_PAGE mode, when any field changes (city change, delivery service selection), the component sends an AJAX request and updates dependent blocks—delivery cost, available payment systems.
Configuring AJAX Block Updates
In the one-page checkout template, the orderAjax object is responsible for AJAX updates—it is initialized in the template's order_ajax.php. When the "City" field changes, orderAjax.updateDelivery() is called, which:
- Requests available delivery services for the specified city via
\Bitrix\Sale\Delivery\Services\Manager::getRestrictedObjectsList() - Calculates the cost of each via
\Bitrix\Sale\Delivery\Services\Base::calculate() - Updates the delivery block without page reload
If the calculation takes longer than 1–2 seconds (e.g., an external CDEK API responds slowly), the user sees a spinning loader. This is normal, but you should add a timeout and cache calculations by city code and cart weight.
How to Speed Up One-Page Checkout?
The biggest bottleneck is delivery cost calculation via external services. We use caching with key {city_id}_{weight}_{price} and a TTL of 30 minutes. This reduced checkout load time by 40% on one project. Additionally, we implement lazy loading of payment blocks—they load only after delivery selection.
Case study: For an online store with 200,000 products and 500+ daily orders, we implemented the following optimizations:
- Cached delivery calculations (30-minute TTL) → reduced load time by 40%.
- Added localStorage persistence for form data → eliminated data loss on F5.
- Set AJAX timeout to 3 seconds with graceful error handling.
Result: Checkout abandonment dropped from 22% to 11%, and average checkout time decreased from 8 seconds to 1.2 seconds.
Why Does Standard Checkout Lose Data on F5?
The component does not store entered data in session or localStorage. On page reload, all fields become empty—a disaster for users. Solution: add an onchange handler to all form fields that writes data to localStorage, and restore them on DOMContentLoaded. Implementation takes 2–3 hours and dramatically improves UX.
Comparison of Modes: ONE_PAGE vs MULTI_STEP
| Parameter | ONE_PAGE | MULTI_STEP |
|---|---|---|
| Number of pages | 1 | 3–4 |
| Update method | AJAX | Page reload |
| User abandonment | 5–10% | 15–25% |
| Time to payment | 30–60 sec | 60–120 sec |
| Setup complexity | Medium | Low |
| Data persistence | Requires customization | Built-in |
ONE_PAGE reduces the number of pages by 3–4 times and decreases abandonment by 10–15% compared to MULTI_STEP. In practice, one-page checkout is 3 times better than multi-step in retaining customers.
Typical Problems and Solutions
Data loss on F5? Save fields in localStorage. Slow delivery calculations? Cache by city/weight. Conflict with SEO plugins? noindex checkout page. Incorrect multiple shipments? Custom development with subsections. For example, with multiple shipments, the standard ONE_PAGE mode may display services incorrectly; we solve this by splitting checkout into separate calculation sections.
What's Included in the Work
- Audit of current checkout and component configuration.
- Switch to ONE_PAGE mode with template customization to match your design.
- Implementation of localStorage form data persistence.
- Caching of delivery calculations (by city, weight, price) with TTL.
- AJAX logic customization (timeouts, loaders, error handling).
- Testing with carts of various sizes (up to 500+ items).
- Deliverables: Documentation (PDF with setup steps), access to repository, 30-day support, and optional training for your developers.
Setup Timelines
Switching to ONE_PAGE mode and template configuration: from 1 to 2 working days. Adding localStorage persistence, delivery calculation caching, and AJAX logic improvements: from 2 to 4 days. Timelines are confirmed after analyzing your project.
Company and Experience
We have been developing on 1C-Bitrix and Bitrix24 for over 5 years. With 100+ successful projects and 50+ checkout optimizations, we guarantee solution stability. If the checkout works incorrectly after implementation, we fix it for free within 30 days. The average savings for clients are significant due to reduced abandonment. Get a consultation about your project—contact us for a checkout evaluation.