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. Demo
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.
The Magical JavaScript
The magic part of our button is the javascript code, which triggers metamask to complete a transaction. (Credit to the metamask team for making all this code available on github.) Add the following code to a script tag and put it at the bottom of your HTML.
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.
The way to do that (by having the user specify the amount they wantw to donate before opening metamask for the transaction) would require some good javascript coding (or if your website is made using React or Angular or something). Conclusion
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.
Twitter: @srcmake Discord: srcmake#3644 Youtube: srcmake Twitch: www.twitch.tv/srcmake Github: srcmake
References
1. https://github.com/MetaMask/TipButton Comments are closed.
|
AuthorHi, I'm srcmake. I play video games and develop software. Pro-tip: Click the "DIRECTORY" button in the menu to find a list of blog posts.
License: All code and instructions are provided under the MIT License.
|