Develop your first decentralized e-commerce application with Python Flask and MetaMask
Tags: decentralizedfinance, defi, metamask, dapps
Published: 2021-08-18 12:10:53

---
title: Develop your first decentralized e-commerce application with Python Flask and MetaMask
published: true
date: 2021-08-02 12:32:24 UTC
tags: decentralizedfinance,defi,metamask,dapps
canonical_url: https://itnext.io/develop-your-first-decentralized-e-commerce-application-with-python-flask-and-metamask-96d9344e415d
---

![](https://cdn-images-1.medium.com/max/640/0*H21zQGeXIpuhCtNL.png)

In the previous [post](http://blog.adnansiddiqi.me/build-your-first-solidity-dapp-with-web3-js-and-metamask/), I had discussed how you can use MetaMask and Web3.js library for creating the frontends of your blockchain apps. In this post, I am going a step further and will discuss how you can create a decentralized e-commerce website by using Python Flask as a backend and MetaMask libraries for accepting ETH on your website. Our typical demo website will look like the below:

![](https://cdn-images-1.medium.com/max/634/1*Hjw2sz517NI9tSXuhNo2qg.gif)<figcaption>dAppCommerce in Action</figcaption>

Besides telling you about how an existing backend application can start accepting Ethereum and other ERC20 tokens, **_the point I want to make is that you do not always need a smart contract or a web3.js library to make your app a decentralized app( as per the current definition of dApp)._**

The web app I have made is using **_Flask 2_** libraries and Sqlite3 for DB purposes.

I am not going to teach how a Flask App is developed, you may check other tutorials. I am going to discuss how you can integrate your web app with an Ethereum node(in this case Ganache) via MetaMask and start accepting tokens on your website.

When you open the main page, it asks you to connect your wallet. Once connected you will see your wallet is connected to the website.

![](https://cdn-images-1.medium.com/max/1024/0*BM72E0FzBR2Z8J_j.png)

$(document).ready() function contains the code of detecting MetaMask and registering _click_ event of the _Buy_ Button. In the HTML I am using data attributes, data- to pass the required information.

![](https://cdn-images-1.medium.com/max/1024/0*1wsEr-mZChzmxNZ2.png)

In Javascript, I am fetching these values on the _click_ event via JQuery.

![](https://cdn-images-1.medium.com/max/912/0*C8XnFfFcLXC7SWlP.png)

Next, I am using [etjs-unit](https://www.jsdelivr.com/package/npm/ethjs-unit) library to convert _Eth_ to _Wei._

![](https://cdn-images-1.medium.com/max/1024/0*zzSlhY2MRZazXP__.png)

First I used ethUnit.toWei to convert a unit ether to Wei which is 10^18. Later I am converting it into Hex. I am doing it because the _MetaMask_ transaction function needs all data in Hex. I am also generating an Invoice ID and passing that information with each transaction. It is very important as it will help you during the auditing.

Next, I am constructing a constant _dict_ object that contains all information related to the transaction:

![](https://cdn-images-1.medium.com/max/1024/0*ksco4hf-vE_y17Kq.png)

I have taken the code from the MetaMask [documentation](https://docs.metamask.io/guide/sending-transactions.html). You can set most of the parameters, some are available in the MetaMask interface and editable, for instance, the _gas_ amount.

![](https://cdn-images-1.medium.com/max/1024/0*Jcagit0Xj1-hj2fB.png)

The promise above actually invokes the MetaMask interface. If you make a transaction then information like transaction hash is available for you.

![](https://cdn-images-1.medium.com/max/589/0*xUYAmolJqMQ8kU9q.png)

The above screen was constructed due to the parameters you had set in the variable above.

![](https://cdn-images-1.medium.com/max/698/0*LpZgppb1sYd02XHz.png)

The data parameter I set, in this case, invoice ID, is also stored here. When a transaction is successfully made, it is recorded in the blockchain, in this case, Ganache contains all the data( _Note: the data you see below is from the previous transaction_).

![](https://cdn-images-1.medium.com/max/1024/0*qh2xP_uU4Cggy4ke.png)

You can see Tx Hash, ETH Amount, Gash price and consumption, and TX Data, all information is given here. The amount from the customer wallet was transferred to the merchant wallet address. The customer can see all this information in the _Order History_.

![](https://cdn-images-1.medium.com/max/1024/0*ZUUWjf75glbZcEmC.png)

### Conclusion

As you can see, it is pretty straightforward to integrate Ethereum blockchain in your web e-commerce website and starts accepting payments. The code is available on [Github](https://github.com/kadnan/PythonFlaskDecentralizedEcommerce).

_Originally published at_ [_http://blog.adnansiddiqi.me_](http://blog.adnansiddiqi.me/develop-your-first-decentralized-ecommerce-application-with-python-flask-and-metamask/) _on August 2, 2021._

* * *