Let's start by creating a React app that'll act as our e-commerce portal and payment gateway:
- Create a new React app called gateway with the help of the following command:
npx create-react-app gateway
- Open package.json within the app, and add the following dependencies:
{
"name": "gateway",
"version": "1.0.0",
"private": false,
"dependencies": {
"bulma-start": "0.0.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"typescript": "^3.4.0",
"web3": "^1.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}
- Run the npm install command to install the dependencies.
We'll be building an e-commerce page for selling shoes online called Sindbad Commerce. On running the app, the user lands on a default page where they can choose to buy from a selection of five products. On clicking on the Buy Now button, they are redirected to a payments page where they can pay using the MetaMask wallet or any other wallet.
Next, we'll be focusing on the components of the gateway. Our app will contain the following components:
- Container.js: The Container component holds several other components, toggles components, display as per state changes, and passes down their props to the components after it receives them from app.js.
- Nav.js: This renders a navigation bar for the e-commerce page.
- Description.js: This renders a single-line description for the page.
- Shoerack.js: The Shoerack.js app component lists all of the shoes. It renders the e-commerce page for viewing and buying the shoes. On clicking the Buy Now button, the customer is redirected to the payment page.
- Payment.js: Payment.js renders a payment page. It dynamically fetches a new Ethereum address for payment using an API from the merchant wallet. It also sets the number of ether to be transferred for a successful payment. The user can pay using the MetaMask wallet or any other wallet.
- PVerification.js: This component is rendered when the user selects Other Wallets. It renders a tracking page that gives the user a 15-minute window to transfer to the merchant's address.
- Timer.js: The Timer component renders a 15 minutes timer and checks whether the complete amount has been transferred to the merchant's wallet at an interval of 10 seconds.
Additionally, we'll define an array constant called Shoes.js, which will dynamically list details about all of the items on sale.
We'll be looking at the important components in this section. Some understanding of how to build React apps is assumed for the next few steps. If you want to focus on just the blockchain part, you can download the entire app at the GitHub repository location, at https://github.com/PacktPublishing/Blockchain-Development-for-Finance-Projects/tree/master/Chapter%203/gateway and directly move on to the next steps.