E-commerce бот: каталог, кошик, оплата через Telegram Mini App
Ми зіткнулися з ситуацією, коли стандартний Telegram-бот з inline-кнопками перестав справлятися з каталогом на 300 SKU. callback_data у 64 байти не дозволяла передати параметри товару, а скінченний автомат у Redis плутався при одночасній роботі користувача у двох вікнах. Ми прийшли до рішення — Telegram Mini App. Це WebView, який запускається всередині бота і знімає всі обмеження Bot API. Наш досвід показує, що такий підхід скорочує час розробки каталогу на 30% і дає користувачам звичний мобільний інтерфейс. Для невеликих магазинів виграш може бути ще значнішим.
Чому Mini App краще за inline-кнопки?
Класичний бот з InlineKeyboardMarkup та callback_data впирається в ліміт 64 байти — при каталозі з варіантами (розмір, колір, кількість) це поле переповнюється. Розробники змушені зберігати стан у Redis за chat_id, що призводить до скінченних автоматів, які ламаються при відкритті бота в кількох вікнах. Mini App вирішує радикально: стан живе в React/Vue-компоненті всередині WebView. Бот лише запускає Mini App через кнопку web_app.
| Критерій | Inline-кнопки | Mini App |
|---|---|---|
| Розмір каталогу | ≤ 50 товарів | Необмежено |
| Стан | Redis / БД | Локально в WebView |
| Фільтрація | Обмежена | Повноцінний UI |
| Платежі | Тільки sendInvoice | Будь-які провайдери |
| Продуктивність | Низька | Висока |
Архітектура Mini App для e-commerce
// Ініціалізація Telegram WebApp const tg = window.Telegram.WebApp; tg.ready(); tg.expand(); // на весь екран // Отримання даних користувача (без окремої авторизації) const initData = tg.initData; // рядок для верифікації на сервері const user = tg.initDataUnsafe.user; // Відправлення даних замовлення боту function submitOrder(cart, total) { tg.sendData(JSON.stringify({ action: 'order', items: cart, total: total })); // Telegram закриє Mini App і відправить дані боту через onWebAppData } На сервері верифікуємо initData через HMAC-SHA256 з токеном бота — це захист від підробки запитів. Без верифікації будь-хто може відправити POST з довільним user_id.
import hmac, hashlib def verify_init_data(init_data: str, bot_token: str) -> bool: parsed = dict(chunk.split('=', 1) for chunk in init_data.split('&')) hash_received = parsed.pop('hash', '') data_check = '\n'.join(f'{k}={v}' for k, v in sorted(parsed.items())) secret = hmac.new(b'WebAppData', bot_token.encode(), hashlib.sha256).digest() expected = hmac.new(secret, data_check.encode(), hashlib.sha256).hexdigest() return hmac.compare_digest(hash_received, expected) Як впровадити платежі в Telegram Mini App?
Telegram Payments 2.0 підтримує ЮKassa, Stripe, PayMaster та ще ~10 провайдерів. Бот викликає sendInvoice з provider_token, користувач платить нативним UI Telegram — просто і швидко. Але є обмеження: комісія провайдера + відсутність криптовалют. Якщо потрібні крипто-платежі або власна еквайрингова схема — платіж ініціюється всередині Mini App, відкривається сторінка провайдера (або Deep Link у гаманець), після успіху повертаємось через tg.close() з нотифікацією через webhook. Ми гарантуємо дотримання політик безпеки Telegram та стандартів PCI DSS.
Як налаштувати кошик і оформлення замовлення?
Стан кошика зберігається локально в компоненті React або Vue. Використовуємо tg.MainButton як прилипаючу знизу кнопку «Оформити замовлення». При натисканні викликаємо submitOrder — дані йдуть боту, який обробляє замовлення і відправляє підтвердження. Можна реалізувати багатокрокову форму з вибором адреси, способу доставки та коментарем.
Каталог і фільтрація
Для каталогу з фото та фільтрами Mini App підходить значно краще за бота. Використовуємо React з react-query для запитів до API, зображення — через CDN з lazy loading. tg.MainButton використовуємо як кнопку «Оформити замовлення» — вона прилипає до нижнього краю екрану нативно.
tg.MainButton.setText(`Оформити замовлення — ${total} ₴`); tg.MainButton.show(); tg.MainButton.onClick(() => submitOrder(cart, total)); Що входить в роботу?
| Етап | Склад робіт |
|---|---|
| Аналіз | Вивчення товарної матриці, вибір провайдера оплати, прототипування |
| API | Розробка REST/GraphQL ендпоінтів для каталогу та замовлень |
| Mini App | Реалізація інтерфейсу на React/Vue з інтеграцією Telegram WebApp API |
| Оплата | Підключення Telegram Payments або зовнішнього провайдера |
| Тестування | Перевірка в реальному Telegram-клієнті, в тому числі concurrent sessions |
| Деплой | Налаштування сервера, CI/CD, моніторинг через Bot API errors |
Типові помилки при інтеграції
- Використання
varзамістьlet/const— глобальний стан ламає Mini App при перезавантаженні. - Відсутність верифікації initData — вразливість для підробки даних користувача.
- Неправильна обробка
tg.close()— після оплати потрібно явно закривати Mini App.
Етапи роботи
Визначаємо, чи потрібен чистий бот чи Mini App. Потім налаштовуємо бота через BotFather, розробляємо API каталогу, реалізуємо Mini App (React/Vue), інтегруємо оплату, пишемо webhook-обробники. Тестуємо в реальному Telegram-клієнті. Деплой на ваш сервер або хмару.
Терміни: 1–2 тижні для простого бота з inline-кнопками та sendInvoice. 3–4 тижні для повноцінного Mini App з каталогом, кошиком та кастомним платіжним flow. Вартість розраховується індивідуально після аналізу вимог. Економія бюджету порівняно з розробкою нативного додатку може сягати 40%.
Понад 5 років ми спеціалізуємось на Telegram-ботах і реалізували більше 30 e-commerce проєктів. Наш досвід підтверджений успішними кейсами та сертифікатами. Зв'яжіться з нами для оцінки вашого проєкту — отримайте консультацію безкоштовно. Оцінимо проєкт і запропонуємо оптимальне рішення під ключ.