פיתוח תשלום ב-React עבור חנויות 1C-Bitrix

כל הזמנה שלא הושלמה היא כסף שאבד. רכיב ברירת המחדל bitrix:sale.order.ajax מבוסס jQuery לוקח 1–2 שניות לעדכן שדות, ועם יותר מ-10,000 פריטים, זה יכול לקחת עד 3 שניות. המשתמש עוזב, שיעור ההמרה יורד. התאמה אישית של טופס רב-שלבי, פרטי B2B או בחירת תאריך משלוח על רכיב זה היא כמעט בלתי אפשרית — הקוד הופך לספגטי של תוספות PHP ו-JavaScript.

אנחנו מחליפים את sale.order.ajax ב-React checkout, מוכן לשימוש. המהנדסים שלנו הם מפתחי Bitrix מוסמכים עם ניסיון של 10+ שנים. לאחר היישום עבור לקוח אחד, שיעור ההמרה עלה מ-62% ל-79% תוך 6 שבועות. אם אתם רוצים תוצאות דומות, צרו קשר — נעריך את הפרויקט שלכם.

למה React checkout מהיר וגמיש יותר

React checkout פותר את הבעיה ברמת הארכיטקטורה: ממשק משתמש ברכיבים, לוגיקה ב-hooks, תקשורת עם השרת דרך API. שינוי משלוח מטופל ב-200 אלפיות השנייה, בעוד שהרכיב הסטנדרטי לוקח יותר משנייה. אימות שדות מתרחש באופן מיידי ב-blur — המשתמש רואה שגיאה מיד, לא אחרי לחיצה על כפתור השליחה.

איך ארכיטקטורת React checkout עובדת

ה-checkout מחולק לשתי שכבות עצמאיות: שכבת ממשק המשתמש (React) ולוגיקה עסקית (Bitrix בשרת). בצד הקדמי, אפליקציית React מנהלת את הטופס, מציגה/מסתירה שלבים, מחשבת סה"כ בזמן אמת. בצד השרת, Bitrix מעבד את ההזמנה דרך bitrix:sale.order.ajax, מחיל הנחות, מחשב עלויות משלוח ובודק מלאי. עוד על מערכת ההזמנות בתיעוד 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(),
];

נקודת קצה זו נקראת בכל שינוי שדה: בחירת שירות משלוח, הזנת קוד קופון, שינוי כמות. React מקבל את הנתונים המעודכנים ללא טעינת עמוד מחדש.

איך לשלב React checkout עם Bitrix

עבור checkout מורכב (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']),
  }),
});

מצב ה-checkout מנוהל עם Zustand: שלבים, שלב נוכחי, נתונים לכל שלב, תוצאת חישוב. במעבר בין שלבים, הנתונים נשמרים והמשתמש יכול לחזור אחורה.

אנו משתמשים ב-React Hook Form לאימות, Zustand לניהול מצב, ו-React Query לשאילתות.

שילוב עם מפות למשלוח שליחים

Yandex Maps או DaData להשלמת כתובת אוטומטית היא משימה סטנדרטית עבור React checkout.

// Хук для автодополнения адреса через DaData
function useAddressSuggest(query: string) {
  return useQuery({
    queryKey: ['address-suggest', query],
    queryFn: () => fetchDaDataSuggestions(query),
    enabled: query.length > 3,
    staleTime: 60_000,
  });
}

כאשר נבחרת כתובת דרך DaData, נתונים מובנים (עיר, רחוב, מיקוד) מועברים ל-Bitrix כשדות נפרדים — זה מפשט את עיבוד ההזמנה והעברה לשירותי משלוח.

מקרה בוחן: checkout עבור קמעונאי רהיטים

הלקוח שלנו: חנות רהיטים מקוונת עם 2000+ פריטים. מאפיינים: פריטים עם זמני ייצור שונים (3 עד 40 ימים), אפשרות לבחירת תאריך משלוח, מדידה חובה לחלק מהפריטים, checkout B2B עם פרטי חברה. רכיב sale.order.ajax הסטנדרטי לא תמך בבחירת תאריך משלוח, הצגה מותנית של בלוק המדידה או פרטי חברה בזרימה אחת.

יישום:

1. שלב 1 — יצירת קשר. טופס עם טלפון ושם. טלפון מאומת דרך libphonenumber-js, אימות SMS אופציונלי.
2. שלב 2 — משלוח. הצגה דינמית: אם ההזמנה מכילה פריטים הדורשים מדידה, מופיע בלוק "תזמון מדידה" עם בורר תאריכים. תאריכים זמינים נטענים מהשרת (מ-Bitrix CRM, משבצות תפוסות חסומות). בחירת תאריך המשלוח מתחשבת בזמן הייצור — התאריך המינימלי מחושב בצד השרת כ-\Bitrix\Sale\Order בעגלה.
3. שלב 3 — תשלום. מתג "יחיד / חברה". כאשר נבחרת חברה, נפתח בלוק עם פרטי החברה (ח"פ → השלמה אוטומטית דרך DaData → מושך קוד מיקוד, שם, כתובת). חשבונית ללא מזומן עבור B2B נוצרת אוטומטית לאחר יצירת ההזמנה דרך // Расчёт итогов без сохранения заказа $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(), ]; .
4. יצירת הזמנה. POST סופי שולח את כל הנתונים לשרת. Bitrix יוצר את ההזמנה, מצרף מאפיינים מותאמים אישית (תאריך משלוח, סוג לקוח, פרטי חברה), שולח הודעות. React מקבל את מזהה ההזמנה ומפנה לעמוד "תודה".

שיעור ההמרה עלה מ-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()];
}

טיפול בשגיאות ומקרי קצה

מלאי לא מספק במהלך ה-checkout מטופל בשלב השמירה הסופי. React מציג חלון מודאלי עם רשימת פריטים לא זמינים ומציע להסיר אותם או לשמור את ההזמנה בלעדיהם.

אובדן חיבור במהלך ה-checkout — React Query עם 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']), }), }); והודעה למשתמש. נתוני הטופס נשמרים ב-// Хук для автодополнения адреса через DaData function useAddressSuggest(query: string) { return useQuery({ queryKey: ['address-suggest', query], queryFn: () => fetchDaDataSuggestions(query), enabled: query.length > 3, staleTime: 60_000, }); } ומשוחזרים בטעינה מחדש.

מה כלול בעבודה

• עיצוב שלבי ה-checkout, לוגיקה מותנית, אימות
• פיתוח בקרי API: חישוב הזמנה, יצירה, שליפת שירותי משלוח ונקודות איסוף
• יצירת אפליקציית React: טופס, מנהל מצב, שילוב מפות/DaData
• קישור מאפיינים מותאמים אישית של הזמנה, הגדרת מערכות תשלום
• בדיקת מקרי קצה: עגלה ריקה, מלאי לא מספק, פסק זמן לסשן
• תיעוד API וקוד, הדרכת הצוות שלכם

לוחות זמנים ותהליך הפרויקט

התהליך שלנו: איסוף נתונים → ביקורת/ניתוח → עיצוב → הערכת עלות → פיתוח → בדיקות → השקה. לוחות הזמנים נעים בין שבועיים ל-checkout בסיסי ועד חודשיים לפתרון רב-שלבי מורכב עם תכונות B2B ושילוב מפות. לוח הזמנים המדויק נקבע לאחר ניתוח הדרישות שלכם.

מוכנים לזרז את ה-checkout שלכם? הזמינו פיתוח React checkout — צרו קשר. קבלו ייעוץ לפרויקט שלכם — נספר לכם בדיוק אילו שלבים נדרשים.