Ethereum tipjar/donation transactions for to your website.

This project is meant to provide a quick, relatively painless setup for creative types who would like to start accepting ETH donations/tips on their websites. You can preview how the script works (and donate!) with the functional version in the bottom right of this page. Essentially it just takes the guesswork out of writing the JavaScript which talks to the MetaMask API and your wallet. This is a work in progress — I plan on adding more features to make it even easier to empower creatives with tools to work with the Ethereum protocol, and support for more wallets.

getting started accepting eth transactions

You'll need a wallet to test (and receive!) the transactions. This project is currently only set up for the end user to send transactions to you using MetaMask, but you can use any Ethereum address/wallet you prefer to receive the transactions.

add web3.js

Add Web3.js to your website or project. The script you will be using below is dependent on the helper utilities included in Web3.js. I have included the CDN link for you in the next setup steps below, but if you would rather install it manually you can do so. Otherwise skip this step and use the CDN script included later. You can learn more about Web3.js by reading the docs here.

add etherwave.js

Add etherwave.js to your website or project. Grab it from here, then add your wallet address to the script in the next step.

add an empty div to your project with an ID of
etherwave-form-container

Add a container div for your form where you would like the static form to appear. Etherwave.js will automatically populate the form inside the element with the ID of
etherwave-form-container. If you are using the popup modal CSS you can place the etherwave form container div just before the script tags in the following step.

<div id="etherwave-form-container"></div>

use your wallet address when you call the script

Use this tool to add your receiving wallet address to the data-destinationWallet attribute of the script tag. Double, triple, quadruple check that this is the wallet address you want people to send ETH to. If you put the wrong address in here you won't receive anything!

<script src="your/path/to/web3.js"></script>
<script id="etherwave-script" src="your/path/to/etherwave.js" data-destinationWallet="xxx_YOUR_WALLET_ADDRESS_xxx"></script>

slap on some CSS to make it pretty

Choose either the static form, or the fixed position popup form CSS, and add it to your project.

If you are the designer type, or if you are going for a real web-of-the-90s unstyled look, just grab the selectors from the CSS below and have fun!

static form

A static form, which takes up 100% of the width of the container you place it in. Place it directly on your page, or use it to create your own modal.

popup modal form

A payment badge which opens a pop-up modal. I'm using a version of this on this page!

/* etherwave static form CSS */
  
  /* font from https://rsms.me/inter/ */
@import url("https://rsms.me/inter/inter.css");
html {
  font-family: "Inter", sans-serif;
}
@supports (font-variation-settings: normal) {
  html {
    font-family: "Inter var", sans-serif;
  }
}

/* styling format built on top of an original design by Rik Lomas
https://twitter.com/riklomas */

/* Edit your CSS variables here to change the values across the form */
:root {
  --etherwave-form-width: 100%;
  --etherwave-form-back: #fafafb;
  --etherwave-form-fore: #2b3946;
  --etherwave-form-border: #66666a;
}

/* mobile friendly layout */
@media (max-width: 640px) {
  :root {
    --etherwave-form-width: 100%;
  }
  #etherwave-form {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* for fading in the form */
@keyframes fadein {
  0% {
    visibility: hidden;
    opacity: 0;
    transform: translate(0, 24px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* Etherwave form styles */
#etherwave-form-container {
  position: relative;
}

#etherwave-form {
  max-width: var(--etherwave-form-width);
  background: var(--etherwave-form-back);
  color: var(--etherwave-form-fore);
  border: 1px solid var(--etherwave-form-border);
  border-radius: 3px;
  padding: 24px;
  padding-left: 25%;
  padding-right: 25%;
  display: grid;
  grid-gap: 16px 8px;
  grid-template-areas: "label label" "input eth" "button button";
  grid-template-columns: 1fr auto;
  align-items: center;
}

#etherwave-form label {
  grid-area: label;
  display: block;
  font-size: 16px;
}

#etherwave-form input {
  grid-area: input;
  appearance: none;
  width: 100%;
  padding: 8px;
  font-variation-settings: "wght" 600;
  text-align: right;
  background: var(--etherwave-form-back);
  color: var(--etherwave-form-fore);
  border: 1px solid var(--etherwave-form-border);
  transition: border-color 0.2s ease-in-out;
}

#etherwave-form input:focus {
  border: 1px solid var(--etherwave-form-fore);
  outline: none;
}

#etherwave-form span {
  grid-area: eth;
}

#etherwave-form button {
  grid-area: button;
  appearance: none;
  border: none;
  background: var(--etherwave-form-fore);
  color: var(--etherwave-form-back);
  font: inherit;
  padding: 8px;
  font-size: 16px;
  cursor: pointer;
}

.etherwave-branding,
.etherwave-branding a {
  font-size: 12px;
  color: var(--etherwave-form-fore);
}

/* Etherwave icon styles — replace the background-image to customize  */
#etherwave-icon {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background-image: url(wave.svg);
  background-repeat: no-repeat;
  background-size: cover;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Etherwave badge styles — the rotating text around the icon  */
#etherwave-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 76px;
  height: 76px;
  background-image: url(send-eth.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  animation: spin 20s linear infinite;
  pointer-events: none;
}

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

You're ready to go!

I highly recommend you give this a thorough testing with some fake ETH on a test network before you go live, and as with all things crypto — please do your research. Ultimately you are the only one who can be responsible for the outcome of your journey.

If you like this project, find success with your donations, or just want to support my work, you can do so with my Etherwave widget right here on this page (see what I did there?).

I hope you can use this tool to get compensated for your amazing work. You deserve it, and I know you're gonna make it!

ETH