DEV Community: FOLASAYO SAMUEL OLAYEMI

If you're building APIs or working on production systems, this guide will help you avoid common security mistakes. Watch the full tutorial here: https://youtu.be/bNi8wfrPRjM Let me know your thoughts or questions in the comments

FOLASAYO SAMUEL OLAYEMI — Sat, 28 Mar 2026 06:23:39 +0000

FOLASAYO SAMUEL OLAYEMI

Mar 28

How to Secure Your App Using OAuth2 with Ory Hydra

#webdev #programming #python #security

Comments

2 min read

youtu.be

How to Secure Your App Using OAuth2 with Ory Hydra

FOLASAYO SAMUEL OLAYEMI — Sat, 28 Mar 2026 06:22:21 +0000

Security is one of the most overlooked aspects of backend development until it becomes a problem.

If you're building APIs with FastAPI, relying on basic authentication or rolling your own security system can expose your application to serious risks.

In this guide, I’ll walk you through how to properly secure your FastAPI application using OAuth2 with Ory Hydra.

Why API Security Matters

APIs are often the backbone of modern applications. Without proper authentication and authorization:

Sensitive data can be exposed
Unauthorized users can access protected resources
Your system becomes vulnerable to attacks

This is where OAuth2 comes in.

What is OAuth2?

OAuth2 is an authorization framework that allows applications to securely access resources on behalf of a user.

Instead of sharing passwords, it uses tokens to grant access — making it much safer and scalable for modern systems.

Why Use Ory Hydra?

Ory Hydra is a production-ready OAuth2 and OpenID Connect server.

It helps you:

Handle token issuance securely
Manage OAuth2 flows (Authorization Code, Client Credentials, etc.)
Separate authentication logic from your application

This separation is critical for building scalable and secure systems.

How It Works (High-Level)

Here’s a simplified flow:

User tries to access your FastAPI app
User is redirected for authentication
Consent is granted
Ory Hydra issues an access token
FastAPI validates the token before granting access

Implementation Overview

In the full video, I cover:

Setting up Ory Hydra
Configuring OAuth2 clients
Integrating Hydra with FastAPI
Handling login and consent flows
Protecting your API endpoints

Watch the Full Tutorial

If you want the complete step-by-step implementation, watch the video below:

https://youtu.be/bNi8wfrPRjM

Final Thoughts

Security shouldn’t be an afterthought.

By using OAuth2 with Ory Hydra, you’re not just protecting your API — you’re building a system that is scalable, maintainable, and production-ready.

If you're serious about backend engineering, this is a must-learn approach.

Let’s Discuss

Have you implemented OAuth2 in your projects before?

What challenges did you face?

Drop your thoughts in the comments — I’d love to hear from you.

How I Automated My YouTube Intros with Just One Python Script!

FOLASAYO SAMUEL OLAYEMI — Thu, 31 Jul 2025 18:21:41 +0000

Managing a content pipeline can be exhausting, especially when you’re juggling editing, scripting, uploading, and staying consistent.

What if you could automate parts of that workflow, like your YouTube intros, and never manually edit them again?

In this video, I break down exactly how I automated my YouTube intros using Python and the Shotstack API, a cloud-based video editing platform that takes the pain out of rendering timelines.

What You'll Learn:

How to configure the Shotstack Python SDK
How to build video & audio timelines programmatically
How to submit render jobs and handle asynchronous polling
Tips for secure API key usage, asset hosting, and logging
How I used just one script to go from concept to a rendered video in the cloud

Watch Now:
👉 How I Automated My YouTube Intros with One Python Script

Why This Matters:

If you're a content creator, developer, or automation geek, this tutorial will open your mind to what’s possible with APIs and a few lines of Python.

Whether you're working on personal branding, creating dev content, or streamlining video production, this video will save you time, improve your process, and inspire your next automation idea.

Don't forget to like, share, and subscribe to support the channel, and drop your questions in the YouTube comments!

