Реалізація бота для e-commerce (каталог, замовлення, оплата) у мобільному додатку
Telegram-бот для магазину працює як окремий канал продажів, але "вшити" у нього повнофункціональний каталог з фільтрацією, кошик та оплату — завдання, яке швидко упирається в обмеження Bot API. Вбудована клавіатура не тянуть динамічні каталоги з сотнями SKU, а платіжний flow через sendInvoice працює тільки з певними провайдерами. Правильне рішення — Telegram Mini App, який запускається всередину бота та використовує нативний WebApp API замість кнопок-повідомлень.
Де ломається стандартний підхід з inline-кнопками
Класичний бот з InlineKeyboardMarkup та callback_data має жорсткі обмеження: callback_data — максимум 64 байти. При каталозі з варіантами (розмір, колір, кількість) це поле закінчується швидко. Розробники починають зберігати стан у Redis по chat_id — отримується кінцевий автомат: /start → catalog → category → product → cart → checkout. Це працює, але погано масштабується та ломається, якщо користувач відкриє бота у двох вікнах одночасно.
Telegram Mini App розв'язує це радикально: стан живет у React/Vue-компоненті всередину WebView. Бот тільки запускає Mini App через web_app кнопку у KeyboardButton.
Архітектура 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 або зовнішнього провайдера
Telegram Payments 2.0 підтримує ЮKassa, Stripe, PayMaster та ще ~10 провайдерів. Бот викликає sendInvoice з provider_token, користувач платить нативним UI Telegram — просто та швидко.
Але є обмеження: комісія провайдера + відсутність криптовалют. Якщо потрібні крипто-платежі або власна еквайринг-схема — платіж ініціюється всередину Mini App, відкривається сторінка провайдера (або Deep Link у гаманець), після успіху повертаємось через tg.close() з нотифікацією через webhook.
Каталог та фільтрація
Для каталогу з фото та фільтрами Mini App значно краще за бота. Використовуємо React з react-query для запитів до API, зображення — через CDN з lazy loading. tg.MainButton використовуємо як кнопку "Оформити замовлення" — вона прилипає до нижнього краю екрана нативно.
tg.MainButton.setText(`Оформити замовлення — ${total} ₽`);
tg.MainButton.show();
tg.MainButton.onClick(() => submitOrder(cart, total));
Етапи роботи
Визначаємо чи потрібен чистий бот або Mini App → настройка бота через BotFather → розробка API каталогу → реалізація Mini App (React/Vue) → інтеграція оплати → webhook обробники → тестування у реальному Telegram-клієнті.
1–2 тижні для простого бота з inline-кнопками та sendInvoice. 3–4 тижні для повнофункціонального Mini App з каталогом, кошиком та кастомним платіжним флоу. Вартість розраховується індивідуально після аналізу вимог.