How to create Telegram Mini Apps

This guide will show you how to create Telegram Mini Apps on Viction

What are Telegram Mini Apps?

Telegram Mini Apps are lightweight web apps that run inside Telegram chats. They allow developers to create social experiences, games, marketplaces, and other services that tap into Telegram’s features and ~1B audience globally.

Mini App type

There are two main types of Mini Apps:

Inline Apps

Inline Apps show up as results when a user types the bot’s username followed by a query. The user taps an app result to launch the Mini App. Inline Apps are great for:

• Search experiences

• Quick interactions

• Discovering new content

Direct Link Apps

Users can open a Direct Link App just by tapping a link. Direct Link Apps are aware of the current chat context and support shared, collaborative experiences. Direct Link Apps are ideal for:

• Social experiences

• Games

• Productivity tools

• And more

Core Infrastructure

1. A Telegram-supported wallet: which allows developers to embed web3 wallet into their games. You might refer to the following that support Viction

• Particle Network

• Ramper

• Wallet Connect

** Wallet bot could serve managing your assets without switching between apps outside of Telegram:*

• WalletX

• Coin98 (coming soon)

1. A Webapp to link to Telegram

2. A Telegram Bot to redirect users to the Webapp

3. Payments - via crypto/Telegram Stars

Integration

1. Create a Telegram Bot

Generate a private Telegram Bot

Visit the @BotFather bot (developed by Telegram’s core team) and enter /newbot to create a new bot. You will receive an API token for your bot. Keep this token private as it will allow you to control your bot.

Connect the Webapp to your Bot

Use the /newapp command in the @BotFather bot by selecting your bot. Provide details such as the app name, description, photo, etc. Finally, enter the URL of your webapp. Your mini app will now appear in the Telegram app and can be launched by users.

Additional Capabilities

Mini apps opened from a direct link have limited capabilities. They cannot read or send messages on behalf of the user. However, they support cooperative and multiplayer features within the current chat context. Users must redirect to inline mode to actively pick a result in order to send messages.

Mini apps are powerful tools for creating fully-fledged web services, team collaborations, multiplayer games, and more. The possibilities are endless.

2. Register a Game with @GameBot

The first step is to register your game with @BotFather. Send the /newgame command to @BotFather, and provide the required details including:

• The title and description of your game

• A cover photo

• The message text a user will see when starting a game

• The URL of your Mini App

3. Deploy your smart contracts and assets

Viction provide a all-in-one development platform for web3 telegram games to enable seamless game deployment with ease

1. Web3 wallet

2. Management dashboard

3. Audited contract templates for games

4. Game Engine SDK

5. Embedded Marketplace

6. In-game purchase

…Guide by steps from Sequence/Thirdweb/Elympics…

4. Using Telegram Stars for in-game purchase

Stars can ONLY be acquired through in-app purchases via Apple and Google or PremiumBot, then spent on digital products offered by bots – from e-books and online courses to items in Telegram games.

Walkthrough Bot Payments API for Digital Goods and Services

** There is no current option to enable purchasing Stars using $VIC or other assets on Viction*

You will find the necessary methods for building your payment implementation in the Payments Section of the Bot API Manual.

In short, you must:

• Send an invoice via sendInvoice (currency: “XTR”)

• Await an Update with the field pre_checkout_query

• Approve or cancel the order via answerPreCheckoutQuery

• Await an Update with the field successful_payment

• Store the SuccessfulPayment’s telegram_payment_charge_id – it may be needed to issue a refund in the future

• Deliver the goods and services purchased by the user

You may find that some API methods for Payments request a provider_token. This parameter is only needed for sales of physical goods and services – for digital ones, you can leave it empty.

Step-by-Step Process

See Bot API: Payments for the complete list of available methods and objects. Be sure to provide the proper set of parameters to account for the type of goods you are selling, differentiating between digital and physical orders.

1. Create Invoice

The user contacts @merchantbot and requests to purchase something. The bot forms an invoice message with a description of the goods or service and amount to be paid (expressed in Telegram Stars). There are two ways of creating an invoice:

A. Bot Invoice

Use the sendInvoice method to generate an invoice and send it to a chat. You can pass an empty string as the provider_token parameter, since the invoice is for digital goods and services.

Remember to specify XTR in the currency field, since all sales of digital goods and services are carried out exclusively in Telegram Stars.

B. Inline Invoice

If @merchantbot supports inline mode, you can use inputInvoiceMessageContent to allow users to share invoices for your goods and services to their one-on-one chats with friends, or to their groups and channels. These invoices will have a Pay button that can be used multiple times.

2. Choose Forwarding Behavior

There are two ways for handling forwarded copies of your invoices, controlled by the parameter start_parameter in the sendInvoice method.

• A. Multi-chat invoice. Forwarded copies show a Pay button, which multiple users can press and attempt to pay for the goods or services. Inline invoices are always multi-chat invoices.

• B. Single-chat invoice. Invoice can only be paid from the chat to which it was sent, forwarded copies show a URL button with a deep link to the bot. The deep link can be used to generate a similar invoice in the chat with the bot, to show an error message, or for other purposes. More info on Deep Linking »

If a single-chat invoice is sent to the chat with @merchantbot, it can only be paid once. If a single-chat invoice is sent to any other chat, it can be paid many times by many users.

To get a better understanding of how this works, try toggling the “Pay from Forwards” parameter when creating invoices with our demo @ShopBot.

Regardless of whether or not the Pay button is available in an invoice, the merchant bot always has the power to decide whether or not to accept new payments for a particular invoice.

3. Pre-Checkout

The user purchases Stars from Telegram (if necessary), then presses the pay button. At this moment the Bot API sends an Update with the field pre_checkout_query that contains all the available information about the order to the bot.

Your bot must reply using answerPrecheckoutQuery within 10 seconds after receiving this update or the transaction is canceled.

The bot may return an error if it can't process the order for any reason. We highly recommend specifying a reason for failure to complete the order in human readable form (e.g. "Sorry, we're all out of rubber duck digital posters! Would you be interested in a cast iron bear digital poster instead?"). Telegram will display this reason to the user.

Warning: It is critical to make sure your bot only accepts multiple payments when the order can be processed correctly. This is especially important if you are using multi-chat, inline or single-chat, multi-use invoices.

4. Checkout

If the bot confirms the order and the payment is successful, the API will send a receipt message of the type successful_payment from the user. Once your bot receives this message, it should proceed with sending the digital goods or services purchased by the user.

Warning: You must always check that you received a successful_payment update before delivering the goods or services purchased by the user – simply answering a pre_checkout_query does not guarantee a successful order or payment.

If the message was sent to any other chat, the Pay button remains and can be used again. It is up to the merchant bot whether to actually accept multiple payments.

5. Share your game

Once registered, your game will receive a shareable game URL and a game code which players can enter to launch the game. You can share this URL and code on your website, social media, and within Telegram chats to spread your game to other players.