<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BlockATM 支付测试</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 50px auto;
padding: 20px;
}
#blockatm-container {
min-height: 500px;
border: 1px solid #ddd;
border-radius: 8px;
margin-top: 20px;
}
.status {
padding: 10px;
margin: 10px 0;
border-radius: 4px;
}
.success { background: #d4edda; color: #155724; }
.error { background: #f8d7da; color: #721c24; }
</style>
</head>
<body>
<h1>🎉 BlockATM 支付测试</h1>
<div id="status"></div>
<div id="blockatm-container"></div>
<!-- 引入 BlockATM SDK -->
<script src="https://test-pay.blockatm.net/libs/v2/BlockATM.umd.js?apiKey=YOUR_API_KEY"></script>
<script>
// 替换为您的实际值
const CASHIER_ID = 'YOUR_CASHIER_ID';
const ORDER_NO = 'ORDER_' + Date.now();
const AMOUNT = '10'; // 测试金额：10 USDT
const SYMBOL = 'USDT';
const CHAIN_ID = 'TRON'; // 或 'ETHEREUM', 'ARBITRUM'
// 初始化收银台
window.BlockATM.init(
document.getElementById('blockatm-container'),
{
cashierId: CASHIER_ID,
orderNo: ORDER_NO,
amount: AMOUNT,
symbol: SYMBOL,
chainId: CHAIN_ID,
lang: 'zh-CN',
callback: function(result) {
const statusDiv = document.getElementById('status');
if (result.type === 'finish') {
statusDiv.className = 'status success';
statusDiv.innerHTML = '✅ 支付成功！订单号：' + result.data.orderNo;
console.log('支付成功:', result.data);
} else if (result.type === 'cancel') {
statusDiv.className = 'status error';
statusDiv.innerHTML = '❌ 用户取消支付';
} else {
statusDiv.className = 'status error';
statusDiv.innerHTML = '❌ 支付失败：' + result.message;
}
}
}
);
</script>
</body>
</html>
