除了处理加密货币钱包结账的后端 Web3 模块之外，MetaMask API 还为开发人员提供了一种在前端添加完成完整结账流程的方法。因此，顾客只需点击喜爱的商品结帐按钮，填写钱包中的金额并签名即可。结帐完成。
在本文中，我将简要介绍如何使用 Javascript 利用 MetaMask API 在产品详细信息页面或产品列表页面上添加此功能。因此客户可以点击并结账，从而缩短转化过程。
目录：使用 Metamask API 和 Javascript 在前端完成交易检查
连接 MetaMask 钱包
此步骤与上一章有关使用 MetaMask 钱包进行用户注册和登录的内容类似。不同之处在于，此按钮供买家在连接断开或尚未注册时再次启用连接。它可以确保您的数据库可以存储该买家的钱包地址的公钥
//Connect the website
let accounts = [];
const ethereumButton = document . querySelector ( '.enableEthereumButton' );
ethereumButton . addEventListener ( 'click' , () => {
getAccount ();
});
async function getAccount () {
accounts = await ethereum . request ({ method: 'eth_requestAccounts' });
}与钱包连接的“立即购买”按钮脚本
一旦买家使用 MetaMask 连接到您的网站，现在她或他就可以在单击“立即购买”按钮时查看该商品。
对于可以触发MetaMask的按钮脚本，代码示例如下：
//Sending Ethereum to an address
sendEthButton . addEventListener ( 'click' , () => {
signTransaction = ethereum . request ({
method: 'eth_sendTransaction' ,
params: [
{
from: accounts [ 0 ], // this is the user wallet address she or he used to connect with your website just now above
to: 'to your merchant wallet account set in advance' ,
}]
}). then ( txhash => {
console . log ( txhash );
checkTransactionconfirmation ( txhash ). then ( r => alert ( r )); // This is for the receipt data capture. I would show more details in the following point
});
});客户登录后收到订单确认收据
买家签完订单后，订单还没有完成。这是因为您需要获取确认收据并将此数据集响应到后端并自动更新数据库并履行订单。
function checkTransactionconfirmation ( txhash ) {
let checkTransactionLoop = () => {
return ethereum . request ({ method: 'eth_getTransactionReceipt' , params: [ txhash ] }). then ( r => {
if ( r != null ) return 'confirmed' ;
else return checkTransactionLoop ();
})
};
return checkTransactionLoop ();
}使用 Metamask API 和 Javascript 从前端进行交易结帐的完整Javascript
如果您对 Web3.0 教程 10 – 使用 Metamask API 和 Javascript 从前端处理现场交易结帐感兴趣，请添加消息“Web3.0教程10”来订阅我们的新闻通讯。我们会立即将脚本发送到您的邮箱。
我希望您喜欢阅读 Web3.0 教程 10 – 使用 Metamask API 和 Javascript 从前端处理现场交易结帐。如果您这样做了，请通过执行下列操作之一来支持我们，因为这总是对我们的频道有所帮助。
- 通过 PayPal ( paypal.me/Easy2digital ) 支持并捐赠我的频道
- 订阅我的频道并打开通知铃Easy2Digital Youtube 频道。
- 关注并喜欢我的页面Easy2Digital Facebook 页面
- 使用主题标签 #easy2digital 在您的社交网络上分享文章
- 您订阅我们的每周通讯即可接收 Easy2Digital 最新文章、视频和折扣代码
- 通过 Patreon 订阅我们的月度会员即可享受独家优惠 ( www.patreon.com/louisludigital )
