Разработка оформления заказа на React для 1С-Битрикс

Каждый незавершённый заказ — потерянные деньги. Стандартный 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 месяцев. Если вы хотите таких же результатов, свяжитесь с нами — оценим ваш проект.

Почему React-чекаут быстрее и гибче стандартного компонента?

React-чекаут решает проблему на уровне архитектуры: UI в компонентах, логика в хуках, общение с сервером через API. Смена доставки обрабатывается за 200 мс, штатный компонент тратит больше секунды. Валидация полей выполняется мгновенно при потере фокуса — пользователь сразу видит ошибку, а не после нажатия кнопки.

Как устроена архитектура React-чекаута?

Оформление заказа делится на два независимых уровня: UI-уровень (React) и бизнес-логика (Битрикс на сервере). На фронте — React-приложение, которое управляет формой, показывает/скрывает шаги, рассчитывает итог в реальном времени. На сервере — Битрикс обрабатывает заказ через \Bitrix\Sale\Order, применяет скидки, рассчитывает стоимость доставки, проверяет остатки. Подробнее о системе заказов — в документации Bitrix Sale.

Ключевой 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 для запросов.

Интеграция с картами для курьерской доставки

Яндекс.Карты или 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. Шаг 1 — контакты. Форма с телефоном и именем. Телефон валидируется через libphonenumber-js, подсказка через СМС-верификацию (опционально).

2. Шаг 2 — доставка. Динамическое отображение: если в заказе есть товары с замером — появляется блок «Запись на замер» с datepicker. Доступные даты загружаются с сервера (из CRM Битрикс, занятые слоты закрыты). Выбор даты доставки с учётом срока изготовления — минимальная дата рассчитывается на сервере по max(PRODUCTION_DAYS) в корзине.

3. Шаг 3 — оплата. Переключатель «Физическое лицо / Юридическое лицо». При выборе юрлица разворачивается блок реквизитов (ИНН → автозаполнение через DaData → подтягивание КПП, названия, адреса). Безналичный счёт для B2B генерируется автоматически после создания заказа через \Bitrix\Sale\PaySystem\Manager.

4. Создание заказа. Финальный POST отправляет все данные на сервер. Bitrix создаёт заказ, привязывает кастомные свойства (дата доставки, тип клиента, реквизиты), отправляет уведомления. React получает ID заказа и переводит пользователя на страницу «Спасибо».

Конверсия чекаута выросла с 62% до 79% за первые 6 недель после запуска.

Создание заказа на сервере

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-чекаута — напишите нам. Получите консультацию по вашему проекту — мы расскажем, какие шаги нужны именно вам.