Thanks for watching...
Happy Coding!

[Boost]

FOLASAYO SAMUEL OLAYEMI — Tue, 29 Jul 2025 10:26:55 +0000

FOLASAYO SAMUEL OLAYEMI

Jul 29 '25

Elevate Your MongoDB Security with X.509 Authentication (Video Tutorial)

#webdev #programming #python #mongodb

Comments

1 min read

Elevate Your MongoDB Security with X.509 Authentication (Video Tutorial)

FOLASAYO SAMUEL OLAYEMI — Tue, 29 Jul 2025 10:26:01 +0000

Security is not optional, especially when building applications at scale.

In this latest YouTube tutorial, we will walk you through Configuring X.509 Authentication for MongoDB Atlas, a powerful method for securing your database connections using SSL/TLS certificates instead of passwords.

Watch now: https://www.youtube.com/watch?v=j827C_7F-fw&t=21s

In this in-depth guide, you'll learn:

The fundamentals of X.509 certificate-based authentication
How to generate, manage, and use certificates with OpenSSL
Step-by-step configuration of MongoDB Atlas for X.509
How to connect securely from Python, Node.js, and the MongoDB Shell
Troubleshooting tips and real-world security best practices
How to rotate and manage certificates for long-term security

Whether you're building enterprise systems or improving your app’s security posture, this guide is essential.

Thanks for watching...
Happy Coding!

AI Powered Database Optimisation with Claude AI, MCP and MongoDB

FOLASAYO SAMUEL OLAYEMI — Mon, 14 Jul 2025 23:49:40 +0000

TechPrane's New video up!

Learn how to optimize your MongoDB workload using Claude AI + MCP.
Practical walkthrough using MongoDB Atlas.
Watch here: https://youtu.be/1jKWk2WaPZQ

CI/CD with Next.js on GitHub Actions: Should You Use “Deploy from a Branch” or “GitHub Actions”?

FOLASAYO SAMUEL OLAYEMI — Thu, 26 Jun 2025 09:15:47 +0000

If you’ve ever tried to deploy a Next.js app to GitHub Pages and got stuck deciding between “Deploy from a branch” and “GitHub Actions” , you’re not alone. I recently went through this while setting up CI/CD for a Next.js frontend project and learnt some valuable lessons that could save you hours of confusion.

In this article, I’ll break down what each deployment method means, why GitHub Actions is often the better choice (especially for Next.js), and how to set it up the right way.

My Setup: CI/CD with Next.js and GitHub Actions

I had successfully created a CI/CD pipeline using GitHub Actions to automate the process of:

Installing dependencies
Building the app
Exporting static files (when applicable)
Deploying to GitHub Pages

Everything worked perfectly when I selected “GitHub Actions” under GitHub Pages settings. But when I tried switching to “Deploy from a branch” , the deployment failed, and it left me wondering: Why?

Understanding the Two Deployment Options

In your GitHub repository’s Settings → Pages , you’ll see this under “Build and deployment”:

Source :

🔘 Deploy from a branch

🔘 GitHub Actions

Let’s break these down:

Deploy from a Branch

This method is very simple:

GitHub Pages takes the contents of a branch (like gh-pages or main)
It assumes those contents are already static files (HTML, CSS, JS)

Great for:

Static sites with no build step
Manually exported content (e.g., using next export)

Limitations:

Not ideal for dynamic frameworks like Next.js unless you’re exporting (next export) and manually pushing the output to a branch.

Deploy Using GitHub Actions

This is where you let GitHub Actions build and deploy your project automatically after every commit.

Great for:

Frameworks like Next.js, React, Vue
Projects that require a build step or CI/CD workflow
Teams that want version control, automation, and flexibility

Bonus: You can even run tests, lint checks, or performance audits during deployment.

Why “Deploy from a Branch” Doesn’t Work for Next.js (Out of the Box)

