Livrer une Mini App Telegram en 48 heures

Ouvrez Telegram, cherchez @BotFather, envoyez /newbot. Choisissez un nom et un username suffixé _bot. Sauvegardez le token API — vous en aurez besoin côté serveur.

Puis attachez une Mini App :

/newapp                 → choisir votre bot
Title:                  Telegram Bible Demo
Description:            Construire sur Telegram, vite.
Photo:                  PNG 640×360
GIF:                    optionnel
Web App URL:            https://votre-app.example.com
Short name:             demo

Votre Mini App est désormais accessible via t.me/your_bot/demo et via les boutons inline.

Utilisez Vite + React (ou votre stack). Installez le SDK Telegram :

npm create vite@latest mini-app -- --template react-ts
cd mini-app
npm install @telegram-apps/sdk-react

Dans main.tsx, initialisez le pont :

import { init, miniApp, viewport } from "@telegram-apps/sdk-react";

init();
miniApp.mount();
viewport.mount();
miniApp.ready();

miniApp.ready() indique à Telegram que votre app a fini de charger — Telegram cache son loader et révèle votre UI.

Telegram passe une chaîne initData signée. Ne lui faites jamais confiance côté client. Envoyez-la au backend et vérifiez le HMAC.

import crypto from "node:crypto";

export function verifyInitData(initData: string, botToken: string): boolean {
  const params = new URLSearchParams(initData);
  const hash = params.get("hash")!;
  params.delete("hash");

  const dataCheck = [...params.entries()]
    .sort(([a], [b]) => a.localeCompare(b))
    .map(([k, v]) => `${k}=${v}`)
    .join("\n");

  const secret = crypto
    .createHmac("sha256", "WebAppData")
    .update(botToken)
    .digest();

  return crypto
    .createHmac("sha256", secret)
    .update(dataCheck)
    .digest("hex") === hash;
}

Une fois vérifiée, parsez initData.user — c’est votre user de confiance. Émettez votre propre JWT de session à partir de là.

Les Stars sont la monnaie in-app de Telegram pour les biens digitaux. Parfait pour : déblocage premium, tips, templates payants, crédits IA.

Côté backend, créez un lien de facture via l’API Bot :

const res = await fetch(`https://api.telegram.org/bot${TOKEN}/createInvoiceLink`, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    title: "Plan Pro",
    description: "Accès illimité à la bibliothèque",
    payload: `user_${userId}_pro_2026_04`,
    currency: "XTR",
    prices: [{ label: "Pro", amount: 250 }],
  }),
});
const { result: invoiceUrl } = await res.json();

Passez invoiceUrl au client et appelez openInvoice(invoiceUrl). Gérez ensuite pre_checkout_query et successful_payment côté serveur.

Cloudflare Pages ou Vercel — HTTPS gratuit dans les deux cas. Mettez à jour l’URL chez BotFather.

Pour la distribution :

• Lien direct : t.me/your_bot/demo.
• Paramètre de démarrage : ?startapp=ref_alex → tracking referral via initData.start_param.
• Mode inline : @your_bot dans n’importe quel chat partage votre app.
• Channels : message avec bouton Mini App.
• Stories : CTR étonnamment élevé.