Handle Onsite Transaction Checkout from Frontend Using Metamask API and Javascript

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

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();

   }

Full Javascript of Transaction Checkout from the Frontend Using Metamask API and Javascript

If you are interested in Web3.0 tutorial 10 – Handle Onsite Transaction Checkout from Frontend Using Metamask API and Javascript, please subscribe to our newsletter by adding the message “Web3.0 tutorial 10”. We would send you the script immediately to your mailbox.

I hope you enjoy reading Web3.0 tutorial 10 – Handle Onsite Transaction Checkout from Frontend Using Metamask API and Javascript. If you did, please support us by doing one of the things listed below, because it always helps out our channel.

• Support and donate to my channel through PayPal (paypal.me/Easy2digital)
• Subscribe to my channel and turn on the notification bell Easy2Digital Youtube channel.
• Follow and like my page Easy2Digital Facebook page
• Share the article on your social network with the hashtag #easy2digital
• You sign up for our weekly newsletter to receive Easy2Digital latest articles, videos, and discount codes
• Subscribe to our monthly membership through Patreon to enjoy exclusive benefits (www.patreon.com/louisludigital)