Next.js apps are not static by default. They include:

Server-side rendering (SSR)
API routes
Dynamic routing

If you simply push your /pages or /src folder to GitHub, GitHub Pages won’t know how to build it , and you’ll get a blank page or 404.

To use “Deploy from a branch” , you’d need to:

npm run build
npm run export

Then push the /out directory to a gh-pages branch, which is tedious and error-prone.

Why I Recommend Sticking With GitHub Actions

Since GitHub Actions worked perfectly for my setup, I left it that way, and here’s why you should too:

Feature	Deploy from Branch	GitHub Actions
Setup Time	Simple	Slightly longer
Control	Low	Full control (build, test, deploy)
Works with Next.js?	❌ No (unless exported manually)	Yes
Automation	❌ Manual pushes	Automatic on every commit
Customization	❌ None	Full flexibility

How to Set It Up (Step-by-Step)

If you’re using GitHub Actions to deploy your Next.js app, your .github/workflows/nextjs.ymlfile might look like this:

name: Deploy Next.js site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Detect package manager
        id: detect-package-manager
        run: |
          if [-f "${{ github.workspace }}/yarn.lock"]; then
            echo "manager=yarn" >> $GITHUB_OUTPUT
            echo "command=install" >> $GITHUB_OUTPUT
            echo "runner=yarn" >> $GITHUB_OUTPUT
            exit 0
          elif [-f "${{ github.workspace }}/package.json"]; then
            echo "manager=npm" >> $GITHUB_OUTPUT
            echo "command=ci" >> $GITHUB_OUTPUT
            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
            exit 0
          else
            echo "Unable to determine package manager"
            exit 1
          fi
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: ${{ steps.detect-package-manager.outputs.manager }}
      - name: Setup Pages
        uses: actions/configure-pages@v5
        with:
          # Automatically inject basePath in your Next.js configuration file and disable
          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
          #
          # You may remove this line if you want to manage the configuration yourself.
          static_site_generator: next
      - name: Restore cache
        uses: actions/cache@v4
        with:
          path: |
            .next/cache
          # Generate a new cache whenever packages or source files change.
          key: ${{ runner.os }}-nextjs-${{ hashFiles(' **/package-lock.json', '** /yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
          # If source files changed but packages didn't, rebuild from a prior cache.
          restore-keys: |
            ${{ runner.os }}-nextjs-${{ hashFiles(' **/package-lock.json', '** /yarn.lock') }}-
      - name: Install dependencies
        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
      - name: Build with Next.js
        run: ${{ steps.detect-package-manager.outputs.runner }} next build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./out

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Don’t forget to set your GitHub Pages source to:

Settings → Pages → Build and Deployment → Source: GitHub Actions

Final Thoughts

If you’re building with Next.js , avoid the “Deploy from a branch” option unless you’re explicitly using next export and handling deployment manually. GitHub Actions gives you far more power, automation, and scalability, especially as your project grows or integrates with backend services.

So yes, it’s perfectly okay (and actually best) to leave it set to “Deploy from GitHub Actions”.

Useful Resources

Over to You

Have you struggled with deploying your frontend on GitHub Pages before? Did switching to GitHub Actions solve it for you too?

Feel free to share your story in the comments below.

Thanks for reading…

Happy Coding!

The post CI/CD with Next.js on GitHub Actions: Should You Use “Deploy from a Branch” or “GitHub Actions”? appeared first on Innovate With Folasayo.

Integrating SeerBit Payments in Angular

FOLASAYO SAMUEL OLAYEMI — Mon, 23 Jun 2025 15:46:35 +0000

SeerBit offers a powerful Angular library (seerbit-angular) that makes adding secure payment modals super easy. You can integrate as either a Component or Directive, depending on your design preference and styling needs.

Prerequisites

Make sure you have:

Angular v16 or newer
A SeerBit merchant account and valid public key

Step 1: Install the Library

npm install --save seerbit-angular

Step 2: Import the Module

In your AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgSeerBitModule } from 'seerbit-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgSeerBitModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

This makes SeerBit’s component and directive available in your templates.

Quick Tip: Need `app.module.ts`? Create a Module-Based Project

If you've noticed your project is missing app.module.ts, it's likely because you're using Angular 17+, where standalone components are the default. You can switch to a module-based structure by running:

ng new my-app --no-standalone --routing --ssr=false

This creates a traditional setup with app.module.ts and app-routing.module.ts, letting you copy over any existing code into a familiar module architecture. There’s no automatic way to convert, so if AppModule is missing and you haven’t written much code yet, this is the simplest route.

Step 3: Set Up Your Component Logic

In app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'seerbit-angular-integration';

  options = {
    tranref: Date.now(),
    currency: 'NGN',
    description: 'Test payment',
    country: 'NG',
    email: 'you@example.com',
    mobile_no: '08012345678',
    full_name: 'Jane Doe',
    amount: 5000,
    setAmountByCustomer: false,
    close_prompt: false,
    close_on_success: false,
    callbackurl: 'https://yourapp.com/payment-callback',
    public_key: 'YOUR_PUBLIC_KEY_HERE',
    customization: {
      theme: { border_color: '#000', background_color: '#004C64', button_color: '#0084A0' },
      payment_method: ['card', 'transfer', 'wallet', 'ussd'],
      display_fee: true,
      logo: 'your_logo_url_or_base64'
    },
    tokenize: false,
    planId: ''
  };

  PaymentDone(res: any) {
    console.log('Payment done:', res.response);
    res.closeModal();
  }

  PaymentCancel(res: any) {
    console.log('Payment cancelled:', res);
  }
}

Customize the options object with your merchant key and shopper info.

Step 4: Add the UI

As a Component

In app.component.html:

<main>
  <div class="content">
    <h1>SeerBit Angular Payment</h1>
    <seerbit-ng
      class="btn-pay"
      [options]="options"
      (callback)="PaymentDone($event)"
      (close)="PaymentCancel($event)">
      Pay Now
    </seerbit-ng>
  </div>
</main>

As a Directive

<main>
  <div class="content">
    <h1>Pay with SeerBit</h1>
    <button
      class="btn-pay"
      seerbit-ng
      [options]="options"
      (callback)="PaymentDone($event)"
      (close)="PaymentCancel($event)">
      Pay via SeerBit
    </button>
  </div>
</main>

Component vs directive is up to your styling preferences. Just ensure CSS is global if you need to style the custom element.

Step 5: Add Some Basic CSS

In styles.css (global):

.btn-pay {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: #0084A0;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
}

.btn-pay:hover {
  background-color: #006f88;
}

Component-scoped CSS won’t apply to seerbit-ng, so use global styles for classes used on it.

Step 6: Run & Test

Start your app:

ng serve

Navigate to http://localhost:4200/, click your button, and test the payment flow. Check your console logs for PaymentDone or PaymentCancel.

Bonus: Shopping Cart Demo

The SeerBit GitHub repo includes a full shopping cart example: both directive and component versions integrated within a cart UI. It’s a great reference for real‑world use.

Summary

Integration Type	Tag Used	Good For
Component	`<seerbit-ng>`	When you want modal style
Directive	`seerbit-ng` on `<button>`	For custom buttons / styling

Download the source code here

Thanks for reading...
Happy Coding!

Implementing SeerBit Payment Solution in a Full-Stack Application Using ReactJS and NodeJS

FOLASAYO SAMUEL OLAYEMI — Tue, 10 Jun 2025 08:35:22 +0000

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!

How to Easily Integrate the SeerBit Payment Solution with React.js

FOLASAYO SAMUEL OLAYEMI — Mon, 26 May 2025 07:12:03 +0000

Integrating the SeerBit ReactJS SDK into your application is straightforward—even for beginners.

This guide walks you step by step through obtaining your Public Key, installing prerequisites, configuring environment variables, and using the SDK both as a React Hook and as a prebuilt Button component. By following best practices for secure key management, and error handling, you’ll be able to accept payments seamlessly in minutes.

Introduction

SeerBit’s seerbit-reactjs package provides a React-specific wrapper for SeerBit’s payment gateway, enabling you to embed payment flows with minimal code. It abstracts away raw HTTP calls, encryption, and error parsing—letting you focus on building your UI and business logic without wrestling with low‑level API details.

Prerequisites

Before integrating, ensure you have:

Node.js v12+ installed on your machine. You can download it from the official site.
A SeerBit Merchant Account with both Public and Secret keys.
Basic React knowledge and familiarity with npm or yarn package managers.

Step 1: Obtain Your Public Key

Log in to the SeerBit Dashboard with your merchant credentials.
Navigate to API Keys (usually under Settings → API Keys).
Copy your Public Key.

Tip: Store these keys securely—never hard‑code them in your source.

Step 2: Install the SDK

In your React project directory, run:

npm install --save seerbit-reactjs
# or
yarn add seerbit-reactjs

The package includes TypeScript definitions for better autocomplete in modern editors.

Step 3: Configure Environment Variables

Create a .env file at your project root (add to .gitignore):

REACT_APP_SEERBIT_PUBLIC_KEY=SBTESTPUBK_xxx

Load them in src/config.js:

export const PUBLIC_KEY = process.env.REACT_APP_SEERBIT_PUBLIC_KEY;

This isolates sensitive data and supports multiple environments.

Step 4: Using the SDK as a React Hook

Import the Hook:

   import { useSeerbitPayment } from "seerbit-reactjs";
   import { PUBLIC_KEY } from "./config";

Define your payment options:

   const options = {
     public_key: PUBLIC_KEY,
     amount: 5000,
     tranref: Date.now().toString(),
     currency: "NGN",
     email: "customer@example.com",
     full_name: "Jane Doe",
     mobile_no: "08012345678",
     description: "Order #1234",
     tokenize: false,
     customization: {
       theme: {
         border_color: "#000000",
         background_color: "#004C64",
         button_color: "#0084A0",
       },
       payment_method: ["card", "account", "transfer", "wallet", "ussd"],
       display_fee: true,
       display_type: "inline",
       logo: "https://yourdomain.com/logo.png",
     },
   };

Set up callback and close handlers:

   const callback = (response, close) => {
     console.log("Payment successful:", response);
     setTimeout(() => close(), 2000);
   };
   const close = () => console.log("Checkout closed");

Initialize the payment:

   const initializePayment = useSeerbitPayment(options, callback, close);

Trigger on user action:

   <button onClick={initializePayment}>Pay Now</button>

Result: Clicking the button opens SeerBit’s checkout, handles the flow, and returns the response to your callback.

Step 5: Using the Prebuilt Button Component

For minimal setup, use SeerbitButton:

Import the component:

   import { SeerbitButton } from "seerbit-reactjs";
   import { PUBLIC_KEY } from "./config";

Prepare options and handlers:

   const callback = (res, close) => { console.log(res); close(); };
   const close = () => console.log("Closed");
   const props = { ...options, callback, close };

Render the button:

   <SeerbitButton text="Pay with SeerBit" {...props} className="btn-pay" />

Result: A fully styled button that launches the checkout flow on click.

Download source code here.

Step 6: Testing Your Integration

Local Testing: Run npm start to launch your app and click the Pay button.
Sandbox Mode: Use your test keys to simulate transactions without real charges.
Monitoring: Check network calls in your browser’s DevTools to inspect the payload and response.

Error Handling & Logging

Wrap your payment initialization in try…catch:

try {
  await initializePayment();
} catch (error) {
  console.error("SeerBit Error:", error.code, error.message);
}

Use a structured logger (e.g., Winston) for production-level monitoring.

Best Practices

Secure Key Storage: Keep keys in env vars, rotate regularly.
Version Pinning: Lock seerbit-reactjs in package.json to prevent breaking updates.
CI/CD: Automate linting (ESLint), type checks, and integration tests on pull requests.
Graceful Fallback: Implement retries and user-friendly error messages for network failures.

Conclusion

By following these steps—obtaining your keys, installing the SDK, configuring securely, and using either the Hook or Button component—you can integrate SeerBit payments into your React app quickly and reliably. Happy coding!

References

SeerBit ReactJS SDK GitHub: https://github.com/seerbit/seerbit-reactjs
SeerBit Official Docs: https://doc.seerbit.com/libraries-plugins/sdks
SeerBit Dashboard Login: https://www.dashboard.seerbit.com/#/auth/login
NPM Package “seerbit-reactjs”: https://www.npmjs.com/package/seerbit-reactjs
Managing Environment Variables in Create React App: https://create-react-app.dev/docs/adding-custom-environment-variables
Winston Logging Library: https://www.npmjs.com/package/winston
React Error Boundaries: https://www.npmjs.com/package/react-error-boundary

Thanks for reading...
Happy Coding!

Real-Time Data Processing with Apache Spark Structured Streaming

FOLASAYO SAMUEL OLAYEMI — Fri, 16 May 2025 10:28:42 +0000

Real-time data analytics is no longer a luxury—it's a necessity. Understanding and acting on data as it flows can be the difference between staying ahead or falling behind.

In my latest video, I explained real-time analytics using Apache Spark Structured Streaming.

This session covers:

The fundamentals of real-time analytics and its significance

Contrasting batch processing with stream processing

An in-depth look at Spark Structured Streaming mechanics

Integrating Spark with data sources like Kafka and socket streams

Real-world applications including fraud detection, system monitoring, and alerting

Whether you're a data engineer, backend developer, or a cloud enthusiast, this video offers valuable insights into building scalable, real-time data pipelines.

Watch the full video here: Real-Time Analytics with Apache Spark | Stream Processing Explained

Let's explore how to harness the power of real-time data for smarter decision-making.

Thanks for watching!

INTEGRATING SEERBIT NODE.JS SDK IN YOUR APPLICATION

FOLASAYO SAMUEL OLAYEMI — Mon, 12 May 2025 10:19:10 +0000

This tutorial provides a detailed explanation on how to integrate SeerBit’s NodeJS SDK into your applications. And also, you will learn how to install and set up the NodeJS SDL, implement standard and advanced payment functions, handle errors gracefully, test your integrations, and apply optimal approaches for reliable, efficient code. We also include working code samples and screenshots of transaction responses and explain each integration step to make sure you can follow along easily, even if you have no idea how to work with payment APIs.

Introduction

SeerBit’s NodeJS SDK was built so developers could easily interact with SeerBit’s payment APIs in their NodeJS projects. The SDK offers support for standard checkout, recurring payments, pre-auth, mobile money. This abstracts from the raw HTTP calls, encryption details, and error parsing, which allows developers to focus on business logic rather than low-level API wiring.

Prerequisites

Make sure you have NodeJS v10+ installed on your machine.
SeerBit account with public and secret keys; you can obtain this from your merchant dashboard when you sign in.
Basic knowledge of JavaScript and npm/yarn.

Installation

Install via npm or Yarn in your project directory:

npm install --save seerbit-nodejs  

# or  

yarn add seerbit-nodejs

The package includes TypeScript definitions for autocompletion in modern editors.

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:
1.Prepare Your Keys:

Public Key: Obtain this from your SeerBit merchant dashboard.
Secret Key: Also available on your merchant dashboard.

2.Concatenate and Encrypt Keys:
Format: Combine your secret and public keys into a single string, separated by a period (.):

SECRET_KEY.PUBLIC_KEY

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"
}

