Designing a Payment Gateway for Online Merchants

A payment gateway is an integral tool in the kitty of any web developer designing an e-commerce solution. Payment gateways allow retailers to set up and scale businesses online. This chapter will guide you in building a payment gateway system and a payment ecosystem. The solution would enable users to accept payments on a blockchain network akin to the leading fiat payment networks of the day. This specific solution is built on the Ethereum platform and allows the merchant to accept ether as payment. It can easily be leveraged to accept an ERC20 token as payment as well for enterprise applications not implementing cryptocurrencies.

This chapter will cover the following topics:

• Defining our blockchain payment ecosystem
• Generating dynamic merchant addresses using HD wallets
• Creating an e-commerce website and payment gateway
• Creating...

Technical requirements

The code files of this chapter are available on the following link :

https://github.com/PacktPublishing/Blockchain-Development-for-Finance-Projects/tree/master/Chapter%203

We'll be using the following to develop our project:

• Ganache Private Blockchain Server: https://trufflesuite.com/ganache/
• MetaMask plugin for Chrome/Firefox/Safari: https://metamask.io/

For installing Ganache on Ubuntu, you might need to change some settings. Click on the drop-down menu next to the Ganache directory name. Select Preferences. Navigate to the Behavior tab. Under Executable Text Files, set the option to Ask what to do. Navigate back to the file downloaded from the Ganache download link. Right-click on the file and click on Properties. Select the Permissions tab. Select the Allow executing files as program option. Now, double-click on the file. The Ganache blockchain...

Defining our blockchain payment ecosystem

Payment flows on a blockchain network have numerous characteristics similar to conventional fiat payments. However, owing to the unique architecture of blockchain systems, several features make them distinct from conventional payment networks. Additionally, owing to their decentralized nature, blockchains permit you to design payment systems that eliminate middlemen and directly credit the merchant's blockchain wallet.

For our project, we'll be building a payment ecosystem that illustrates the preceding benefits. The payment ecosystem will consist of three major components:

• A faux e-commerce web page with an ether payment gateway, which allows payment from MetaMask or other Ethereum wallets
• A merchant HD wallet generator, which dynamically generates a new address for each payment request
• A merchant wallet interface that tracks...

Generating dynamic merchant addresses using HD wallets

To generate dynamic addresses, we'll be creating a Hierarchical Deterministic (HD) wallet system for the merchant. HD wallets create a hierarchical tree of public and private keys from a single master node. This allows the user to generate and control a suite of public and private keys from the same seed phrase. The HD wallet owner can easily port their suite of keys to another hardware by porting the seed phrase used to derive the public-private key tree.

All addresses are generated from a master seed. Each time a new key pair is generated, the seed is extended at the end by a counter value. This means that, theoretically, you can generate 2⁵¹² key pairs from the same seed phrase. To back up their wallet, the user needs to back up just the master seed phrase. They can also move their key pairs easily between hardware...

Creating an e-commerce website and payment gateway

Let's start by creating a React app that'll act as our e-commerce portal and payment gateway:

1. Create a new React app called gateway with the help of the following command:

npx create-react-app gateway

2. 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...

Creating an API for generating dynamic payment addresses

For creating dynamic wallet addresses on the fly for each payment request, we will be setting up an HD wallet for the merchant who is accepting payment for their products from the e-commerce gateway.

HD wallets allow us to create a set of hierarchical wallet addresses derived from the same mnemonic. If the merchant can safely preserve one mnemonic phrase, they can manage all of the addresses using the same string of words.

For providing dynamically generated, hierarchically linked addresses to our payment gateway, we'll be setting up a Node.js app with a get API service. The payment gateway can use this service to fetch a new address from the merchant's HD wallet:

1. Create a new Node.js project directory as shown in the following. Let's call this hdwallet.
2. Run the mkdir hdwallet command.

3. Run npm init to create...

Building the merchant HD wallet

The merchant wallet interface is a simple React app that tracks all of the addresses generated from the merchant's wallet mnemonic and checks whether any payment has been made to them from a customer. It also does block confirmation, that is, for each transaction, it checks whether 40 blocks have been transacted since the transaction was recorded in the blockchain.

The wallet interface app consists of the following components:

• Container.js: The Container component shown here holds the other components, toggles components display as per state changes, and passes down their props to the components after it receives them from app.js. It checks whether an account has been set in the state for retrieving transactions. If the account has been set, it renders the WalletTrans.js component; otherwise, it renders the WalletMain.js component:

render...

Running the payment ecosystem

Let's run our entire payment ecosystem:

1. We'll start by initializing a local Ganache instance, as shown here. This will serve as the test blockchain for the payment ecosystem:

2. Now, let's bring our components online. First, start the e-commerce portal and payment gateway app, navigate to the app directory, and enter npm start, as shown here:

By default, my React app runs on port 3000:

3. Now, open the browser and open the app home page on localhost:3000, as shown here:

You should be able to see the app running and the landing page.

4. Next, we run our Node.js server that extends the MAddress API service for address generation. Navigate to the app directory and run node MAddress.

You'll notice in the following screenshot that the app generates a mnemonic on the first run. Keep this handy. We'll need it for our merchant wallet...

Summary

So, we finally finished building our payment gateway and ecosystem. I really hope this project gives you insight into how blockchain apps work on the Ethereum mainnet with each other leveraging the shared ledger, especially in a financial scenario.

This ecosystem can easily be used in an enterprise environment as well. Replace ether with any ERC20-based asset token you need to work with, such as fiat currency, land, or commodities. You might also consider running this on Ropsten or a larger Ethereum test network after you build it on Ganache and compare it with how exchanges such as Coinbase or Binance or payment gateway services such as Bitpay or Coingate work.

We started this chapter by looking at what a payment ecosystem in a blockchain looks like and its components. We discussed HD wallets and block confirmations in blockchain payments. Then, we leveraged our knowledge...