三步集成

本指南将帮助您在 30 分钟内完成 Widget SDK 的集成。

概述

Widget SDK 是接入 BlockATM 最快速的方式，只需三步即可在您的网站或应用中嵌入加密货币收银台：

引入 SDK 脚本
添加收银台容器
初始化 SDK

集成流程图

下图展示了集成的完整流程：

步骤 1：引入 SDK

在您的 HTML 页面中引入 BlockATM SDK：

<script src="https://pay.blockatm.net/libs/v2/BlockATM.umd.js?apiKey=YOUR_API_KEY"></script>

步骤 2：添加容器

在页面中添加一个容器元素，收银台将显示在这里：

<div id="blockatm-container"></div>

容器样式：建议为容器设置合适的高度和宽度，以容纳收银台界面。

步骤 3：初始化

在您的应用代码中初始化 SDK：

window.BlockATM.init(
  document.getElementById('blockatm-container'),
  {
    cashierId: 'YOUR_CASHIER_ID',
    orderNo: 'ORDER_' + Date.now(),
    amount: '100',
    symbol: 'USDT',
    chainId: 'TRON',
    callback: function(result) {
      if (result.type === 'finish') {
        console.log('Payment successful!', result.data);
      }
    }
  }
);

获取 API Key

您可以在 BlockATM 管理后台获取 API Key：

登录 BlockATM 管理后台
进入「收银台」→「集成」

集成信息：在集成页面，您可以获取收银台 ID 和 API 密钥。

完整示例

<!DOCTYPE html>
<html>
<head>
  <title>BlockATM 集成示例</title>
  <style>
    #blockatm-container {
      min-height: 400px;
      width: 100%;
      max-width: 500px;
    }
  </style>
</head>
<body>
  <h1>加密货币支付</h1>
  
  <div id="blockatm-container"></div>
  
  <script src="https://pay.blockatm.net/libs/v2/BlockATM.umd.js?apiKey=YOUR_API_KEY"></script>
  
  <script>
    window.BlockATM.init(
      document.getElementById('blockatm-container'),
      {
        cashierId: 'YOUR_CASHIER_ID',
        orderNo: 'ORDER_' + Date.now(),
        amount: '100',
        symbol: 'USDT',
        chainId: 'TRON',
        lang: 'zh-CN',
        callback: function(result) {
          if (result.type === 'finish') {
            console.log('支付成功!', result.data);
          } else if (result.type === 'cancel') {
            console.log('用户取消');
          }
        }
      }
    );
  </script>
</body>
</html>

下一步

Previous概述 Next参数说明

Last updated 10 hours ago

hashtag概述

hashtag集成流程图

hashtag步骤 1：引入 SDK

hashtag步骤 2：添加容器

hashtag步骤 3：初始化

hashtag获取 API Key

hashtag完整示例

hashtag下一步

概述