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

And finally, some 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 a MetaMask pay 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's 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.

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

In our code, we’ve specified 50,000 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 21,000. So by Ethereum's standard, if the transfer goes through, the remaining fund (50,000 – 21,000) will be returned to your wallet.

The calculation is different when you're sending tokens, which are smart contracts built using the Ethereum blockchain. There are currently more than 400,000 tokens working their way on the Ethereum main network. The gas money for them can go anywhere between 50,000 to 100,000.

MetaMask on GitHub

This entire code has been made available on GitHub, so be sure to check out the repo at MetaMask/TipButton, where you can choose from more button variations.

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