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.

<html> <script> async function donate() { try { window.web3 = new Web3(ethereum); // Dappscape injects ethereum object automatically const accounts = await ethereum.enable(); // Tries to enable ethereum var account = accounts[0]; // account variable now holds currently active in the ETH wallet ETH address } catch (e) { alert("Browser not supported. Please use a dapp browser, such as Dappscape."); } try { var value_wei = 2200000000000000; // equals to 0.0022 ETH var value_wei_hex = '0x' + value_wei.toString(16); // Transactions use hex values, so we convert to hex var gas_price_wei = 20000000000; // equals to 20 gwei. https://ethgasstation.info/ for current gas prices var gas_price_wei_hex = '0x' + gas_price_wei.toString(16); // gas price in hex var gas = 21000; // the max amount of gas that a transaction requires. Simple payment is 21000 var gas_hex = '0x' + gas.toString(16); // again, convert that to hex const transactionHash = await ethereum.request({ method: 'eth_sendTransaction', params: [ { from: account, to: '0xc167bE6e37955EecAd2BD9E1B2036b6c3A92E90b', // Dappscape's ETH address value: value_wei_hex, gas: gas_hex, gasPrice: gas_price_wei_hex, }, ], }) .then((result) => { // The result varies by RPC method. // For example, this method will return a transaction hash hexadecimal string on success. alert("Success, transaction hash: " + result); }); } catch (error) { console.log(error); sendErr(error); } } </script> <body> <h1><a href="javascript:donate();">Donate Dappscape 0.0022 ETH</a></h1> </body> </html>

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.

try { window.web3 = new Web3(ethereum); // Dappscape injects ethereum object automatically const accounts = await ethereum.enable(); // Tries to enable ethereum var account = accounts[0]; // account variable now holds currently active in the ETH wallet ETH address } catch (e) { alert("Browser not supported. Please use a dapp browser, such as Dappscape."); }

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:

try { var value_wei = 2200000000000000; // equals to 0.0022 ETH var value_wei_hex = '0x' + value_wei.toString(16); // Transactions use hex values, so we convert to hex var gas_price_wei = 20000000000; // equals to 20 gwei. https://ethgasstation.info/ for current gas prices var gas_price_wei_hex = '0x' + gas_price_wei.toString(16); // gas price in hex var gas = 21000; // the max amount of gas that a transaction requires. Simple payment is 21000 var gas_hex = '0x' + gas.toString(16); // again, convert that to hex const transactionHash = await ethereum.request({ method: 'eth_sendTransaction', params: [ { from: account, to: '0xc167bE6e37955EecAd2BD9E1B2036b6c3A92E90b', // Dappscape's ETH address value: value_wei_hex, gas: gas_hex, gasPrice: gas_price_wei_hex, }, ], }) .then((result) => { // The result varies by RPC method. // For example, this method will return a transaction hash hexadecimal string on success. alert("Success, transaction hash: " + result); }); } catch (error) { console.log(error); sendErr(error); }

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.

Dapp Developers Hub

Building a simple paid dapp in 10 minutes

1. Building the dapp with HTML/Javascript

2. Connecting to Ethereum

3. Calling Ethereum payment function

4. Running your dapp

Building and publishing a "hello world" dapp