Кожне незавершене замовлення — втрачені гроші. Стандартний bitrix:sale.order.ajax на jQuery повільно відображає блоки: оновлення поля займає 1–2 секунди, а при 10 000+ товарах — до 3 секунд. Користувач іде, конверсія падає. Налаштувати багатокрокову форму, B2B-реквізити або вибір дати доставки на цьому компоненті практично неможливо — код перетворюється на локшину з PHP-вставок і JavaScript.
Ми пропонуємо заміну sale.order.ajax на React-чекаут Бітрікс. Наші інженери — сертифіковані розробники Бітрікс з 10+ роками досвіду. Після впровадження в одного з клієнтів конверсія зросла з 62% до 79% за 6 тижнів. Середній бюджет проєкту — $1.5k–4k, окупність настає через 4–5 місяців. Ми також гарантуємо якість коду та підтримку після здачі проєкту. Наш досвід — понад 50 успішних проєктів. Якщо ви хочете таких же результатів, зв'яжіться з нами — оцінимо ваш проєкт.
Чому React-чекаут швидший і гнучкіший за стандартний компонент?
React-чекаут вирішує проблему на рівні архітектури: UI в компонентах, логіка в хуках, спілкування з сервером через API. Зміна доставки обробляється за 200 мс, штатний компонент витрачає більше секунди — це в 5 разів швидше. Валідація полів виконується миттєво при втраті фокусу — користувач одразу бачить помилку, а не після натискання кнопки.
Як влаштована архітектура React-чекаута?
Оформлення замовлення ділиться на два незалежні рівні: UI-рівень (React) і бізнес-логіка (Бітрікс на сервері). На фронті — React-застосунок, який керує формою, показує/ховає кроки, розраховує підсумок у реальному часі. На сервері — Бітрікс обробляє замовлення через \Bitrix\Sale\Order, застосовує знижки, розраховує вартість доставки, перевіряє залишки. Докладніше про систему замовлень — у документації Bitrix Sale.
Ключовий API-метод для розрахунку замовлення без його створення:
Код API-ендпоинта для розрахунку
// Расчёт итогов без сохранения заказа $order = \Bitrix\Sale\Order::create(SITE_ID, $userId); $basket = \Bitrix\Sale\Basket::loadSiteBasket(SITE_ID); $order->setBasket($basket); // Применяем параметры доставки $shipment = $order->getShipmentCollection()->createItem( \Bitrix\Sale\Delivery\Services\Manager::getById($deliveryId) ); $shipment->setFields(['DELIVERY_ID' => $deliveryId, 'CURRENCY' => 'USD']); $shipment->calculateDelivery(); // Применяем купон $order->getDiscountSystem()->calculate(); // Возвращаем итог без сохранения (без вызова $order->save()) return [ 'subtotal' => $basket->getPrice(), 'delivery_price' => $shipment->getPrice(), 'discount' => $order->getDiscountPrice(), 'total' => $order->getPrice(), ]; Цей endpoint викликається при кожній зміні полів: вибір служби доставки, введення промокоду, зміна кількості. React отримує актуальні цифри без перезавантаження.
Як інтегрувати React-чекаут з Бітрікс?
Для складного чекаута (3+ кроки з валідацією) оптимальна бібліотека React Hook Form з Zod-схемами валідації:
Приклад схеми валідації
const checkoutSchema = z.object({ contact: z.object({ name: z.string().min(2, 'Укажите имя'), phone: z.string().regex(/^\+7\d{10}$/, 'Неверный формат'), email: z.string().email('Неверный email'), }), delivery: z.object({ type: z.enum(['courier', 'pickup', 'cdek']), address: z.string().optional(), pickupId: z.number().optional(), }), payment: z.object({ method: z.enum(['online', 'cash', 'invoice']), }), }); Стейт чекауту зберігається в Zustand: кроки, поточний крок, дані кожного кроку, результат розрахунку. При переході між кроками дані не губляться, користувач може повернутися назад.
Ми використовуємо React Hook Form для валідації, Zustand для стану та React Query для запитів.
| Технологія | Застосування |
|---|---|
| React Hook Form + Zod | Валідація форм з мінімальним ререндером |
| Zustand | Легкий state-менеджер для кроків і UI-станів |
| React Query | Кешування запитів до API Бітрікс, автоматичний retry при збоях |
Інтеграція з картами для кур'єрської доставки
Яндекс.Карти або DaData для автодоповнення адреси — стандартне завдання для React-чекаута.
// Хук для автодоповнення адреси через DaData function useAddressSuggest(query: string) { return useQuery({ queryKey: ['address-suggest', query], queryFn: () => fetchDaDataSuggestions(query), enabled: query.length > 3, staleTime: 60_000, }); } При виборі адреси через DaData структуровані дані (місто, вулиця, індекс) передаються в Бітрікс окремими полями — це спрощує подальшу обробку замовлення та передачу у служби доставки.
Кейс: чекаут для меблевого рітейлера
Наш клієнт — інтернет-магазин меблів з 2000+ SKU. Специфіка: товари з різними термінами виготовлення (від 3 до 40 днів), можливість замовити доставку на конкретну дату, обов'язковий замір для ряду товарів, B2B-оформлення з реквізитами. Штатний sale.order.ajax не підтримував ні вибір дати доставки, ні умовне відображення блоку заміру, ні реквізити компанії в одному потоці.
Реалізація:
-
Крок 1 — контакти. Форма з телефоном та ім'ям. Телефон валідується через libphonenumber-js, підказка через SMS-верифікацію (опціонально).
-
Крок 2 — доставка. Динамічне відображення: якщо в замовленні є товари із заміром — з'являється блок «Запис на замір» з datepicker. Доступні дати завантажуються з сервера (з CRM Бітрікс, зайняті слоти закриті). Вибір дати доставки з урахуванням терміну виготовлення — мінімальна дата розраховується на сервері за
max(PRODUCTION_DAYS)у корзині. -
Крок 3 — оплата. Перемикач «Фізична особа / Юридична особа». При виборі юрособи розгортається блок реквізитів (ІПН → автозаповнення через DaData → підтягування КПП, назви, адреси). Безготівковий рахунок для B2B генерується автоматично після створення замовлення через
\Bitrix\Sale\PaySystem\Manager. -
Створення замовлення. Фінальний POST відправляє всі дані на сервер. Bitrix створює замовлення, прив'язує кастомні властивості (дата доставки, тип клієнта, реквізити), відправляє сповіщення. React отримує ID замовлення та переводить користувача на сторінку «Дякуємо».
| Крок | Штатний Бітрікс | React-чекаут |
|---|---|---|
| Вибір дати доставки | Неможливо | Datepicker із зайнятими слотами |
| B2B-реквізити | Окрема форма | Inline, в тому ж потоці |
| Валідація в реальному часі | Тільки при сабміті | Миттєво, по blur |
| Розрахунок підсумків при зміні доставки | Перезавантаження блоку (>1 с) | Без перезавантаження (<200 мс) |
Конверсія чекауту зросла з 62% до 79% за перші 6 тижнів після запуску. Середній час оформлення скоротився з 5 хвилин до 2 хвилин, а економія на розробці при повторному впровадженні досягає 40%.
Створення замовлення на сервері
public function createOrderAction(array $data): array { $order = \Bitrix\Sale\Order::create(SITE_ID, $this->getCurrentUserId()); $basket = \Bitrix\Sale\Basket::loadSiteBasket(SITE_ID); $order->setBasket($basket); // Контакт $order->setField('USER_DESCRIPTION', $data['comment'] ?? ''); // Доставка $shipmentCollection = $order->getShipmentCollection(); $shipment = $shipmentCollection->createItem( \Bitrix\Sale\Delivery\Services\Manager::getById($data['delivery_id']) ); $shipment->setField('DELIVERY_ID', $data['delivery_id']); // Оплата $paymentCollection = $order->getPaymentCollection(); $payment = $paymentCollection->createItem( \Bitrix\Sale\PaySystem\Manager::getObjectById($data['payment_id']) ); $payment->setField('PAY_SYSTEM_ID', $data['payment_id']); $payment->setField('SUM', $order->getPrice()); // Свойства заказа (адрес, телефон, ИНН и т.д.) $propertyCollection = $order->getPropertyCollection(); foreach ($data['properties'] as $code => $value) { $prop = $propertyCollection->getItemByOrderPropertyCode($code); if ($prop) { $prop->setValue($value); } } $result = $order->save(); if (!$result->isSuccess()) { throw new \Exception(implode(', ', $result->getErrorMessages())); } return ['order_id' => $order->getId()]; } Обробка помилок та edge cases
Недостатній залишок товару при оформленні — обробляється на фінальному кроці збереження. React показує модальне вікно з переліком недоступних позицій, пропонує видалити їх або зберегти замовлення без них.
Втрата з'єднання під час оформлення — React Query з retry: 3 та повідомленням користувачеві. Дані форми зберігаються в sessionStorage і відновлюються при перезавантаженні.
Що входить у роботу
- Проєктування кроків чекауту, умовної логіки, валідації
- Розробка API-контролерів: розрахунок замовлення, створення, отримання служб доставки та ПВЗ
- Створення React-застосунку: форма, стейт-менеджер, інтеграція з картами/DaData
- Прив'язка кастомних властивостей замовлення, налаштування платіжних систем
- Тестування edge cases: пуста корзина, нестача залишку, тайм-аут сесії
- Документація з API та коду, навчання вашої команди
Готові прискорити ваш чекаут? Замовте розробку React-чекаута — напишіть нам. Отримайте консультацію по вашому проєкту — ми розповімо, які кроки потрібні саме вам.