如何使用Web3调用智能合约实现ETH购买ERC20代币功能

核心实现逻辑 #

你要调用payable修饰的合约方法，只需要在send参数里增加value字段传入要支付的ETH数额（单位为wei）即可，完整可直接用的代码示例如下：

// 依赖web3.js，如果你用的是ethers.js语法仅工具方法有差异，核心逻辑一致
async function purchaseTokens(buyCount, receiveTokenAmount) {
  // 检查MetaMask安装和连接状态
  if (!window.ethereum) {
    alert("请先安装MetaMask钱包");
    return;
  }
  // 唤起MetaMask授权获取用户钱包地址
  const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });
  const userWallet = accounts[0];

  // 计算要支付的ETH总额，转成wei单位：比如buyCount为1就是付1ETH
  const payEthWei = web3.utils.toWei(buyCount.toString(), "ether");

  try {
    // 调用合约purchase方法，payable方法必须传value参数
    const transaction = await contract.methods.purchase(buyCount, receiveTokenAmount).send({
      from: userWallet,
      value: payEthWei
    });
    console.log("兑换成功，交易哈希：", transaction.transactionHash);
    alert("代币兑换已完成");
  } catch (error) {
    console.error("兑换失败：", error);
    alert(error.message || "用户取消交易或兑换失败");
  }
}

你可以直接把上述函数绑定到页面的按钮点击事件上，用户点击后就会自动唤起MetaMask发起支付请求。

注意事项 #

• 你当前使用的Solidity purchase 函数存在逻辑缺失，建议补充校验：首先需要确认合约自身的代币余额大于等于要发放的tokens数量，避免减法溢出；其次函数执行完成后需要触发ERC20标准的Transfer事件，方便前端和区块浏览器识别代币转账行为；最后不要漏写函数末尾的闭合花括号。
• 前端传入的value数额要和合约里的require校验规则保持一致，避免出现金额不满足条件导致交易回滚浪费用户gas费。
• 如果你用的是ethers.js而非web3.js，仅需要把转wei的方法替换为ethers.utils.parseEther(buyCount.toString())即可，调用合约的逻辑完全一致。
• 可以额外添加交易状态监听逻辑，给用户展示支付中、支付成功、支付失败的不同交互反馈，提升使用体验。

内容的提问来源于stack exchange，提问作者Brian Lee Victory