Important Considerations:

Security: Handle your secret and public keys with care. Avoid exposing them in client-side code or public repositories.
Token Validity: The encryptedKey (bearer token) may have a validity period. Ensure you handle token expiration appropriately in your application.
Error Handling: Implement comprehensive error handling to manage potential issues during the token generation and payment initialization processes.

For detailed information, refer to SeerBit's official documentation on authentication and the Node.js SDK:

Authentication: https://apis.seerbit.com/authentication

Node.js SDK: https://github.com/seerbit/seerbit-nodejs

Configuration

Create a config.js to centralize your keys (never commit .env to source control):

require('dotenv').config();

module.exports = {

  PUBLIC_KEY: process.env.SEERBIT_PUBLIC_KEY,

  SECRET_KEY: process.env.SEERBIT_SECRET_KEY,

  BEARER_TOKEN: process.env.SEERBIT_BEARER_TOKEN

};

Load and initialize the SDK in your application:

// app.js

const { Client, Config } = require("seerbit-nodejs");

const { PUBLIC_KEY, SECRET_KEY, BEARER_TOKEN } = require("./config");

const sdkConfig = new Config({ publicKey: PUBLIC_KEY, secretKey: SECRET_KEY, bearerToken: BEARER_TOKEN });

const seerbit = new Client(sdkConfig);

