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>
html5.4KB© 壹影
精简后的代码非常简单,主要功能都有涉及,但需自己修改。若有疑问可在此留言
练习两年半
2025-01-10 10:59您好,在Telegram里的web应用,点击跳转钱包和发起转账后,web应用会关闭然后再打开钱包的,这个怎么弄改成不关闭应用,而是另起一个网页打开钱包
2小二
2025-01-19 10:14@练习两年半:我也遇到这个问题,求解
素裙女子
2025-06-04 15:10@练习两年半:同问,我也碰到这个问题了
村超
2025-06-20 17:37@练习两年半:有解决了吗?
哈哈
2025-01-03 17:56可以加我qq邮箱的联系方式咩 想请教一下东西
andy
2024-09-11 17:19const result = await tonConnectUI.sendTransaction(transaction);
后面不做校验了嘛,校验才是重头戏
118
2024-07-28 22:26cocos咋用知道吗