tips

Create a MetaMask Tipping Button and Start Collecting Ether

February 25, 2021

The most popular vending machine snacks lining up inside a vending machine.

People are using this altcoin called Ethereum (ETH) as an alternative to fiat money and to Bitcoin in online transactions. It is an awesome currency. It's well and live. And as you will later see, many tokens are built on top the Ethereum blockchain.

Tipping is All the Rage These Days

By adding a code snippet, you can receive Ether as a tip. Anyone with a MetaMask wallet can send it to you in just 'one click'. When your audience clicks the button, MetaMask will open and confirm the amount to be sent to the specified wallet address.

For our example, this time we’ve set the amount to be 0.01 ETH and the gas fee to be 50.000 (total TX of 0.001 ETH). The standard is a limit of 21000 and a gas price of 0.00000002 ETH = total of 0.00042 ETH. (It’s not a random number.)

The Ether tipping button

You can create your own button, but the button style that I use below is directly from the MetaMask Github repo:

Try and click it.

See what message it gives you.

If it says “you need to install MetaMask to use this” you can try installing MetaMask on your browser following this guide, if you want.

I'll break down the code used to get a button like that. Please keep in mind that you're free to use the code, as it doesn't belong to me. You don't need my permission to do so, but it'd be really nice if you could link to this post.

So, what's in the code?

A bit of HTML

<div class="tip-button" align="center"></div>
<!-- Metamask Script -->
<div class="message"></div>

A bit of CSS: insert button

.tip-button {
  width: 250px;
  height: 40px;
  margin: 10px;
  background-size: 100%;
  background-image: url('assets/images/3_pay_mm_off.png');
  cursor: pointer;
}

.tip-button:hover {
  background-image: url('assets/image/3_pay_mm_over.png');
}

.tip-button:active {
  background-image: url('assets/image/3_pay_mm_off.png');
}

On an HTML page, the above code goes between the style tags. Just adjust the width and height, depending on the image you're using, or else the image might now show up fully. Change the URL address for the button image to point to the image you want to use.

A bit of JavaScript

<!-- Metamask Script -->
<script>
var my_address = '0x9f5F4Cf8ed30F04f772B63d02CDB8a9D5732e8BC'
var tipButton = document.querySelector('.tip-button')

tipButton.addEventListener('click', function() {

  if (typeof web3 === 'undefined') {
    return renderMessage('<div align="center">You need to install <a href="https://metamask.io/"><u>MetaMask</u></a> to use this.</a></div>')
  }

  else if (typeof typeof web3 !== 'undefined') {
    // Request account access if needed
    ethereum.enable().then(function () {
      // Acccounts now exposed
      web3.eth.sendTransaction({
        to: my_address,
        from: web3.eth.accounts[0],
        value: web3.toWei('0.01', 'ether'), 
        gas: 50000,
      }, function (err, transactionHash) {
        if (err) return renderMessage('There was a problem!: ' + err.message)

        // If you get a transaction hash, you can assume it was sent,
        // or if you want to guarantee it was received, you can poll
        // for that transaction to be mined first.
        renderMessage('Thanks for the generosity!!')
      })
    });
  }

})

function renderMessage (message) {
  var messageEl = document.querySelector('.message')
  messageEl.innerHTML = message
}
</script>

How Does It All Work?

I’ve put one button on a widget for one of my blogger sites. All the CSS goes into the theme’s Edit HTML, while the HTML and JavaScript goes into the HTML/CSS widget area.

In order for this to work though you need to have:

  • A MetaMask wallet
  • MetaMask extension on your browser
  • A blog/site your audience can visit

Sometimes you’ll also get an error message that says “Not enough ETH to send”, it is because your account doesn’t have enough ETH to cover the cost of gas. If the gas money > amount of tip, the transaction will also be reverted.

The term gas money doesn’t actually refer to the units of gas for a vehicle. It specifies an amount you need to pay for the computation. The price of gas (in gwei) fluctuates daily, but all unused gas money is going to be refunded at the end of a transaction. If the transaction fails, however, you’ll use up all your gas money and receive nothing back.

A brief moment of horror.

Total cost of transaction or TX = Gas Limit * Gas Price

In our code, we’ve specified 50000 as the gas limit (written as just ‘gas’). It’s the maximum amount of gas money you are willing to spend for the transaction. A standard transaction in ETH will require 21000. So by Ethereum’s standard, if the transfer goes through, the remaining fund (50000 – 21000) will be returned to your wallet.

Our calculation is different when you’re sending tokens. The gas money can go anywhere between 50000 to 100000.

MetaMask on GitHub

This entire code has been made available on GitHub, so be sure to check out the repo at MetaMask/TipButton, kudos to MetaMask.

Of course there are ways we can make this code better, but that requires a bit of payment testing to get right.

Now, what do you say? Ready to collect Ether?


Tagged as: #ux #make #website