Enabling payments in cryptocurrency
Cryptocurrency is a new type of digital asset that is housed in a network in which it is distributed throughout a vast number of computers. As a result, it has a decentralized structure which enables them to thrive outside government and central authority control.
As the demand for trading grows, along with the facilitation of cross-border transactions, so does the acceptance and use of cryptocurrency.
The major economies that are stimulating the growing use of cryptocurrency include the emerging economies which include Brazil, China, and India. For the developed countries, Japan, Germany, and the US lead the way in the growth of cryptocurrency use.
So why not enable payments in cryptocurrency in e-commerce websites?
In this article, we will be exploring various blockchain technologies and writing code to create our own e-commerce website to buy e-books/movies which will accept payments in ERC-20 tokens.
The entire project consists of 3 parts, the smart contracts, frontend, and backend. We will use Solidity to code our smart contracts with Truffle framework and the project will be deployed on Ganache local blockchain , Reactjs for the frontend, and Node.js for the backend with MongoDB as the database.
— Building smart contracts
A smart contract is simply a program that runs on the Ethereum blockchain. It’s a collection of code and data that resides at a specific address on the Ethereum blockchain. Smart contracts are a type of Ethereum account. This means they have a balance and they can send transactions over the network.
We will use ERC 20 tokens here. ERC 20 tokens are assets that live on the ethereum blockchain. For each ERC 20 token we have a smart contract that manages token transfer and a ledger of who owns how many tokens. Although a big problem with ERC 20 tokens is that their value fluctuates a lot. So if we accept any ERC 20 tokens we will be supposed to sell the tokens right away, so that we aren’t exposed to the price fluctuations, which will make things very complicated. So instead, we are accepting only a specific kind of ERC 20 tokens called Stablecoin. Stablecoins are tokens whose value always stay the same. Now there are different Stablecoin variables like DAI, USDC,USDT etc. Here we used DAI because it’s the most popular Stablecoin and its the most decentralized Stablecoin of all.
For designing and coding the smart contracts in our application we will use Solidity, OpenZeppelin and Truffle. OpenZepplin being a library for solidity smart contracts.
We will be building 2 smart contracts for this project, “Dai.sol”, and “PaymentProcessor.sol”
The first step is to install Truffle and initiate a project in truffle. It can be simply done using the commads: “npm install truffle” and then “truffle init”.
Next we need to initiate an npm project to manage our dependencies. Using the command “npm init -y” will do the work for us.
Next we will install OpenZeppilin using “npm install @openzeppelin/contracts”.
So now with everything installed and initialized, lets start coding our smart contracts!
- PaymentProcessor.sol
PaymentProcessor.sol is the smart contract which has functions defined such as Pay() which is triggered each time we make a payment, which takes in two arguments that is the amount of DAI tokens transferred and the paymentID. It listens to the payment events sent by the backend, which further saves the payment events in our Database, and delivers the item link to the frontend.
- Dai.sol
The Dai.sol smart contract approves the transaction done by PaymentProcessor.sol. DAI token is already deployed on the Ethereum mainNet, but the reason why we still need to create a smart contract for DAI is becaause we want to be able to use public testnet and local development blockchain in order to develop our system. Thus, for that we need to deploy our own version of DAI token.
Next we need to code a migration file to tell truffle how to deploy our smart contracts.
- 2_deploy_contracts.js
Here we use web3, which is a Javascript library that is used to interact with the ethereum blockchain, and its automatically injected in our deployment script by the truffle framework. In addition to that we use a utility function to specify how many tokens we want to send. We did not deploy Dai,sol here since it is already deployed on the mainNet and public testnet.
Now, its time to deploy all this to our local blockchain!
We need to type the command “truffle develop” in the root of our project.
Thus, we have launched Ganache, a local development blockchain that is already installed with truffle. We get 10 addresses generated by ganache with their private keys. For each of these addresses we have 100 ether (which are obviously fake :)) and also, we get a console we can use to interact with our local blockchain. So now we need to type the command “migrate --reset” in this console.
Great! Our deployment was successful. We can clearly see the deployment of our DAI token, and PaymentProcessor with their respective addresses. Hence we are done with the smart contracts and their deployment.
Now, a problem arises, that React cannot access/import anything which is outside the src folder of the react-app. So we will need to change the location where truffle stores PaymentProcessor in JSON format.
For that, we will open the truffle-config.js file in our root folder and specify the new configuration by writing:
“contracts_build_directory: ‘./frontend/src/contracts’,”
Now we will need to re-deploy our contracts so that the JSON artifacts can be stored in the proper location, using the same command : migrate --reset , in the ganache console. Hence we get a contracts folder in src directory consisting of all the required JSON files.
We need to write code to configure connection of our React app with the blockchain, so we will create a file “ethereum.js” inside the src directory of our React-app.
- ethereum.js
The function getBlockchain() establishes a connection with ethereum. It returns a promise. We will wait till all the elements in the window have loaded in the browser, including the Javascript and Metamask, thus used “window.addEventListener” with “load” parameter. If metamask is present then its going to inject an object called “ethereum” in the window. Thus the user receives a pop up asking them to grant permission of metamask for this application. Next we create a provider with ether, establishing connection with the blockchain. The provider is of type “Web3Provider”. Thus we will be able to send transactions after an object is instantiated which can interact with our PaymentProcessor smart contract. We then do the same thing with Dai.
In this article, I have mentioned the parts where a significant use of blockchain technologies is used. The rest of frontend and backend code can be accessed through the link given below :)
The entire source code to this project can be accessed on my github:
You can clone it and run “npm install” by navigating to the frontend and backend folders respectively, to install all the dependencies which are needed to run the project.
Install metamask chrome extension, which is a software cryptocurrency wallet used to interact with the Ethereum blockchain. It allows users to access their Ethereum wallet through a browser extension or mobile app, which can then be used to interact with decentralized applications. While logging into metamask, you must enter the seed-phrase mnemonic we got after running truffle develop.
With our local blockchain running, you need to open 2 more terminals, navigate to the frontend and backend folders respectively, and type the commands “npm start” in the frontend terminal, and “node server.js” in the backend terminal.
Soon your browser will open localhost:3000, and there it is! Our website is running and you can try buying items from the catalogue ✌🏼
Final product screenshots
