Apart from Web3 modules at the backend of handling Cryptocurrency wallet checkout, MetaMask API provides a way for developers to add a way to complete the full checkout process at the front end. Therefore, customers just need to click the favorite item checkout button, fill in the amount in their wallet and sign. The checkout is done.

In this article, I would briefly walk through how to leverage MetaMask API using Javascript to add this function on the product detail page or product list page. So customers can click through and checkout, which shortens the conversion journey.

Table of Contents: Complete Transaction Checkout on Frontend Using Metamask API and Javascript

• Connect with MetaMask Wallet
• Buy Now Button Script Connecting with Wallet
• Receive the Order Confirmation Receipt after Customers Have Signed in.
• Full Javascript of Transaction Checkout on the Frontend Using Metamask API and Javascript
• FAQ

Connect with MetaMask Wallet

This step is similar to the last chapter regarding user sign-up and login using the MetaMask wallet. The difference is this button is for buyers to enable the connection again if it’s disconnected, or she or he hasn’t signed up yet. It can ensure your . database can store this buyer’s wallet address’s public key

 //Connect the website
 let accounts = [];
 const ethereumButton = document.querySelector('.enableEthereumButton');
 ethereumButton.addEventListener('click', () => {
 getAccount();
 });
 async function getAccount() {
 accounts = await ethereum.request({ method: 'eth_requestAccounts' });
 }

Buy Now Button Script Connecting with Wallet

Once the buyer has connected with your website using MetaMask, now she or he is able to check out the item when clicking the buy now button.

For the button script that can trigger MetaMask, here is the code sample as follows:

 //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
 });
 });

Receive the Order Confirmation Receipt after Customers Have Signed in

After the buyer has signed the order, it’s not finished yet. It’s because you need to get the confirmation receipt and respond to this dataset to your backend and automatically update the database and fulfill the order.

 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 and Transaction Checkout Playbook

• If you are interested in learning more about Metamask checkout, please subscribe to our Youtube Channel and comment “metamask” in the following video (Metamask Playbook)
• Support our channel through PayPal (paypal.me/Easy2digital)
• Follow our Facebook page
• Sign up for our weekly newsletter to receive Easy2Digital latest articles, videos, and discount code on Buyfromlo products and digital software