To watch the youtube video that demos the button and goes over the code, click here.
Introduction - Ethereum Donate Button Using Metamask
Often, content creators would like to receive donations or tips, but have a hard time finding appropriate platforms to get those donations from their viewers. In this tutorial, we'll look at how to create an Ethereum donate button for your website.
When clicked, the button will open Metamask and effectively ask the user whether they want to send some Ether (in this case 0.01 Ether (~$4) to the specified address.
Here's a demonstration. If you click the button, Metamask will open and ask if you want to send 0.01 Ether to my Ethereum Wallet. (You can always cancel the transaction, so go ahead and click it if you want.)
HTML Code For The Button
There are two simple elements we need to recreate the button: an image of a button, and a div to tell the user "you need metamask" if they don't have it. Put the following code in the body tag.
(Feel free to change the button image to your own custom one.)
A Bit of CSS
We'll use a bit of style so that the button moves a little when a user hovers over it. Add this code to your style tag.
Two things to note:
1. Change the Ethereum address on line 1 to your own Ethereum wallet's address.
2. On line 17, we set the tip amount to 0.01 Ether. Read further for why this matters.
The Total Code
Here's the full total HTML in case you don't want to assemble all of the parts yourself.
Making It Better: Let User Specify The Amount
One limitation of the current donation button is that you have to set the amount of Ether that you want the user to donate to you beforehand. Metamask opens, and it's either "send this amount of ether" or "don't". The button is currently hardcoded to send 0.01 Ether (~$4 dollars), but maybe someone wants to send 100 Ether, or 0.000001 Ether.
With this simple code, you can start collecting some Ether as donations/tips. Customize the button and code to suit your own needs.
Make sure to follow on the social media channels listed below, since I'll probably show how to make a Bitcoin donate button soon.
Disclaimer: As usual, always double check your code and be careful when playing with money.
Like this content and want more? Feel free to look around and find another blog post that interests you. You can also contact me through one of the various social media channels.