壹影博客.
我在下午4点钟开始想你
TonConnect-UI对接Telegram钱包支付
  • 2024-5-22日
  • 0评论
  • 156围观

TonConnect-UI对接Telegram钱包支付

TonConnect-UI是一款与Telegram进行进行界面交互的前端框架,可用于Telegram钱包的连接,调用支付,支付回调等

Github:点我跳转

 

一、最终效果展示 

在教程开始之前我们先看看最终结果

 1. 前端界面展示

2. 连接 官方Telegram 钱包窗口展示

3. 支付 调用窗口展示

4. 回调通知页面展示

 

二、依赖框架说明

1.telegram-web-app.js  //与Telegram交互相关功能
2.tonconnect-sdk.js //与Telegram进行连接以及相关依赖
3.tonconnect-ui.js //连接UI展示页面
4.tonweb.js //关于TON链的相关功能 

 三、精简版Demo

官方提供的demo是一个vite项目,并且demo不完善,小编将主要功能做了提取打包成了html

<!DOCTYPE HTML>
<html lang="en">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover">
    <title>Tonpay demo .</title>
  <body class="theme-dark" onload="init()">
    <h1>Jetton transfer demo</h1>
    <button onclick="transfer_jetton()">Jetton Transfer</button>
    <!-- Telegram 相关依赖 -->
    <script src="https://telegram.org/js/telegram-web-app.js"></script>

    <!-- tonconnect 依赖文件 -->
    <script src="https://unpkg.com/@tonconnect/sdk@latest/dist/tonconnect-sdk.min.js"></script>
    <script src="https://bundle.run/buffer@6.0.3"></script>
    <script type="text/javascript">
      window.Buffer = window.Buffer??buffer.Buffer;
    </script>

    <!-- tonconnect-UI 依赖文件 -->
    <script src="https://unpkg.com/@tonconnect/ui@2.0.0/dist/tonconnect-ui.min.js"></script>

    <!-- TON链相关功能 依赖文件 -->
    <script src="https://unpkg.com/tonweb@latest/dist/tonweb.js"></script>
    <script>
      var account;
                  var tonConnectUI;
                  async function ton_connect_ui_connect(url) {
                   try{
                      if(!tonConnectUI) {
                          console.log("INIT the tonconnect ",tonConnectUI)
                          //提供一个manifest的json文件记录一些标题图标等数据用于UI连接时的展示
                          var manifest = 'https://test.tonspay.top/api/manifest' ;
                          if(url) {manifest +=`?url=${url}`}
                          console.log(manifest)
      
                          //获得TON_CONNECT_UI的实例
                          tonConnectUI = new TON_CONNECT_UI.TonConnectUI({
                          manifestUrl: manifest,
                          uiPreferences: {
                              //这里可以配置主题
                             // theme: TON_CONNECT_UI.THEME.DARK,
                          },
                          });
                      }
                      }catch(e){console.error(e) ;}      
                          try{
                              if(tonConnectUI.connected) {
                                  //断开连接重新加载
                                  console.log("Disconnect for connection reload")
                                  await tonConnectUI.disconnect();
                              }
                          }catch(e){
                       console.error(e) ;}
                          try{
                await tonConnectUI.openModal();
        
                tonConnectUI.onStatusChange(
                    walletAndwalletInfo => {
                        //连接状态改变监听事件
                        console.log("change : ", walletAndwalletInfo)
                        account = walletAndwalletInfo;
                    }
                );
            }catch(e){console.error(e) ;}      
                  }
      
                  async function init()
                  {
                      await ton_connect_ui_connect()
                  }
                  async function transfer_jetton()
                  {
      
            //USDT payment --> USDT转账
            console.log("Jetton payment")
            const tonweb = new TonWeb();
      
            //EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs USDT地址 固定写法
            const jettonMinter = new TonWeb.token.jetton.JettonMinter(tonweb.provider, {address: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs' /* USDT token address */});
            console.log(jettonMinter);
            const jettonMinterAddress = await jettonMinter.getJettonWalletAddress(new TonWeb.utils.Address(account.account.address));
            console.log(jettonMinterAddress.toString(true))
            const jettonWallet = new TonWeb.token.jetton.JettonWallet(tonweb.provider, {
              address: jettonMinterAddress
            });
            const tonFee = '50000000' //多了就会自动退回的手续费
      
            const seqno = Date.now()
            const jettonBody = {
              queryId: seqno,
              jettonAmount: '10000',
              toAddress: new TonWeb.utils.Address('UQADoX65_S5oswDkMY4rWv4iqv1aVHNMkE7aC5UabAkgl9aH' /* 收款地址*/),
              responseAddress: new TonWeb.utils.Address(account.account.address)
            }
            
            console.log('jettonWallet.createTransferBody',jettonBody)
            let payload = await jettonWallet.createTransferBody(jettonBody)
      
            transaction = {
              validUntil: Math.floor(Date.now() / 1000) + 6000, // 6000 秒
              messages: [
                  {
                      address: jettonMinterAddress.toString(true),
                      amount: tonFee,
                      payload: TonWeb.utils.bytesToBase64(await payload.toBoc())
                  }
              ]
            }
        try {
            const result = await tonConnectUI.sendTransaction(transaction);
            console.log("result : ",result)
            // you can use signed boc to find the transaction 
            window.alert("pay success")
            close_window_webapp()
        } catch (e) {
            console.error(e);
            window.alert(e)
        }
        
                  }
    </script>
  </body>
  </head>

</html>

精简后的代码非常简单,主要功能都有涉及,但需自己修改。若有疑问可在此留言

发表评论