DEV Community: Brix Mavu

Getting Started with Hyperswitch, Nodejs, and Express for Payment Processing

Brix Mavu — Fri, 11 Oct 2024 19:52:44 +0000

Introduction

Welcome to this step-by-step tutorial on using the Hyperswitch API with Express and Node.js! In this first part, we'll walk you through creating a basic app using Node.js and Express. Later, in part two, we’ll integrate multiple payment gateways with the help of Hyperswitch.

Why Hyperswitch?

Hyperswitch allows you to connect to various payment processors and payment methods, making it easier to manage transactions. Meanwhile, Node.js enables you to run JavaScript on the server side, and Express simplifies the process of building web applications and APIs.

Requirements

Before we start, make sure you have the following:

Node.js installed on your system
Hyperswitch API keys
A text editor (I’ll be using Vim on Termux, but feel free to use your favorite editor like VS Code)

Step 1: Create a "Hello World" Application

Open your terminal.
Create a new folder for the project:
```
mkdir hyperswitch
```
Navigate to the folder:
```
cd hyperswitch
```
Initialize a Node.js project by running:
```
npm init -y
```
This will generate a package.json file that manages your project’s dependencies and configurations.

Create a server file.
You can create it using your text editor’s UI or in the terminal:

touch app.js

Since I’m using Vim, I’ll run:

vim app.js

and paste the "Hello World" code from the Express documentation:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
res.send('Hello World!');
});

app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});

Save and exit the editor (in Vim, this would be :wq).
Install Express by running:
```
npm i express
```
Run the app and open your browser at http://localhost:3000/. You should see "Hello World!" displayed.

Step 2: Connecting to Hyperswitch

Now that you have a basic app running, let’s connect it to Hyperswitch.

Sign up for Hyperswitch.
For a smoother experience, it’s best to complete the sign-up process on a desktop or laptop.
Get your API key from the settings. This key will allow your app to interact with the Hyperswitch API.

Note: For this tutorial, we’ll paste the API key directly into our code. However, this is not recommended for production environments. We’ll cover a more secure method later.

Update your code to create a customer through Hyperswitch. Replace the previous code in app.js with the following:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => 
{
/* Fetching the API key from 
Hyperswitch to create a 
customer */
  const options = {
  method: 'POST',
  headers: {
  'api-key': '<api-key>', 
  'Content-Type': 'application/json'
},
body: JSON.stringify({
  email: 'guest@example.com',
  name: 'John Doe'
})
}; 
fetch('https://sandbox.hyperswitch.io/customers', options)
.then(response => response.json())
.then(response => console.log(response))
.catch(err => console.error(err));
res.send('Customer creation initiated.');
});

app.listen(port, () => {
console.log(`App listening on port ${port}`);
});

Insert your API key by replacing with the actual key from Hyperswitch:

headers: { 'api-key': 'snd_xxxxxxxxxxxxx', 'Content-Type': 'application/json' }

Save the changes to app.js and run the server:
```
node app.js
```
Refresh your browser and check the terminal. You should see your first customer entry logged!

That’s it for part one! Now you’ve created a basic Express app and connected it to Hyperswitch to create customers. In the next part, we’ll dive deeper into handling payments and managing multiple gateways.

Stay tuned!

Setting Up Termux and Node.js on Android for Web Development

Brix Mavu — Fri, 22 Jul 2022 20:35:27 +0000

Want to start web development on your Android phone? This guide will show you how to use Termux and Node.js to set up a web development environment and create your first project.

Step 1: Install Termux and Node.js

Download Termux
Termux is a powerful terminal emulator for Android. Download it from F-Droid, and make sure to get the latest APK file from the bottom of the page.
Update Termux
Open the Termux app and run the following commands to update the package list:
```
$ pkg update && pkg upgrade
```
Install Git
Git is essential for version control. Install it by running:
```
$ pkg install git
```
Install Vim
Vim is a popular text editor for developers. Install it by running:
```
$ pkg install vim
```
Install Node.js
Node.js is a JavaScript runtime that allows you to run JavaScript outside the browser. In this tutorial, we will use Node.js to run http-server , a simple tool to serve your web projects locally. To install Node.js, run the following command:
```
$ pkg install nodejs
```

Step 2: Start Your First Project

Set Up Storage Access
To access your phone’s internal storage in Termux, run:
```
$ termux-setup-storage
```
Navigate to the Internal Storage
After running the above command, you can navigate to the storage directory by typing:
```
$ cd storage/shared
```
Create a Project Folder
Create a new directory for your project:
```
$ mkdir project
$ cd project
```
Create Your First Files
Now, create the HTML and CSS files for your project:
```
$ touch index.html style.css
```

Step 3: Writing Your First HTML Page in Vim

Open the HTML File in Vim
Use Vim to open and edit your index.html file:
```
$ vim index.html
```

Add Boilerplate HTML Code
Copy and paste the following code into index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Website</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>

<script src="./script.js"></script>
</body>
</html>

Add Some Basic Styling
Next, open the style.css file and paste this CSS code to style your HTML elements:
```
h1 {
color: red;
}

p {
color: blue;
}
```

Step 4: Serve Your Project Locally