This setup ensures keys remain secure and easily swappable across environments.

Basic Usage Examples

Standard Checkout Flow

const { StandardCheckout } = require("seerbit-nodejs");

router.post("/standard-checkout", async (req, res, next) => {
  try {
    const checkout = new StandardCheckout(seerbit);
    const { fullName, amount, currency, country, email } = req.body;
    const payload = {
      fullName,
      amount,      currency,
      country,
      email,
      paymentReference: Date.now().toString(),
      callbackUrl: "https://yourapp.com/callback",
    };
    const response = await checkout.Initialize(payload);
    return res.status(201).json({ response });
  } catch (error) {
    console.error("Checkout Error:", error);
    return next(error);
  }
});

This prints a JSON similar to:

{

  "status": "success",

  "data": {

    "paymentLink": "https://payments.seerbit.com/checkout/abc123",

    "paymentStatus": "01"
    "message":"Successful"

  }

}

1.Test the Endpoint with Curl/Postman
To get the response above, you can test the standard checkout endpoint with curl or Postman. We use Curl as an example.

2.Checkout UI
Copy the payment link and load it on your browser to proceed with the payment. Input your debit/credit card details to proceed with the transaction, or make payment via other suggested options:

After inputting your card details, you will be prompted to input your card PIN and OTP to verify the transaction. If you have entered all these details correctly, you will get a response of a successful transaction modal that pops up.

