E-Commerce Catalog Order Payment Bot in Mobile App

E-commerce Bot Implementation (Catalog, Order, Payment) in Mobile App

Telegram bot for store works as separate sales channel, but embedding full catalog with filtering, cart and payment — hits Bot API limitations fast. Built-in keyboard doesn't handle dynamic catalogs with hundreds of SKU, and payment flow via sendInvoice works only with certain providers. Right solution — Telegram Mini App launching inside bot using native WebApp API instead of button-messages.

Where Standard Inline Button Approach Breaks

Classic bot with InlineKeyboardMarkup and callback_data has hard limit: callback_data — max 64 bytes. With product variants (size, color, quantity) this field runs out fast. Developers start storing state in Redis by chat_id — becomes finite state machine: /start → catalog → category → product → cart → checkout. Works but scales poorly and breaks if user opens bot in two windows simultaneously.

Telegram Mini App solves radically: state lives in React/Vue component inside WebView. Bot only launches Mini App via web_app button in KeyboardButton.

Mini App Architecture for E-commerce

// Initialize Telegram WebApp
const tg = window.Telegram.WebApp;
tg.ready();
tg.expand(); // fullscreen

// Get user data (no separate auth)
const initData = tg.initData; // string for server verification
const user = tg.initDataUnsafe.user;

// Send order data to bot
function submitOrder(cart, total) {
    tg.sendData(JSON.stringify({
        action: 'order',
        items: cart,
        total: total
    }));
    // Telegram closes Mini App and sends data to bot via onWebAppData
}

On server verify initData via HMAC-SHA256 with bot token — protection against request forgery. Without verification anyone can send POST with arbitrary 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)

Payment via Telegram or External Provider

Telegram Payments 2.0 supports YooKassa, Stripe, PayMaster and ~10 more providers. Bot calls sendInvoice with provider_token, user pays via native Telegram UI — simple and fast.

But limitation: provider commission + no cryptocurrencies. For crypto payments or custom acquiring — payment initiates inside Mini App, provider page opens (or Deep Link to wallet), after success return via tg.close() with notification via webhook.

Catalog and Filtering

For product catalog with photos and filters Mini App much better than bot. Use React with react-query for API requests, images via CDN with lazy loading. Use tg.MainButton as "Checkout" button — sticks to screen bottom natively.

tg.MainButton.setText(`Checkout — ${total} ₽`);
tg.MainButton.show();
tg.MainButton.onClick(() => submitOrder(cart, total));

Work Timeline

Define if pure bot or Mini App needed → bot setup via BotFather → develop catalog API → implement Mini App (React/Vue) → integrate payment → webhook handlers → test in real Telegram client.

1–2 weeks for simple bot with inline buttons and sendInvoice. 3–4 weeks for full Mini App with catalog, cart and custom payment flow. Cost calculated individually after requirements analysis.