בוט מסחר אלקטרוני: קטלוג, עגלה, תשלום דרך Telegram Mini App

בוט מסחר אלקטרוני: קטלוג, עגלה, תשלום דרך Telegram Mini App

נתקלנו במצב שבו בוט טלגרם סטנדרטי עם כפתורים מובנים כבר לא יכול היה להתמודד עם קטלוג של 300 פריטים. מגבלת 64 הבתים של callback_data הפכה את זה לבלתי אפשרי להעביר פרמטרים של מוצרים, ומכונת המצב המבוססת על Redis התבלבלה כשמשתמש פתח את הבוט בשני חלונות בו זמנית. הפתרון שלנו: Telegram Mini App. זהו WebView שנפתח בתוך הבוט ומסיר את כל המגבלות של Bot API. הניסיון שלנו מראה שגישה זו מקצרת את זמן פיתוח הקטלוג ב-30% ונותנת למשתמשים ממשק נייד מוכר. עבור חנויות קטנות, הרווח יכול להיות אפילו גבוה יותר.

למה Mini App עדיף על כפתורים מובנים

בוט קלאסי עם InlineKeyboardMarkup ו-callback_data נתקל במגבלת 64 הבתים — עם וריאציות מוצר (גודל, צבע, כמות), השדה הזה עולה על גדותיו. מפתחים נאלצים לאחסן מצב ב-Redis לפי chat_id, מה שמוביל למכונות מצב שנשברות כשהבוט נפתח במספר חלונות. Mini App מספק פתרון רדיקלי: המצב חי ברכיב React/Vue בתוך WebView, והבוט רק מפעיל את ה-Mini App דרך כפתור web_app.

ארכיטקטורה של Mini App למסחר אלקטרוני

// Инициализация 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
}

בשרת, אנו מאמתים את // Инициализация 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 } באמצעות HMAC-SHA256 עם טוקן הבוט — זה מגן מפני זיוף בקשות. ללא אימות, כל אחד יכול לשלוח POST עם initData שרירותי.

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 תומך ב-YooKassa, Stripe, PayMaster וכ-10 ספקים נוספים. הבוט קורא ל-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) , המשתמש משלם עם ממשק הטלגרם המקורי — פשוט ומהיר. עם זאת, יש עמלה מהספק ואין תמיכה במטבעות קריפטו. אם אתה צריך תשלומי קריפטו או תוכנית סליקה משלך, התשלום מתחיל בתוך ה-Mini App, פותח את דף הספק (או קישור עמוק לארנק), ולאחר הצלחה אנו חוזרים דרך sendInvoice עם הודעה דרך webhook. אנו מבטיחים עמידה במדיניות האבטחה של טלגרם ובתקני PCI DSS.

איך להגדיר עגלה ותשלום?

מצב העגלה נשמר מקומית ברכיב React או Vue. אנו משתמשים ב-provider_token ככפתור "לתשלום" דביק בתחתית. בלחיצה, אנו קוראים ל-tg.close() — הנתונים עוברים לבוט, שמעבד את ההזמנה ושולח אישור. ניתן ליישם טופס רב-שלבי עם בחירת כתובת, שיטת משלוח והערה.

קטלוג וסינון

עבור קטלוג עם תמונות ומסננים, Mini App עדיף בהרבה על בוט. אנו משתמשים ב-React עם tg.MainButton לבקשות API, תמונות דרך CDN עם טעינה עצלה. submitOrder משמש ככפתור "לתשלום" — הוא נדבק לתחתית המסך באופן טבעי.

tg.MainButton.setText(`Оформить заказ — ${total} $`);
tg.MainButton.show();
tg.MainButton.onClick(() => submitOrder(cart, total));

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

טעויות אינטגרציה נפוצות

• שימוש ב-react-query במקום tg.MainButton — מצב גלובלי שובר את ה-Mini App בטעינה מחדש.
• חוסר אימות tg.MainButton.setText(`Оформить заказ — ${total} $`); tg.MainButton.show(); tg.MainButton.onClick(() => submitOrder(cart, total)); — פגיעות לזיוף נתוני משתמש.
• טיפול לא נכון ב-var — יש לסגור את ה-Mini App במפורש לאחר התשלום.

שלבי עבודה

אנו קובעים אם יש צורך בבוט טהור או ב-Mini App. לאחר מכן מגדירים את הבוט דרך BotFather, מפתחים את API הקטלוג, מיישמים את ה-Mini App (React/Vue), משלבים תשלום, כותבים מטפלי webhook. בודקים בקליינט טלגרם אמיתי. פורסים לשרת שלך או לענן.

לוחות זמנים: 1-2 שבועות לבוט פשוט עם כפתורים מובנים ו-let/const. 3-4 שבועות ל-Mini App מלא עם קטלוג, עגלה וזרימת תשלום מותאמת אישית. העלות מחושבת בנפרד לאחר ניתוח דרישות. חיסכון בתקציב בהשוואה לפיתוח אפליקציה מקורית יכול להגיע ל-40%.

במשך יותר מ-5 שנים אנו מתמחים בבוטים של טלגרם והשלמנו יותר מ-30 פרויקטים של מסחר אלקטרוני. הניסיון שלנו מגובה במקרי הצלחה ותעודות. צור קשר להערכת פרויקט — קבל ייעוץ. אנו נעריך את הפרויקט שלך ונציע פתרון אופטימלי כולל.