Advanced Features

Recurring Payments For the recurring payment, set the tokenized state to true:

const { StandardCheckout } = require("seerbit-nodejs");

router.post("/standard-checkout", async (req, res, next) => {
  try {
    const checkout = new StandardCheckout(seerbit);
    const { fullName, amount, currency, country, email } = req.body;
    const payload = {
      fullName,
      amount,
      currency,
      country,
      email,
      paymentReference: Date.now().toString(),
      callbackUrl: "https://yourapp.com/callback",
      tokenize: true
    };
    const response = await checkout.Initialize(payload);
    return res.status(201).json({ response });
  } catch (error) {
    console.error("Checkout Error:", error);
    return next(error);
  }
});

This creates a plan that you can later subscribe customers to automatically.

Debit/credit card payment is the only option allowed for recurring payment. This will save the input card details for recurring charges.

2.Mobile Money Payment
Change the country code and currency to match the country of choice.

Note: Our mobile money payment is only available in the following countries at the point of writing this article (Ghana, Kenya, and South Africa).

Error Handling and Logging

Wrap calls in try…catch and inspect error.code / error.message:

try {

  await checkout.Initialize(payload);

} catch (err) {

  console.error("SeerBit Error", err.code, err.message);

}

Use a structured logger like Winston to record failures and facilitate debugging in production.

