Blog

How to add Ethereum payments to your site with MetaMask

About a year ago I've uploaded a quick Ethereum and Metamask coding guide on YouTube:

Today, due to popular demand, I’d like to write a quick article on adding Ethereum payments to your website. This guide assumes that you are new to programming, and I’ll try to avoid referencing complex web dev frameworks like React… Knowing basic jQuery will suffice here.

Let’s get your set-up ready, step by step:

  1. Make sure you have Metamask installed.

  2. For development, switch to Ropsten or Kovan development network.

  3. Get some Ether in your account on a test network via https://faucet.metamask.io/

  4. Copy paste this code

  1. Serve your html file through a server. E.g. with https://www.npmjs.com/package/serve. If you’ll open your html file directly in the browser, Metamask won’t be injected (for security reasons).

This is what you get:

metamask.gif

At the core of this function is web3.eth.sendTransaction(). You can read more about it in Web3 Docs. I’d generally recommend reading the docs in and out, but i also understand that what 99% of people want is just a simple guide to making payments.

Please write down your questions in comments below — I’ll be answering them and improving this article too.

Happy coding!

Related Jobs

Read Next

How to invest in Web3?

Raman Shalupau • September 14, 2022 • 2 min read

How to Negotiate Your Crypto Salary

Raman Shalupau • September 13, 2022 • 6 min read

Here are 6 resources that will make you a React.js wiz!🧙‍♂️

Raman Shalupau • September 05, 2022 • 2 min read

64% of #crypto job posts require devs to master React.js… Here are 6 resources that will make you a React.js wiz!🧙‍♂️ But first, what is React.js?

Negotiating a Job Offer: Helping to Negotiate Salary and Benefits like a Pro

Erika Rykun • July 14, 2022 • 7 min read

Here’s why it’s worthwhile to use the winning strategies for salary negotiation and improve your negotiating skills:

How do I change my web browser's default email client for mailto links?

Raman Shalupau • April 06, 2022 • 1 min read

How to get started with an On-Chain Resume

Vignesh • March 30, 2022 • 6 min read

An on-chain resume is an essential first step to showing your talent in the Web3 space. Here's how you can get started with building an on-chain resume.