Ethereum dapp example: a simple payment app in 15 minutes

The following dapp is available at https://dappscape.com/dapps/0x1ce5f28153364e8a6ae892868d733101ff1af354/simplepay.dapp, or simply typing simplepay.dapp in Dappscape. It has just a few lines of code and allows sending money to any Ethereum address. The dapp uses real time ETH/USD rate to convert USD to ETH and send the right amount. It also automatically adjusts to the current ETH network transaction costs.

You can download the source of the simplepay.dapp at https://dappscape.com/blog/simplepay.dapp/index.html.txt. Feel free to download the file, rename it to index.html, then open with Dappscape (“D” button at the very left of the toolbar > Open local Dapp > select the folder where you placed the downloaded index.html).

1. HTML payment form

First, we'll build a payment form:

2. Adding Javascript to process the payment

Second, we'll add a JavaScript code to process the payment. It has only one pay_to() function.

try {
            // First, we need to convert USD amount to ETH. 
            const eth_usd_rate =
                await ethereum.request({
                    method: 'eth_getPrice'
                });

// Second, we check the current average Gas prices, in Gwei
            const gas_prices =
                await ethereum.request({
                    method: 'eth_getGasPrices'
                });

var value_eth = document.getElementById("amount_usd").value / eth_usd_rate;
            var pay_to = document.getElementById("pay_to").value;

var value_wei = Math.round(value_eth * 10e17); // converting ETH to WEI, round it to a whole number           
            var value_wei_hex = '0x' + value_wei.toString(16); // transactions use hex values, so we convert to hex

var gas_price_wei = Math.round(gas_prices.fast * 10e8); // taking the current gas price for a fast transaction (possible values: slow, standard, fast, fastest)

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: pay_to,
                        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>

Please note two Dappscape’s built-in functions used:

const eth_usd_rate = await ethereum.request({method: 'eth_getPrice'});

This line gets real time ETH/USD rate, to convert the USD amount to ETH, as only ETH can be transferred over Ethereum blockchain. and

const gas_prices = await ethereum.request({method: 'eth_getGasPrices'});

This line gets the current Gas prices for transfers and other Ethereum blockchain transactions. You can find more information on Gas here, but in this tutorial we’ll just use gas_prices.fast value (which very approximately will give a 5 minute transaction). At the time of writing, it returns 165 Gwei.

That’s it, our simple payment dapp is ready!

If you want to publish the dapp so anybody can download and use it, please refer to Building and publishing a "hello world" dapp”.

13 May, 2021

Dapp Developers Hub

Ethereum dapp example: a simple payment app in 15 minutes

1. HTML payment form

2. Adding Javascript to process the payment

Building and publishing a "hello world" dapp