Best Practices

Secure Key Management: store API keys in environment variables; rotate regularly.
Version Pinning: lock seerbit-nodejs version in package.json to avoid breaking changes.
CI/CD: run linting (ESLint), tests, and vulnerability scans on every pull request.
Graceful Degradation: Implement retries with exponential backoff for transient network errors.

Conclusion

By following this guide, you’ve set up SeerBit’s NodeJS SDK, performed standard and advanced payment flows, and implemented robust error handling.

For more details, visit the SeerBit Developer Documentations or explore the GitHub repo.

Thanks for reading...
Happy Coding!

DEV Community: FOLASAYO SAMUEL OLAYEMI

If you're building APIs or working on production systems, this guide will help you avoid common security mistakes. Watch the full tutorial here: https://youtu.be/bNi8wfrPRjM Let me know your thoughts or questions in the comments

How to Secure Your App Using OAuth2 with Ory Hydra

How to Secure Your App Using OAuth2 with Ory Hydra

Why API Security Matters

What is OAuth2?

Why Use Ory Hydra?

How It Works (High-Level)

Implementation Overview

Watch the Full Tutorial

Final Thoughts

Let’s Discuss

How I Automated My YouTube Intros with Just One Python Script!

What You'll Learn:

Why This Matters:

[Boost]

