Telegram Mini Apps: a complete overview of the platform

<!-- a Mini App is an ordinary web page that opens inside Telegram -->
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<style>
  /* Telegram passes the user's theme as CSS variables */
  body { background: var(--tg-theme-bg-color, #fff); color: var(--tg-theme-text-color, #000); }
</style>

<h1>Premium course</h1>
<p id="hello"></p>

<script>
  const app = Telegram.WebApp;
  app.ready(); // the interface is ready: Telegram hides its loader

  const name = app.initDataUnsafe.user?.first_name ?? 'guest';
  document.getElementById('hello').textContent = `Hello, ${name}!`;

  // the main button lives in Telegram's own interface, at the bottom of the screen
  app.MainButton.setText('Buy for 50 ⭐').show().onClick(async () => {
    // initData goes to the server: it checks the signature and creates the invoice
    const res = await fetch('/api/invoice', { method: 'POST', body: app.initData });
    const { link } = await res.json();
    app.openInvoice(link, (status) => {
      if (status === 'paid') app.showAlert('Thank you! Access is open.');
    });
  });
</script>

<?php
declare(strict_types=1);

// initData is signed by Telegram: check it on the server, never trust the browser
function verifyInitData(string $initData, string $botToken, int $maxAge = 3600): ?array
{
    parse_str($initData, $fields);
    $hash = $fields['hash'] ?? '';
    unset($fields['hash']);

    ksort($fields);
    $check = implode("\n", array_map(fn($k, $v) => "$k=$v", array_keys($fields), $fields));

    $secret = hash_hmac('sha256', $botToken, 'WebAppData', true);
    if (!hash_equals(hash_hmac('sha256', $check, $secret), $hash)) {
        return null;                                   // forged or damaged data
    }
    if (time() - (int) ($fields['auth_date'] ?? 0) > $maxAge) {
        return null;                                   // the data is too old
    }
    return json_decode($fields['user'] ?? 'null', true);
}

<?php
declare(strict_types=1);

// an invoice in Telegram Stars: digital goods inside Telegram are paid only this way
function createStarsInvoice(string $botToken, string $title, int $stars, string $payload): string
{
    $api = getenv('TG_API') ?: 'https://api.telegram.org';
    $request = [
        'title'          => $title,
        'description'    => "Access: $title",
        'payload'        => $payload,              // your order id, returned after payment
        'currency'       => 'XTR',                 // XTR = Telegram Stars
        'prices'         => [['label' => $title, 'amount' => $stars]],
        'provider_token' => '',                    // empty for Stars
    ];
    $context = stream_context_create(['http' => [
        'method'  => 'POST',
        'header'  => 'Content-Type: application/json',
        'content' => json_encode($request),
    ]]);
    $response = json_decode(file_get_contents("$api/bot$botToken/createInvoiceLink", false, $context), true);
    if (!($response['ok'] ?? false)) {
        throw new RuntimeException($response['description'] ?? 'Telegram API error');
    }
    return $response['result'];                    // a link for Telegram.WebApp.openInvoice()
}