• By Dappscape
  • 7 July, 2021

Building a simple paid dapp in 10 minutes

One of the best things about dapps is how simple payments and payment integrations are. Forget lengthy credit card forms, long pending payments, payment rejections, fraud and reversals. Ethereum can flow with just a click of a button.

In this tutorial we’ll build a super simple donate.dapp that sends Dappscape 0.0022 ETH by just clicking one link. Feel free to donate when testing the dapp :)

1. Building the dapp with HTML/Javascript

You can download the source of the donate.dapp from https://dappscape.com/blog/donate.dapp/index.html.txt (just rename the file from .txt to .html) or just copy&paste the code below.


2. Connecting to Ethereum

Dappscape automatically injects ethereum object, which can be accessed by Javascript for interactions with the Ethereum blockchain. The simple code below tries to connect to the ethereum object, and throws an error message if it can’t.

3. Calling Ethereum payment function

Ethereum transactions, from simple payments to sophisticated smart contract calls require “gas”. The more complex a transaction is, the more “gas” it consumes. Simple payments use just 21000 “gas”, and this is what we’ll use in the simple payment function.

In addition to “gas”, we need to provide the “gas price”, specified in Wei (The smallest unit of money on Ethereum. 1 Wei = 10−18 ETH). “Gas price” is something you specify yourself, it’s basically a bid on how much you are willing to pay to prioritize your transaction over other transactions. Ethereum places all transactions into a queue, then executes the one bidding the highest “gas price”. These are processed fastest, the rest “wait in the queue”. Transactions with very low “gas prices” can actually end up being never executed, as the “gas price” is too low.

Ethereum gas prices fluctuate a lot, last year we saw anything from 31 Gwei (Gwei is another subunit of ETH equal to 10−9 ETH) to 600 Gwei. When formatting a transaction, it’s very important to know the current gas prices. A good source is https://ethgasstation.info that provides the current prices as well as average transaction execution times directly from their website or their API.

Now, we can write a simple payment function:

That it! Your dapp has 2 functions: connect to Ethereum and execute payment. Once again, you can download the full working code here https://dappscape.com/blog/donate.dapp/index.html.txt (just rename the file from .txt to .html).

4. Running your dapp

Simply run Dappscape (download it here), click the round “D” logo at the left hand side of the Dappscape menu, choose “Open local Dapp”, then find the dapp directory and click on the “index.html” file.

If you want to publish the dapp on the network, you can find instruction in the “Building and publishing a ‘hello world’ dapp” blog article.