Elevate Your MongoDB Security with X.509 Authentication (Video Tutorial)

Elevate Your MongoDB Security with X.509 Authentication (Video Tutorial)

AI Powered Database Optimisation with Claude AI, MCP and MongoDB

CI/CD with Next.js on GitHub Actions: Should You Use “Deploy from a Branch” or “GitHub Actions”?

My Setup: CI/CD with Next.js and GitHub Actions

Understanding the Two Deployment Options

Deploy from a Branch

Deploy Using GitHub Actions

Why “Deploy from a Branch” Doesn’t Work for Next.js (Out of the Box)

Why I Recommend Sticking With GitHub Actions

How to Set It Up (Step-by-Step)

Final Thoughts

Useful Resources

Over to You

Integrating SeerBit Payments in Angular

Prerequisites

Step 1: Install the Library

Step 2: Import the Module

Quick Tip: Need app.module.ts? Create a Module-Based Project

Step 3: Set Up Your Component Logic

Step 4: Add the UI

As a Component

As a Directive

Step 5: Add Some Basic CSS

Step 6: Run & Test

Bonus: Shopping Cart Demo

Summary

Implementing SeerBit Payment Solution in a Full-Stack Application Using ReactJS and NodeJS

Prerequisites

Project Setup

1. Initialize the Backend (NodeJS)

2. Create the Frontend (ReactJS)

Step 1: Get Your SeerBit API Keys

Request the Encrypted Key:

Step 2: Create Payment Route in NodeJS

Step 3: Create the Payment Interface in ReactJS

Step 4: Test the Integration

Best Practices for Production

Conclusion

Resources

How to Easily Integrate the SeerBit Payment Solution with React.js

Introduction

Prerequisites

Step 1: Obtain Your Public Key

Step 2: Install the SDK

Step 3: Configure Environment Variables

Step 4: Using the SDK as a React Hook

Step 5: Using the Prebuilt Button Component

Step 6: Testing Your Integration

Error Handling & Logging

Best Practices

Conclusion

References

Real-Time Data Processing with Apache Spark Structured Streaming

INTEGRATING SEERBIT NODE.JS SDK IN YOUR APPLICATION

Introduction

Prerequisites

Installation

Generating the Bearer Token

Configuration

Basic Usage Examples

Advanced Features

Error Handling and Logging

Best Practices

Quick Tip: Need `app.module.ts`? Create a Module-Based Project