Install HTTP Server
To preview your project, you need to use a lightweight web server. You can run one easily using npx:
```
$ cd storage/shared/project
$ npx http-server
```
Access Your Website
After running the command, Termux will display a local address (e.g., http://127.0.0.1:8080). Open Chrome or any web browser and paste the address into the URL bar to see your website in action.

You’ve successfully set up your Android phone for web development and created your first project! You can now experiment and build more complex websites using this setup.

Day 5

Brix Mavu — Mon, 04 Apr 2022 21:45:41 +0000

Make use of templating engine - I will use Handlebars

Introduce a generated base for quick development - express-generator

Reason for express generator we can't always built things from scratch the plan is to start from a base.

In terminal run

npx express-generator --view=hbs --git day5

cd day5

npm i

If problems arise just run:

npm audit --force

Start server

npm start

You can check the command in package.json

When server is running open browser and open :

localhost:3000

From day4 prject copy authenticate folder and files inside public folder

style.css will be replace the one in /public/stylesheets

script.js goes inside /public/javascripts

add script tag inside /views/layouts.hbs file

Inside /views/index.hbs file add html forms from day4/index.html

Inside /views/index.hbs login form tag change action tag must be action="users/login"

Day 4

Brix Mavu — Mon, 04 Apr 2022 06:19:00 +0000

The idea is to make a simple login with express

copy day3 folder into day4 folder

moving just contents from one folder into next folder in same root folder in terminal

cp -r folder1/* folder2

create folder authenticate

mkdir authenticate

Inside authenticate folder create new file login.js

touch login.js

Paste this code

const login = function (user,password) {
    if(user==="brix" && password==="brix"){
        return true;
    }
    else{
        return false;
    }

}

module.exports = login

Edit

You have to add the two lines below to start working with json in express
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.js should look more like this

const express = require('express')
const path = require('path')
const login = require('./authenticate/login')

const app = express()
const port = 3000

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')))

app.get('/',(req,res) => {
  res.sendFile(path.join(__dirname,'public/index.html'));
})

app.post('/login', function (req, res, next) {
    const user = req.body.username
    const pass = req.body.password
    let loginResult = login(user,pass)

    if(loginResult) {
      //show main content
      res.send('Hello World Again!')
    }else{
      //show error 
    }

})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

Day 3

Brix Mavu — Sun, 03 Apr 2022 11:08:29 +0000

Requirements

NodeJS installed

To do

Inside Workspace folder create folder day 3

mkdir day3

Enter day3 folder

cd day3

Running Express

Run commands inside terminal to install express

npm init -y

npm i express

touch app.js

copy and paste Hello World Example
inside app.js file

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

Inside your terminal type

node app.js

In browser go localhost:3000

Static Files e.g. html, CSS and JavaScript

Inside day3 folder - create new folder - public

mkdir public

Inside public paste project files from day 2.

Files

index.html

style.css

script.js

Inside app.js remove

app.get('/', (req, res) => {
  res.send('Hello World!')
})

and add

const path = require('path')
app.use('/', express.static(path.join(__dirname, 'public')))

Learn more about express.static

The code should look more like this

const express = require('express')
const path = require('path')

const app = express()
const port = 3000

app.use('/', express.static(path.join(__dirname, 'public')))

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

Check again localhost:3000

Day 2

Brix Mavu — Fri, 01 Apr 2022 06:03:25 +0000

I will use Scrimba please check out the platform if you want to learn programing interactively.

Biggest reason of using scrimba is it make playing with code easy.

Check the banner to see coding in action

Day 2 code on Scrimba Code

The Plan

Copy code from day 1

Make login and registration toggle using js

Link *.js page to the index.html file

<script src="./*.js"></script>

Inside *.js file create two functions next() and prev()

The idea is to toggle between login interface and registration interface

By default we see login interface when click event is clicked we see registration interface

Just changing CSS propeties via JavaScript

Currently in style.css
#registration{
   display: none
}
JavaScript will dynamically add css style to #login and #registration
#login{
   display: none
}

#registration{
   display: block
}
The inverse happens when click event is clicked again

JavaScript code to achieve that

function next() {
   document.getElementById('login').style.display = "none";
   document.getElementById('registration').style.display = "block";
}
function prev() {
   document.getElementById('registration').style.display = "none";
   document.getElementById('login').style.display = "block";
}

In index.html we setup for the click event on the event on a new user

anchor tag inside Login form add onclick="next()"

You don't have an account yet? Register Here

anchor tag inside Registration form add onclick="next()"

You have an account already? Login Here

Day 1

Brix Mavu — Thu, 31 Mar 2022 16:18:41 +0000

Create Login and Registration page

Souce code can be found on github

Technologies used

Bash - HTML - CSS - JavaScript

Create a project folder

mkdir project

Enter project folder

cd project

Create project files

touch index.html style.css script.js

From code editor explorer open index.html

Inside index.html file paste Sticky Footer code from mdn github repo

Rearrange code

Add new heading :

100 days of code

Add copyright to footer

© 2022

Add login and registration forms inside index.html file forms

I have added a video check the banner which is audio-less it's due to the fact it got heavy on my PC. I'm using the xbox game bar app on Windows. The focus is to show how I went about my solution in 8 minutes Day 1. Session 1. YouTube

100 Days of Code

Brix Mavu — Thu, 31 Mar 2022 11:48:07 +0000

Please join me on my journey of writing code for 100 days.

As this is to motivate me or someone out there, I will try my best to write simple code.

These are not tutorials, it just my comeback in writing code and showing off 😂 😂 😂 .

Simplicity is the ultimate sophistication. ― Leonardo da Vinci

All the code will be available on github

DEV Community: Brix Mavu

Getting Started with Hyperswitch, Nodejs, and Express for Payment Processing

Introduction

Requirements

Step 1: Create a "Hello World" Application

Step 2: Connecting to Hyperswitch

Setting Up Termux and Node.js on Android for Web Development

Step 1: Install Termux and Node.js

Step 2: Start Your First Project

Step 3: Writing Your First HTML Page in Vim

Step 4: Serve Your Project Locally

Day 5

Day 4

Edit

Day 3

Requirements

To do

Running Express

Static Files e.g. html, CSS and JavaScript

Day 2

The Plan

JavaScript code to achieve that

Day 1

Create Login and Registration page

Technologies used

100 Days of Code

Countdown