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>
精简后的代码非常简单，主要功能都有涉及，但需自己修改。若有疑问可在此留言
发表评论