Telegram Mini App Pro

I have generated a production-grade React scaffold with a companion Node.js backend to handle Telegram's native UI and cryptographic security.

TMA Production Scaffold

Frontend: React + SDK Integration

import { useEffect } from 'react';

const TelegramApp = () => {
  useEffect(() => {
    const tg = window.Telegram.WebApp;
    tg.ready();
    tg.expand();
    
    // Setup MainButton for Checkout
    tg.MainButton.setText('CHECKOUT ($25.00)');
    tg.MainButton.show();
    tg.MainButton.onClick(() => {
      tg.HapticFeedback.notificationOccurred('success');
      console.log('Payment initiated');
    });

    return () => tg.MainButton.hide();
  }, []);

  return (
    <div style={{ 
      height: 'var(--tg-viewport-height)', 
      backgroundColor: 'var(--tg-theme-bg-color)',
      color: 'var(--tg-theme-text-color)' 
    }}>
      <h1>Premium Service</h1>
      <p style={{ color: 'var(--tg-theme-hint-color)' }}>Secure Telegram Checkout</p>
    </div>
  );
};

Backend: Node.js Auth Middleware

const crypto = require('crypto');

function verifyTelegramAuth(initData, botToken) {
  const urlParams = new URLSearchParams(initData);
  const hash = urlParams.get('hash');
  urlParams.delete('hash');

  const dataCheckString = Array.from(urlParams.entries())
    .sort(([a], [b]) => a.localeCompare(b))
    .map(([key, value]) => `${key}=${value}`)
    .join('\n');

  const secretKey = crypto.createHmac('sha256', 'WebAppData').update(botToken).digest();
  const signature = crypto.createHmac('sha256', secretKey).update(dataCheckString).digest('hex');

  const authDate = parseInt(urlParams.get('auth_date'));
  const isExpired = (Math.floor(Date.now() / 1000) - authDate) > 86400;

  return signature === hash && !isExpired;
}

Next steps

• Set your WebApp URL in @BotFather using the /setwebapp command.
• Deploy the backend with your TELEGRAM_BOT_TOKEN as an environment variable.
• Include <script src="https://telegram.org/js/telegram-web-app.js"></script> in your index.html.