In today’s digital economy, seamless and secure payment integration is a must-have for any modern web application. SeerBit, a leading African fintech company, offers powerful APIs that enable businesses to accept payments with ease.
This article will guide you step-by-step on how to integrate SeerBit's payment solution into a ReactJS + NodeJS full-stack application.
By the end of this guide, you’ll have working knowledge of:
- Setting up SeerBit API credentials
- Creating a payment interface with ReactJS
- Handling transactions securely using NodeJS
- Best practices for production-ready integration
Whether you're building an eCommerce site, SaaS product, or mobile wallet, this tutorial gives you a powerful and flexible foundation for collecting payments via SeerBit.
Prerequisites
Before we start, ensure you have the following:
- Node.js and npm installed
- Basic knowledge of React and Node
- A SeerBit account (sign up at seerbit.com)
- API Keys from your SeerBit dashboard
- Postman (optional, for testing APIs)
Project Setup
1. Initialize the Backend (NodeJS)
mkdir seerbit-payment-backend
cd seerbit-payment-backend
npm init -y
npm install express cors dotenv axios
Create a basic server.js:
// server.js
const express = require("express");
const cors = require("cors");
const dotenv = require("dotenv");
const axios = require("axios");
dotenv.config();
const app = express();
app.use(cors());
app.use(express.json());
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
2. Create the Frontend (ReactJS)
npx create-react-app seerbit-payment-frontend
cd seerbit-payment-frontend
npm install axios
Step 1: Get Your SeerBit API Keys
- Log in to SeerBit Dashboard.
- Navigate to API Keys (usually under Settings → API Keys).
- Copy your Public Key and Secret Key
Create a .env file in your backend folder:
SEERBIT_SECRET_KEY=your_secret_key_here
SEERBIT_PUBLIC_KEY=your_public_key_here
SEERBIT_BEARER_TOKEN=generate_the_token_with_secret_key_&_pub_key
Generating the Bearer Token
To integrate SeerBit's payment services into your Node.js application, you'll need to generate a bearer token for API authentication.
SeerBit requires an encrypted key, derived from your secret and public keys, to authenticate API requests.
Follow these steps to generate the bearer token:
- Public Key: Obtain this from your SeerBit merchant dashboard.
- Secret Key: Also available on your merchant dashboard.
-
Concatenate and Encrypt Keys: Combine your secret and public keys into a single string, separated by a period
(.) - Encryption: Send this concatenated string to SeerBit's encryption endpoint to receive an encrypted key.
Request the Encrypted Key:
Endpoint: POST https://seerbitapi.com/api/v2/encrypt/keys
Headers: Set Content-Type to application/json.
Body: Include the concatenated key in the following JSON format:
{
"key": "SECRET_KEY.PUBLIC_KEY"
}
Step 2: Create Payment Route in NodeJS
Add the following to server.js or create a new file paymentRoutes.js:
const express = require("express");
const cors = require("cors");
const dotenv = require("dotenv");
const { Client, Config, StandardCheckout } = require("seerbit-nodejs");
const { PUBLIC_KEY, SECRET_KEY, BEARER_TOKEN } = require("./config");
// Load environment variables
dotenv.config();
const app = express();
app.use(cors({ origin: "http://localhost:3000", credentials: true }));
app.use(express.json());
// Create SeerBit client
const sdkConfig = new Config({
publicKey: PUBLIC_KEY,
secretKey: SECRET_KEY,
bearerToken: BEARER_TOKEN,
});
const seerbit = new Client(sdkConfig);
// Payment endpoint
app.post("/api/payment", async (req, res) => {
try {
const checkout = new StandardCheckout(seerbit);
const { email, amount, fullName, mobile_no, description } = req.body;
// Create payment
const payload = {
amount,
currency: "NGN",
country: "NG",
email,
fullName,
mobile_no,
description,
paymentReference: `ref-${Date.now()}`,
callbackUrl: "http://localhost:3000/payment-success",
};
const response = await checkout.Initialize(payload);
console.log("SeerBit SDK response:", response);
const payLink = response.data.payments.redirectLink;
console.log("Payment Link Only Returned:", payLink);
return res.status(201).json({ payLink });
} catch (error) {
console.error("SeerBit SDK error:", error);
return res.status(error.status || 500).json({ error: error.message });
}
});
// Start server
const PORT = process.env.PORT || 9000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
Click this link to learn how to integrate SeerBit Payments using Node.js
Step 3: Create the Payment Interface in ReactJS
Edit App.js:
import React, { useState, useEffect } from "react";
import axios from "axios";
function App() {
const [form, setForm] = useState({
fullName: "",
email: "",
amount: "",
mobile_no: "",
description: "",
});
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const handleChange = (e) => {
setForm({ ...form, [e.target.name]: e.target.value });
};
const handleSubmit = async (e) => {
e.preventDefault();
setLoading(true);
setError(null);
try {
// Use proxy or full URL as needed
const response = await axios.post("/api/payment", form);
const payLink = response.data.payLink;
console.log("Redirecting to:", payLink.data);
console.log("Log the response:", response);
if (payLink) {
window.location.href = payLink;
} else {
setError("Payment link unavailable");
}
} catch (err) {
console.error("Payment initiation failed", err);
setError(err.response?.data?.error || "Unknown error occurred");
} finally {
setLoading(false);
}
};
return (
<div
style={{ maxWidth: 400, margin: "2rem auto", fontFamily: "sans-serif" }}
>
<h2>SeerBit Payment</h2>
<form onSubmit={handleSubmit}>
<label>
Full Name
<br />
<input
name="fullName"
value={form.fullName}
onChange={handleChange}
required
/>
</label>
<br />
<br />
<label>
Email
<br />
<input
type="email"
name="email"
value={form.email}
onChange={handleChange}
required
/>
</label>
<br />
<label>
Phone Number
<br />
<input
type="mobile_no"
name="mobile_no"
value={form.mobile_no}
onChange={handleChange}
required
/>
</label>
<br />
<br />
<label>
Description
<br />
<input
type="description"
name="description"
value={form.description}
onChange={handleChange}
required
/>
</label>
<br />
<br />
<label>
Amount (NGN)
<br />
<input
type="number"
name="amount"
value={form.amount}
onChange={handleChange}
required
/>
</label>
<br />
<br />
<button type="submit" disabled={loading}>
{loading ? "Processing..." : "Pay Now"}
</button>
</form>
{error && (
<p style={{ color: "red", marginTop: "1rem" }}>Error: {error}</p>
)}
</div>
);
}
export default App;
Step 4: Test the Integration
- Run the backend:
node server.js
- Run the frontend:
npm start
- Fill in the form and click Pay with SeerBit
- You will be redirected to SeerBit's secure payment gateway.
Download the source code here...
Best Practices for Production
- Use https and host your backend securely
- Validate all inputs both client-side and server-side
- Store transactions and references in your database
- Use webhook support to verify payments server-to-server
- Rate limit your API endpoints to prevent abuse
Conclusion
With SeerBit's powerful APIs and simple integration process, developers can launch secure, user-friendly payment experiences in days, not weeks. Whether you're building for Nigeria or across Africa, SeerBit offers the tools and infrastructure to help your application grow.
Have questions or want to connect? Reach out to me on LinkedIn.
Resources
Did you enjoy this tutorial? Share it with your dev friends, bookmark it, and build the next big fintech app using SeerBit.
Thanks for reading...
Happy Coding!
Top comments (1)