Telegram Mini App Development with 1C-Bitrix Integration

Telegram Mini App Development with 1C-Bitrix Integration

Recently, an owner of an online store on Bitrix with a catalog of 30,000 products approached us. After launching the Mini App, order conversion grew by 25% in a month. Customers buy right in Telegram without installing apps.

The mobile version of the site often falls short in convenience — a Telegram Mini App solves this problem. A typical situation: a user clicks on a product in a Telegram channel, but the slow loading of the mobile version kills the mood.

The Mini App removes obstacles: everything happens inside the messenger, without switching context. We develop mini-apps for stores on 1C-Bitrix turnkey: catalog, cart, payment.

Our engineers are certified specialists with more than 5 years of experience and dozens of implementations. One of our clients noted a 25% sales increase in a month after launch.

How does the Telegram Mini App integration with 1C-Bitrix work?

Architecture: Mini App (React SPA) → HTTPS requests → Bitrix API (REST or custom endpoints). The Mini App has no access to the database — everything goes through the API. Bitrix acts as the backend, returning JSON.

Authentication is via initData from the Telegram WebApp (signature HMAC-SHA256 using the bot's secret token).

Telegram Client
└─ Mini App (React SPA)
└─ HTTPS requests → Bitrix API
└─ Telegram initData validation
└─ Business logic: catalog, cart, orders

How to authenticate a user without a password?

When a Mini App opens, the window.Telegram.WebApp object contains initData — a string with user data and a hash. This string must be sent to the server with every request and validated.

On the Mini App side (React):

import { useEffect, useState } from 'react';

const tg = window.Telegram.WebApp; export function useTelegramAuth() { const [token, setToken] = useState<string | null>(null); useEffect(() => { tg.ready(); tg.expand();

const initData = tg.initData; if (!initData) return; // Send initData to the server to exchange for a JWT token fetch('/api/telegram/auth', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ init_data: initData }), }) .then(r => r.json()) .then(data => setToken(data.token)); }, []);

  return { token, user: tg.initDataUnsafe?.user };
}

On the Bitrix side — signature validation:

// /local/api/telegram/auth.php
namespace Local\TelegramMiniApp;

class InitDataValidator { private string $botToken; public function __construct(string $botToken) { $this->botToken = $botToken; } public function validate(string $initData): bool { parse_str($initData, $params); $hash = $params['hash'] ?? ''; unset($params['hash']);

        // Sort the keys, build the data-check-string
        ksort($params);
        $dataCheckString = implode("\n", array_map(
            fn($k, $v) => "$k=$v",
            array_keys($params),
            array_values($params)
        ));

        // Secret: HMAC-SHA256 of the bot token with the key "WebAppData"
        $secretKey = hash_hmac('sha256', $this->botToken, 'WebAppData', true);
        $expected = hash_hmac('sha256', $dataCheckString, $secretKey);

        // Check the timestamp (no older than 24 hours)
        $authDate = (int)($params['auth_date'] ?? 0);
        if (time() - $authDate > 86400) {
            return false;
        }

        return hash_equals($expected, $hash);
    }

    public function extractUser(string $initData): ?array
    {
        parse_str($initData, $params);
        return json_decode($params['user'] ?? '{}', true);
    }
}

On the first login via Mini App, we match the Telegram user_id with a customer in Bitrix via the custom field UF_TELEGRAM_ID. If the user is not found, a new one is created with the "Customers" group.

API endpoints for the Mini App

The product catalog, cart, and orders are implemented via custom Bitrix REST handlers. A typical set: a catalog with pagination, adding/removing from the cart, and order creation. Example of a catalog controller:

class CatalogController {
    public function index(Request $request): JsonResponse {
        $elements = \CIBlockElement::GetList(
            ['SORT' => 'ASC'],
            ['IBLOCK_ID' => CATALOG_IBLOCK_ID, 'ACTIVE' => 'Y'],
            false,
            ['nPageSize' => 20, 'iNumPage' => (int)$request->get('page', 1)],
            ['ID', 'NAME', 'PREVIEW_TEXT', 'PREVIEW_PICTURE', 'PROPERTY_PRICE', 'PROPERTY_ARTICLE']
        );
        $items = [];
        while ($row = $elements->GetNextElement()) {
            $fields = $row->GetFields();
            $props = $row->GetProperties();
            $items[] = [
                'id' => (int)$fields['ID'],
                'name' => $fields['NAME'],
                'text' => $fields['PREVIEW_TEXT'],
                'image' => \CFile::GetPath($fields['PREVIEW_PICTURE']),
                'price' => (float)($props['PRICE']['VALUE'] ?? 0),
            ];
        }
        return new JsonResponse(['items' => $items]);
    }
}

Step-by-step development process

1. Catalog and requirements analysis — we study information blocks, trade offers, and prices. We define the set of features for the MVP.
2. Architecture design — we develop a REST API on the Bitrix side, data schemas for the cart and orders. We use ORM and tagged caching for performance.
3. Mini App development — we create a React application with components for the catalog, cart, and checkout.
4. Integration with Bitrix — we connect the API, configure authentication via initData and user linking.
5. Telegram Payments setup — we register the provider, create invoices, and handle callbacks.
6. Testing — we test with real users and fix bugs.
7. Deployment and launch — we publish the Mini App via @BotFather and set up monitoring.
8. Support — 30 days of free support after launch.

Why is a Telegram Mini App better than a mobile app?

A Mini App combines a low entry barrier, fast deployment, and high conversion thanks to the built-in messenger. This is the ideal option for online stores that want to quickly launch mobile sales without the cost of native apps.

Payment via Telegram Payments

Telegram supports built-in payment through providers (YooKassa, etc.). On the Bitrix side, an invoice is created via the Bot API:

public function createInvoice(int $orderId, int $bitrixUserId): string {
    $order = \Bitrix\Sale\Order::load($orderId);
    $response = $this->botApiPost('createInvoiceLink', [
        'title' => 'Order #' . $orderId,
        'description' => 'Payment for order ' . $order->getField('ACCOUNT_NUMBER'),
        'payload' => json_encode(['order_id' => $orderId, 'user_id' => $bitrixUserId]),
        'provider_token' => PAYMENT_PROVIDER_TOKEN,
        'currency' => 'RUB',
        'prices' => [['label' => 'Total', 'amount' => (int)($order->getPrice() * 100)]],
    ]);
    return $response['result']; // invoice_link
}

After payment, the Mini App receives a callback and updates the order status in Bitrix. The buyer receives a notification via the bot.

What is included in the work

• Bot registration and Mini App setup via @BotFather
• React application development: catalog, product page, cart, checkout
• initData validation on the Bitrix side with protection against tampering
• Linking a Telegram user to a customer in Bitrix (via UF_TELEGRAM_ID)
• REST API: catalog, cart, orders, statuses, notifications
• (Optional) Telegram Payments integration for one-tap payment
• Customer notifications via the bot: order status changes, promo codes
• API documentation and operation manual
• Training administrators to work with the control panel
• Support for 30 days after launch

Development Timeline

The cost is calculated individually after analyzing your catalog and requirements. Order the integration — we will prepare a commercial proposal within 1-2 days. Get a consultation from an experienced engineer.

Our guarantees: fixed cost at each stage, transparent timelines, delivery of each stage with a signed acceptance certificate. We work with 1C-Bitrix starting from current versions, and we support CommerceML exchange, REST API, and high-load catalogs of up to 500,000 products. Contact us to evaluate your project.