DEV Community: CHIBUEZE SAM-OBISIKE

Crypto to cash backend: Using blockradar + paystack.

CHIBUEZE SAM-OBISIKE — Wed, 29 Oct 2025 10:39:31 +0000

In this article, I will be showing you how to build a simple crypto-to-cash application with focus on how to sync the services of Paystack and Blockradar such that immediately your users receive crypto the Naira variant is immediately received in your local bank account.

Prerequisite

In this article you are expected to know Javascript, Typescript, Node, Express, Postgres (or any database of choice) and little knowledge of Javascript but not mandatory. This article is for developers who are looking to integrate blockradar into their work.

What is a blockradar

Blockradar is a wallet infrastructure that gives you addresses, wallets and other blockchain infrastructure without you having to focus on blockchain complexities and implementation details.

In our article we will be focusing on the wallets, address and webhook implementation details. Although blockradar provides far more than this.

How blockradar works

When you create and account and signup you have an interactive dashboard. You will need to create what is called a master wallet. As the name implies it is the master wallet where gas fees will be withdrawn from and where assets can be swept into (autoSweep). The master wallet comes with a master address and are linked to a child address. In declaration of a master wallet we define the network (TRON, ERC 20) etc and assets that can be sent to the address.

Gas fees

These are transaction fees, usually your bank charges you some charges for transfer or card maintenance. For you to move money on the blockchain you will be gas fees. Now blockradar offers us gasless withdraw this means we handle the fees from our matter wallet (this is recommended) or users handle it. For gasless withdraw you need to have some native tokens in the master wallet. Gas fees are usually very small.

Autosweep

When we create a master wallet/address we can create sub/children addresses that is a child of the master wallet. For security a lot of times we want the account to be swept that is each money that comes into an address to be held in the master wallet. In our application each user will have a child address. This means funds are held centrally doesn’t mean that wallet owners assets is mixed up or lost.

Custodial and Non Custodial wallets

This means we choose not show users their pins (private keys, seed phrases) such that outside our app user don’t have access to their addresses. While non custodial is the direct opposite meaning that outside our application users have access to everything outside the app since it’s on chain. In order to manage the focus of this article we will be dealing with custodial wallets meaning everything is managed on blockradar and your code base.

Multi Chain

In blockradar the addresses we get are multi-chain compatible, let me dive more on this. A blockradar address is like an account number it is where people send money to. Let’s say we generate an EVM (Ethereum virtual machine) compatible address, it means we can use that address to receive all assets built on top of the EVM Engine like Base, BNB Smart Chain, Polygon, Arbitrum, Avalanche, Lisk, etc.) use this same Ethereum engine.

Getting started with blockradar

1. Create an account

Head over to blockradar create an account fill in all the required details (<1 min), you maybe required to link to Google authenticator after signing up.

2. Create a master wallet

Click on the New master wallet button to create a master wallet

For the purpose of this article, I will be using TRC 20 as my network and USDT since it’s the most popular stable coin.

3. Getting the master wallet details

After creation click on the wallet card you will be routed to a wallet detail pages. Which will most likely be empty.

At the bottom of the screenshot below you will see an API key and a wallet ID. Please copy them as they will be needed. Just below the Title and description you will get the address of the master wallet. Also copy it and save.

4. Setting configurations

I want to configure auto sweep from the dashboard, this can also be configured via the code. This configurations sets all receivables from the child wallet to be swept, stored and controlled in the master.

5. Funding the master wallet

We will need some test tokens to fund the tron wallet, get test tokens here

Copy your master wallet address from the screenshot below.

Then you can fund it with some USDT and use for transactions.

What is paystack

Paystack is a payment service provider and infrastructure that powers payment over the internet. In this article we will be using paystack as the fiat provider. Such that immediately users receive money in their wallet they receive the naira variant.

Paystack dashboard

Create a paystack account with this link. Fill out all the information then after creation of the account and other necessary details go the settings section on the sidebar and then click on the API keys and webhook section then copy the test keys and put out the details on your .env file

Code block

I liked to model my code in classes and services so this article is not excessively long here is a link to the full code. I will focus mainly on the Services and routes.

BlockradarService class

In this class BlockRadar generates wallet addresses and detects deposits (webhook), CoinGecko provides real-time conversion rates (you can add to it to suit your business decisions), Paystack handles bank account verification and transfers.

import axios from 'axios';
import { PaystackService } from './paystackService';
import dotenv from 'dotenv';

dotenv.config();

const API_KEY = process.env.BLOCKRADAR_API_KEY;

const walletId = process.env.TRON_ARTICLE_WALLET_ID;

const http = axios.create({
  baseURL: 'https://api.blockradar.co/v1',
});
http.defaults.headers.common['x-api-key'] = API_KEY;

export interface CreateAddressParams {
  name?: string;
  metadata?: Record<string, any>;
  disableAutoSweep?: boolean;
  enableGaslessWithdraw?: boolean;
}

export interface WebhookEvent {
  [key: string]: any;
}

export class BlockradarService {
  static async createChildAddress(params: CreateAddressParams) {
    try {
      const response = await http.post(`wallets/${walletId}/addresses`, {
        disableAutoSweep: params.disableAutoSweep ?? false,
        enableGaslessWithdraw: params.enableGaslessWithdraw ?? true,
        metadata: params.metadata || {},
        name: params.name,
      });
      return { ok: true, data: response.data };
    } catch (error: any) {
      console.error(
        'BlockRadar Create Address Error:',
        error?.response?.data || error.message
      );
      throw new Error('Failed to create address');
    }
  }

  static async getChildWallets() {
    try {
      const response = await http.get(`wallets/${walletId}/addresses`);
      return { ok: true, data: response.data };
    } catch (error: any) {
      console.error(
        'BlockRadar Get Wallets Error:',
        error?.response?.data || error.message
      );
      throw new Error('Failed to fetch wallets');
    }
  }

  static async processWebhookEvent(event: any) {
    try {
      console.log('Webhook received:', event);

      if (event.event !== 'deposit.success') {
        return {
          ok: true,
          message: 'Event ignored (not deposit.success)',
        };
      }

      //Here you could send a mail saying transaction has been received in your wallet

      const deposit = event.data;
      const { amount, currency, metadata } = deposit;

      const rateResponse = await axios.get(
        'https://api.coingecko.com/api/v3/simple/price',
        {
          params: {
            ids: 'tether',
            vs_currencies: 'ngn',
          },
        }
      );

      const usdtToNaira = rateResponse.data.tether.ngn;
      console.log('1 USDT =', usdtToNaira, 'NGN');

      const amountInNaira = parseFloat(amount) * usdtToNaira;
      console.log(`Converted amount: ₦${amountInNaira}`);

      const userId = metadata.user_id;
      const accountNumber = metadata?.account_number;

      const bankCode = metadata?.bank_code;
      const verifiedAccount = await PaystackService.verifyAccount(
        bankCode,
        accountNumber
      );

      if (!verifiedAccount?.account_name) {
        throw new Error('Invalid recipient bank details');
      }

      const recipient = await PaystackService.createRecipient(
        verifiedAccount.account_name,
        verifiedAccount.account_number,
        bankCode
      );

      const transfer = await PaystackService.transferMoney(
        amountInNaira,
        recipient.recipient_code,
        `Deposit payout for user ${userId}`
      );

      /// You can store the details of the transfer here in your db with a schema of name
      /// Transaction amount, Recipient, bank details, transaction, a state of successfull etc

      return {
        ok: true,
        message: 'Deposit processed and payout sent successfully',
        data: {
          deposit,
          conversion: { rate: usdtToNaira, amountInNaira },
          transfer,
        },
      };
    } catch (error: any) {
      console.error('Error processing webhook:', error.message);
      return {
        ok: false,
        error: error.message,
      };
    }
  }
}

1. Setting up the configs

We start by importing the dependencies we’ll need:

axios – for making HTTP requests to APIs.
PaystackService – a helper class that talks to the Paystack API.
dotenv – used to securely load environment variables from a .env file.

Then, we configure our environment variables: Then, we configure our environment variables.

2. Creating an axios instance

Instead of repeating setup code in every request, we create an Axios instance for BlockRadar.

const http = axios.create({
  baseURL: 'https://api.blockradar.co/v1',
});
http.defaults.headers.common['x-api-key'] = API_KEY;

This means every call made with http will automatically include your BlockRadar API key and the correct base URL.

3. Creating a child address

   static async createChildAddress(params: CreateAddressParams) { ... }

This method creates a child wallet address under your main BlockRadars wallet. Each user can have their own address for receiving assets/crypto. If successful, BlockRadar returns the new address and its details.

4. Fetching child wallets

   static async getChildWallets() { ... }

This simply retrieves all existing child addresses linked to your main wallet handy for displaying balances or tracking deposits.

5. Processing web hook events

The most powerful feature of this service is the processWebhookEvent method. It handles real-time deposit notifications from BlockRadar and sends automatic payouts to users through Paystack.

Here is what happens step by step below:

Listen for deposits:
```
 if (event.event !== 'deposit.success') {
   return { ok: true, message: 'Event ignored (not deposit.success)' };
 }
```
BlockRadar sends various events, but we only care about deposit.success, which tells us money has just arrived in the wallet.
Extract deposit details
```
 const deposit = event.data;
 const { amount, currency, metadata } = deposit;
```
We pull out key information like:
a. The amount received
b. The currency (e.g., USDT)
c. The metadata, which may include the user ID and bank details

Convert crypto to naira

 const rateResponse = await axios.get(
   'https://api.coingecko.com/api/v3/simple/price',
   { params: { ids: 'tether', vs_currencies: 'ngn' } }
 );
 const usdtToNaira = rateResponse.data.tether.ngn;
 const amountInNaira = parseFloat(amount) * usdtToNaira;

We use CoinGecko’s API to get the live exchange rate of 1 USDT in Naira and multiply it by the deposited amount. This gives us the payout value in NGN.

Verify the users bank details

 const userId = metadata.user_id;
 const accountNumber = metadata.account_number;
 const bankCode = metadata.bank_code;

 const verifiedAccount = await PaystackService.verifyAccount(
   bankCode,
   accountNumber
 );

The bank information (sent earlier when creating the wallet address) is verified through Paystack to ensure it’s valid.

Create a Paystack Recipient

 const recipient = await PaystackService.createRecipient(
   verifiedAccount.account_name,
   verifiedAccount.account_number,
   bankCode
 );

In Paystack, before you can send money to someone, you must first create a recipient profile. This method handles that automatically.

Send the Payout

 const transfer = await PaystackService.transferMoney(
   amountInNaira,
   recipient.recipient_code,
   `Deposit payout for user ${userId}`
 );

Once the recipient is created, we trigger a transfer to the verified bank account — paying the user their Naira equivalent.

Return Success

 return {
   ok: true,
   message: 'Deposit processed and payout sent successfully',
   data: {
     deposit,
     conversion: { rate: usdtToNaira, amountInNaira },
     transfer,
   },
 };

If anything fails along the way (like an API error), the function catches it and returns a clear error message instead of crashing the app.

Paystack service class

The PaystackService class handles all interactions between your application and the Paystack API.

It allows you to verify bank accounts, create transfer recipients, and send payouts automatically all essential parts of managing fiat transactions in your app.

This service is used by BlockradarService to verify user details and send Naira payouts after detecting deposits.

import axios from 'axios';
import dotenv from 'dotenv';

dotenv.config();

const http = axios.create({
  baseURL: 'https://api.paystack.co/',
  headers: {
    Authorization: `Bearer ${process.env.PAYSTACK_PRIVATE_KEY}`,
  },
});

http.defaults.headers.common['Authorization'] =
  'Bearer ' + process.env.PAYSTACK_PRIVATE_KEY;
http.defaults.headers.common['Content-Type'] = 'application/json';

export class PaystackService {
  static async getBankList() {
    try {
      const response = await http.get('/bank');
      return response.data.data;
    } catch (error: any) {
      console.error(error.response?.data || error.message);
      throw new Error('Failed to fetch bank list');
    }
  }

  static async getBankCodeByName(bankName: string) {
    const banks = await this.getBankList();
    const bank = banks.find((b: any) =>
      b.name.toLowerCase().includes(bankName.toLowerCase())
    );

    if (!bank) {
      throw new Error(`Bank not found: ${bankName}`);
    }

    return bank.code;
  }

  static async createRecipient(
    name: string,
    accountNumber: string,
    bankCode: string
  ) {
    try {
      const response = await http.post('/transferrecipient', {
        type: 'nuban',
        name,
        account_number: accountNumber,
        bank_code: bankCode,
        currency: 'NGN',
      });

      return response.data.data;
    } catch (error: any) {
      console.error(error.response?.data || error.message);
      throw new Error('Failed to create recipient');
    }
  }

  static async transferMoney(
    amount: number,
    recipientCode: string,
    reason = 'Payout'
  ) {
    try {
      const response = await http.post('/transfer', {
        source: 'balance',
        amount: amount * 100,
        recipient: recipientCode,
        reason,
      });

      return response.data.data;
    } catch (error: any) {
      console.error(error.response?.data || error.message);
      throw new Error('Failed to transfer money');
    }
  }

  static async verifyAccount(bankCode: string, accountNumber: string) {
    try {
      const response = await http.get(
        `/bank/resolve?account_number=${accountNumber}&bank_code=${bankCode}`,

        {
          headers: {
            Authorization: 'Bearer ' + process.env.PAYSTACK_PRIVATE_KEY,
          },
        }
      );

      // returns { account_name, account_number, bank_details }
      return response.data.data;
    } catch (error: any) {
      console.error(
        'Paystack API Error:',
        error.response?.data || error.message
      );

      // Handle specific Paystack errors
      if (error.response?.data) {
        const paystackError = error.response.data;
        throw new Error(paystackError.message || 'Failed to verify account');
      }

      throw new Error('Failed to verify account');
    }
  }
}

Setting up the configs We start by importing the required dependencies:
- axios – for making HTTP requests to Paystack’s REST API.
- dotenv – to load Paystack secret keys from the .env file securely.

  import axios from 'axios';
  import dotenv from 'dotenv';

  dotenv.config();

  const PAYSTACK_SECRET_KEY = process.env.PAYSTACK_SECRET_KEY;

  const http = axios.create({
    baseURL: 'https://api.paystack.co',
    headers: {
      Authorization: `Bearer ${PAYSTACK_SECRET_KEY}`,
      'Content-Type': 'application/json',
    },
  });

Here, we create a reusable http instance that automatically includes your Paystack secret key in every request so you never have to repeat it in each method.

Methods in the class
1. Verify bank account (verifyAccount): This method ensures that the provided bank code and account number belong to a real bank account. If successful, Paystack returns details like the account name and bank name, which you can use to confirm the user’s identity before proceeding.
2. Create Transfer Recipient (createRecipient) : Before you can send money through Paystack, you must register the recipient (i.e., the user’s verified bank account). This method creates a transfer recipient and returns a recipient_code that can be used to initiate payouts.
3. Transfer Money (transferMoney) : This method sends a payout to a verified recipient using Paystack’s transfer endpoint. 5The amount should be in kobo (₦1 = 100 kobo). You can easily convert before sending.

In summary, BlockRadar detects a deposit then User’s bank details (stored in metadata) are verified via verifyAccount, A Recipient is created using createRecipient a transfer is initiated using transferMoney then transaction details stored in the database.

Feature/Method	Description
verifyAccount	Checks if a user’s bank account is valid
createRecipient	Registers a verified bank account for transfers
transferMoney	Sends Naira payouts to the registered account
Secure Config	All secrets stored in `.env`, never hard-coded
Reusable HTTP Client	Axios instance configured with base URL and headers

Webhooks

A critical part of a blockradar and paystack are web hooks, webhooks let us know when something happens on chain like a transfer is successful, a transaction failed transfer is received and other events.

Webhooks allow you to set up a notification system that can be used to receive updates on certain requests made to the Blockradar API.

A webhook is simply a URL (endpoint) in your backend that BlockRadar calls automatically whenever a specific event happens.. In our existing implementation our webhook let’s us know when a transaction has been successful then we get the data of the successful transaction then we can perform a transfer via paystack.

Let us think of it this way, Instead of you constantly asking BlockRadar, “Has a deposit arrived yet?”

BlockRadar calls you immediately when something changes. That “call” comes in the form of an HTTP POST request with JSON data that describes the event.

In our BlockradarService class we have processWebhook event as earlier described when defining the class details. You link the method to handler to a route handler and then connect it to blockradar via the dashboard. Note: The endpoint of your webhook must be POST.

Linking the master wallet to your web hook endpoint

However you will notice that your development is usually on localhost and blockradar can’t access the localhost of your machine. To expose your local server to the internet for testing purposes, consider using a tool like ngrok. These tools allow you to see what the webhook payload looks like and simulate webhook events locally before deploying your application to a live environment. Using these tools, you can ensure that your webhook integration is functioning correctly and handle any issues in a controlled, local environment before moving to production.

After installing ngrok you run the command below

ngrok http 3005

You will get an output like this below.

Now notice your localhost is linked to a remote ngrok url→ https://a713e25fe660.ngrok-free.app (this is for my local)

The route of my webhook endpoint for blockradar is on /api/webhooks/blockradar so I can now link https://a713e25fe660.ngrok-free.app/api/webhooks/blockradar on my blockradar dashboard.

import express from 'express';
import { BlockradarService } from './services/blockradarService';

const router = express.Router();

router.post('/blockradar/webhook', async (req, res) => {
  const event = req.body;
  const result = await BlockradarService.processWebhookEvent(event);

  if (!result.ok) {
    return res.status(500).json({ ok: false, error: result.error });
  }

  // This is very important to blockradar doesn't keep sending post requests.
  // Sending a 200 response means the data was received.
  res.status(200).json({ ok: true, message: result.message });
});

export default router;

Every time a deposit occurs, BlockRadar sends the event payload here →

Your service converts the crypto → verifies the bank → sends the payout → logs the transaction.

In order to confirm the webhook works, I want to send USDT to a child wallet and log the details via my webhook.

I have received a USDT of a 1000 and I log the post event body on my IDE console. Which means our Webhook works.

Now once assets are sent to a child address it is received via the webhook and the fiat variant send. In order to make handling stages of the assets transfer let’s follow this flow once assets are sent to a blockradar and received via the webhook you can create a model in your DB for transactions where you store the transaction state or send emails.

Add a column to your Transactions table tag it isAssetReceived once set to true the user receives a mail that asset has been received in his account.
Also we will need to store the transaction state of the paystack transfer and we will do that via web hooks as well.

Paystack webhooks

Here you confirm your payments via webhook and based of this you can decide to set the status of the payments as successful and as well notify the user.

Paystack has the following transfer states, for the course of this article we will focus only on the transfer.success

`transfer.success`	This is sent when the transfer is successful
`transfer.failed`	This is sent when the transfer fails
`transfer.reversed`	This transfer is reversed.

import { Request, Response } from 'express';
import { BlockradarService } from '../services/blockradar';

export const webhookHandlers = {
  async processPaystackWebhook(req: Request, res: Response): Promise<void> {
    try {
      const { event, data } = req.body;

      console.log(`Paystack webhook received: ${event}`);

      switch (event) {
        // ✅ Successful transfer
        case 'transfer.success':
          await this.handleTransferSuccess(data);
          break;

        // 🧩 Optional: add more cases (e.g. charge.success, invoice.payment_failed)
        default:
          console.log(`Unhandled Paystack event: ${event}`);
          break;
      }

      res.status(200).json({
        ok: true,
        message: 'Paystack webhook processed successfully',
      });
    } catch (error: any) {
      console.error('Paystack Webhook Error:', error?.message || error);
      res.status(500).json({
        ok: false,
        error: 'Failed to process Paystack webhook',
      });
    }
  },

  // ✅ Handle successful transfer
  async handleTransferSuccess(data: any) {
    console.log('✅ Transfer Success:', data.reference);

    // Example: update your transaction table
    // await db.query(
    //   'UPDATE transactions SET status = ?, updated_at = NOW() WHERE reference = ?',
    //   ['success', data.reference]
    // );

    // Example: notify user (email/SMS/queue)
    // await NotificationService.sendPaymentConfirmation(userId, data.amount);
  },
};

Then you can link the webhookHandlers to the /api/webhooks/paystack route and then connect it to our paystack dashboard via the ngrok instance we previously created.

Note: For transfers to work you have to use a paystack real account with live keys, however the implementation details are the same.

Conclusion

In this article we have learned how to create a backend that is able to create a wallet for users and send fiat instantly.

Blockradar offers wallets, addresses, webhooks and many more, combining with paystack fiat features offers a powerful crypto to cash system. Although the regulations of Nigeria doesn’t allow Paystack interface with crypto but this implementation can be used cause from a delivery standpoint the details of crypto aren’t spelt out. Attached here is the github repository

References

I will love to connect with you, these are my social media details. Github. Linkedin. X

Hope you get to read my next article. Thank you!

Building a payment SDK using iframe and window cross-communication

CHIBUEZE SAM-OBISIKE — Thu, 29 Feb 2024 03:21:17 +0000

In today's digital era, the need for online payment solutions is paramount, driven by the rapid evolution of diverse industries. However, developing a robust payment SDK presents its own set of challenges, particularly in sectors such as healthcare and finance.

This tutorial will guide you through the process of constructing a payment SDK, focusing on iframe integration and window cross-communication techniques.

This tutorial aims to provide comprehensive insights into building a versatile payment SDK.

Prerequisite:

To properly understand this article, you'll need to understand.

Javascript
DOM Manipulation
How to use a code editor
IFrames
postMessage and contentWindow API
A vercel account and basic knowledge of git

What is a payment SDK?

Payment SDK means Sticitt's software development kit that enables the virtual authorisation and payment of purchases by Account Holders, for products and/or services from Merchants.

What are the benefits of building a custom payment SDK?

Seamless User Experience:

One of the benefits of building a payment gateway from the ground up is that you can optimize the user experience. You can guarantee smooth user interactions and user satisfaction by designing payment flows, interfaces, and navigation that are easy for people to use.
No Vendor lock-in

The main advantage of building your own payment gateway is that it will keep you independent of pay service providers. Dependence on an outside source may lead to vendor lock-in, which severely restricts your ability to change payment methods without incurring significant costs.

Your power is limited when you are committed to a certain vendor, making you susceptible to future drawbacks like changing terms of service and fees that could eventually be detrimental to you.
Custom Made features

Are you hoping to succeed and set your platform apart from the competition? Intelligent functionalities and innovation hold the key. Building your own payment gateway gives you access to a wide range of capabilities that are required for organizations with different demands.

With the ability to integrate all the features that meet your specific business needs, a custom-built payment gateway allows you to support marketing campaigns, enable cryptocurrency transactions, and facilitate recurring payments.
Extra Profits

Creating your own payment gateway can help you make back your original investment and create prospects for profit if you operate it as a distinct business. You can profit from your investment in a variety of ways when you own a payment gateway. Selling or renting your payment gateway to other businesses looking for products with comparable feature sets is one way to go about it. You can create more revenue streams by letting other companies use your well-designed and dependable payment gateway.

In this article, I will be showing you how to build an SDK that can be integratabtle across any javascript application.

Have you come across an interface and seen a payment gateway like the image, with code samples like this.

<html>
    <div>
      <button onclick='paystack()'>Pay with paystack</button>
    </div>
    <script type="application/javascript" src="<https://cdn.paystack.co/v1/chain.js>"></script>
</html>
<script type="application/javascript">
const paystack = new Paystack.pay({
       publicKey: "pspk_test_2aj8kvr3pkuvko",
        amount: 50000,
        currency: "NGN",
        userReference: "73f03de5-1043-4ad1-bc2e-aa4d94ebee4f",
        onSuccess: function(response) {
        console.log(response.event);
      },
      onClose: function() {
        console.log('user closed the widget.')
      },
      onError: function(error) {
        console.log(error)
      }
    });
</script>

</html>

So we will be building an application called Nyerishi Pay.

This represents the interface for our payment acceptance application, developed using React. Feel free to customize the UI according to your preferences for accepting payments. Below, you'll find the code for the user interface.

import { useState, useEffect } from "react";

function App() {

  const handleCloseClick = () => { };
  const handleSuccessClick = () => {};

  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: "100vh",
        margin: "0px auto",
        flexDirection: "column",
      }}
    >
      <div style={{ background: "#fff", padding: "40px", width: "40vw" }}>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <h1>Connect Wallet</h1>
          <h3>Nyerishi Pay</h3>
        </div>
        <h3>Name: Chibueze Sam-Obisike</h3>
        <h3>Amount: N100</h3>
        <h3>Email: Nyerishi@gmail.com</h3>
        <hr />
        <p style={{ lineHeight: "0" }}>Amount</p>
        <h5 style={{ fontSize: "30px", lineHeight: 0 }}>N100,000</h5>
        <input
          placeholder='Enter Card number'
          style={{ width: "96%", padding: "10px", margin: "0 auto" }}
        />
        <div style={{ display: "block", marginTop: "20px" }}>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
            }}
          >
            <button
              style={{
                background: "#62318B",
                outline: "none",
                border: "none",
                padding: "10px",
                color: "#fff",
                cursor: "pointer",
              }}
              onClick={handleSuccessClick}
            >
              Pay with card
            </button>
            <button
              style={{
                border: ".5px solid #62318B",
                outline: "none",
                padding: "10px",
                background: "#fff",
                color: "#62318B",
                cursor: "pointer",
              }}
              onClick={handleCloseClick}
            >
              Close
            </button>
          </div>
        </div>
      </div>
      <div style={{ marginTop: "10px", fontWeight: "bold", zIndex: 99 }}>
        Secured by Nyerishi Pay
      </div>
    </div>
  );
}

export default App;

Building the SDK

Let's go into building the SDK proper, in this part we need to understand iframes and how they work.

What is an iframe?

An inline frame (iframe) is a HTML element that loads another HTML page within the document. It essentially puts another webpage within the parent page. They are commonly used for advertisements, embedded videos, web analytics and interactive content.

Essentially, we can load another webpage, like the React application mentioned above, into an iframe. In this example, it's running on port 3001.

   const iframe = document.createElement("iframe");
    iframe.src = "<http://localhost:3001>";

This code allows the iframe to load another webpage, which is the React application.

Here's what it looks like when we load the above into our iframe.

To build the SDK effectively, we will use an Object-Oriented Programming (OOP) approach. This makes the SDK easy to inject and initialize.

The structure I used is as follows:

Create a class.
The constructor should accept onSuccess, onClose, onError, and a config.
An init function that opens an iframe and sends the config received from the SDK to the React Application.
Include various utility functions.

Set up a code base this way

mkdir sdk-test
cd sdk-test
code .
npm i -y
touch index.js

Paste the code below in the sdk.js file

class SDK {
  constructor({ onSuccess, onError, onClose, ...rest }) {
    // Initialize the SDK instance if an instance doesn't already exist
    if (!(this instanceof SDK)) {
      return new SDK({
        onSuccess,
        onError,
        onClose,
        ...rest,
      });
    }
    // Callback functions
    this.onSuccess = onSuccess;
    this.onError = onError;
    this.onClose = onClose;
    // Additional configuration
    this.config = rest;
  }

  init() {
    this.#openIframe();
    this.#addMessageListener();
  }

  // Method to open an iframe with a provided URL
  #openIframe() {
    // Create modal backdrop
    const modalBackdrop = document.createElement("div");
    modalBackdrop.classList.add("sdk-modal-backdrop");
    modalBackdrop.style.position = "fixed";
    modalBackdrop.style.top = "0";
    modalBackdrop.style.left = "0";
    modalBackdrop.style.width = "100%";
    modalBackdrop.style.height = "100%";
    modalBackdrop.style.background = "rgba(0, 0, 0, 0.2)";
    modalBackdrop.style.display = "flex";
    modalBackdrop.style.justifyContent = "center";
    modalBackdrop.style.alignItems = "center";
    modalBackdrop.style.zIndex = "9999";

    // Create modal container
    const modalContainer = document.createElement("div");
    modalContainer.style.borderRadius = "5px";
    modalContainer.style.position = "relative";
    modalContainer.style.width = "100%";
    modalContainer.style.height = "100%";

    // Create loader element
    const loader = document.createElement("div");
    loader.textContent = "Loading...";
    loader.style.textAlign = "center";
    loader.style.padding = "20px";
    loader.style.fontWeight = "bold";
    loader.style.color = "white";
    loader.style.height = "100vh";
    loader.style.display = "flex";
    loader.style.alignItems = "center";
    loader.style.justifyContent = "center";

    modalContainer.appendChild(loader);
    modalBackdrop.appendChild(modalContainer);
    document.body.appendChild(modalBackdrop);

    // Create iframe element
    const iframe = document.createElement("iframe");

    // The source link is the link to deployed react application running on vercel
    iframe.src = "https://sdk-react-app.vercel.app/";

    iframe.style.width = "100%";
    iframe.style.height = "100%";
    iframe.style.border = "none";

    // When iframe is fully loaded
    iframe.onload = () => {
      // Send initial data to iframe
      iframe.contentWindow.postMessage(
        {
          type: "sdkData",
          config: this.config,
        },
        "*"
        //This means the host application which is the react app
      );
      // Remove loader and display iframe
      modalContainer.removeChild(loader);
      modalContainer.appendChild(iframe);
      modalContainer.style.display = "block";
    };

    // Handle iframe loading error
    iframe.onerror = () => {
      loader.textContent = "Failed to load the content.";
      setTimeout(() => {
        this.#closeIframe();
      }, 2000);
    };

    modalContainer.appendChild(iframe);
  }

  // Method to close the iframe
  #closeIframe() {
    const modalBackdrop = document.querySelector(".sdk-modal-backdrop");
    if (modalBackdrop) {
      document.body.removeChild(modalBackdrop);
    }
  }

  // Method to send data to the host
  sendToHost(data) {
    window.parent.postMessage(data, "*");
  }

  // Method to add message event listener
  #addMessageListener() {
    window.addEventListener("message", (event) => {
      // Check the event source for security reasons
      const data = event.data;

      if (event.data.type === "close") {
        this.#closeIframe();
      }

      // Handle data received from the SDK
      if (event.data?.type === "success") {
        this.onSuccess(data);
      }
    });
  }
}

module.exports = { SDK };

Let's break down the code.

Upon critical examination, we'll notice cross-communication. There's a message sender and a listener.

Once the iframe is properly loaded, we send information to the iframe source, which is the react application, by using:

 iframe.contentWindow.postMessage(
        {
          type: "sdkData",
          config: this.config,
        },
        "*"
        //This means the host application which is the react app
      );

The "*" signifies the source application. We can be more specific by using localhost:3001. In the next section, I'll demonstrate how to listen for this event in the React application. This enables us to retrieve configuration data such as name, amount, email, and other necessary details, which can then be used for display and API calls in the React application.

In the openIframe( ) method, we first manipulate the DOM to set up the iframe container, display a loader before the iframe loads, and remove some default styling.

The iframe.onerror( ) method is used to handle errors in case our iframe doesn't load properly.

#addMessageListener()

This method listens for events from the React application and includes a callback with an event object. This object can be used to examine the details of the received event. To understand this further, we need to delve into the React application and attempt to send messages. Keep in mind that the React application is a child of the iframe.

The Pay application (The React application)

The payment application houses the core logic for payments. The iframe simply hosts this application, making it easily accessible for other integrations.

Typically, the payment application interacts with numerous APIs from an external backend.

function App() {
  const postMessageToListeners = ({ event, data }) => {
    window.parent && window.parent.postMessage({ type: event, data }, "*");
  };

  const handleCloseClick = () => postMessageToListeners({ event: "close" });

  const handleSuccessClick = () => {
    const transactionData = {
      type: "transaction",
      transaction: {
        // transaction data here
      },
    };
    postMessageToListeners({ event: "success", data: transactionData });
  };

  const [config, setConfig] = useState({});

  useEffect(() => {
    const handleMessage = (event) => {
      if (event.data.type === "sdkData") {
        console.log("SDK D", event?.data);
        setConfig(event.data.config?.config);
      }
    };

    window.addEventListener("message", handleMessage);

    return () => {
      window.removeEventListener("message", handleMessage);
    };
  }, []);

  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100vh", margin: "0 auto", flexDirection: "column" }}>
      <div style={{ background: "#fff", padding: "40px", width: "40vw" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <h1>Connect Wallet</h1>
          <h3>Nyerishi Pay</h3>
        </div>
        <h3>Name: {config.name}</h3>
        <h3>Name: Chibueze Sam-Obisike</h3>
        <h3>Amount: {config.amount}</h3>
        <h3>Email: Nyerishi@gmail.com</h3>
        <hr />
        <p style={{ lineHeight: "0" }}>Amount</p>
        <h5 style={{ fontSize: "30px", lineHeight: 0 }}>N100,000</h5>
        <input placeholder='Enter Card number' style={{ width: "96%", padding: "10px", margin: "0 auto" }} />
        <div style={{ display: "block", marginTop: "20px" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <button style={{ background: "#62318B", outline: "none", border: "none", padding: "10px", color: "#fff", cursor: "pointer" }} onClick={handleSuccessClick}>Pay with card</button>
            <button style={{ border: ".5px solid #62318B", outline: "none", padding: "10px", background: "#fff", color: "#62318B", cursor: "pointer" }} onClick={handleCloseClick}>Close</button>
          </div>
        </div>
      </div>
      <div style={{ marginTop: "10px", fontWeight: "bold", zIndex: 99 }}>Secured by Nyerishi Pay</div>
    </div>
  );
}

Let's review the functions individually.

postMessageToListeners
```
  const postMessageToListeners = ({ event, data }) => {
    window.parent && window.parent.postMessage({ type: event, data }, "*");
  };
```
Remember, our React application runs inside an iframe. To send information to the parent application, we post a message using window.parent.postMessage({ type: event, data }, "*"). Here, the "*" represents the parent container, which is the iframe. Note that in our SDK class (addEventListener), we listen for a specific type and perform different operations based on that type.
handleCloseClick
```
  const handleCloseClick = () => postMessageToListeners({ event: "close" });
```
To close the iframe (i.e., the SDK) from its child application (the React app), we post a message to the iframe with a 'close' event type. The SDK class listens for this event and closes the iframe if it receives a 'close' event.

handleSuccessClick

  const handleSuccessClick = () => {
    const transactionData = {
      type: "transaction",
      transaction: {
        id: "transaction-identifier",
        remark: "medicine",
        amount: 50000,
        currency: "NGN",
        charge: 0,
        type: "peer",
        refund: false,
        channel: "send",
        status: "success",
        user: {
          name: "Tim Cook",
          identifier: "tim",
          identifier_type: "username",
          email: "tim@apple.com",
          reference: "one-more-thing",
          created_at: "2020-05-06T12:00:00.000Z",
          updated_at: "2020-05-06T12:00:00.000Z",
        },
        created_at: "2021-04-12T19:52:22.000000Z",
        updated_at: "2021-04-12T19:52:22.000000Z",
      },
    };
    postMessageToListeners({ event: "success", data: transactionData });
  };

Let's assume that after clicking on 'Pay with card', we receive an API response containing transactionData in JSON format, as described above. If the payment is successful, we need to inform the iframe about the successful transaction. We do this by posting data to the iframe with an event and a type.

This will help cause when we initialize our application we initialize it with an onSuccess, onError, onClose . As seen below

   function onSuccess(data) {
     console.log("Data from Onsuccess", data?.data?.transaction);
   }
   function onError(data) {}
   function onClose(data) {}
   const sdk = new SDK({
        onSuccess,
        onError,
        onClose,
        config: { name: "Nyerishi", amount: 300 },
      });

IIn our addEventListener, we add different listeners for different events, as shown below in the SDK class.

#addMessageListener() {
    window.addEventListener("message", (event) => {
      // Check the event source for security reasons
      const data = event.data;
      if (event.origin !== "<http://localhost:3001>") {
        return;
      }

      if (event.data.type === "close") {
        this.#closeIframe();
      }

      // Handle data received from the SDK
      if (event.data?.type === "success") {
        this.onSuccess(data);
      }
      console.log("Data received from SDK:", data);
    });
  }

Let us delve deeper into the event listener and the useEffect within the React application.

It declares a state variable called config using the useState hook. The initial value of config is an empty object {}.
It defines a function called handleMessage that takes an event as a parameter.
Inside handleMessage, it checks if the type of data received in the event is "sdkData". If it is, then it updates the config state with the config property from the data received in the event.
It adds an event listener to the window object to listen for messages. When a message is received, it calls the handleMessage function.
It uses the useEffect hook to clean up the event listener when the component unmounts, ensuring there are no memory leaks.

Now our SDK is all setup, let use create an index.html file to set up the SDK. In the sdk-test folder.

<!DOCTYPE html>
<html>
  <head>
    <title>Host Application</title>
  </head>
  <body>
    <script src="./sdk.js"></script>
    <button id="sendMessageButton" onclick="openSDKIframe()">
      Open SDK Iframe
    </button>

    <script>
      function onSuccess(data) {
        console.log("Data from Onsuccess", data?.data?.transaction);
      }
      function onError(data) {}
      function onClose(data) {}
      const sdk = new SDK({
        onSuccess,
        onError,
        onClose,
        config: { name: "Nyerishi", amount: 300 },
      });
      // Function to open the SDK iframe5
      function openSDKIframe() {
        // Replace 'your-sdk-url' with the URL you want to load in the iframe
        sdk.init();
      }
    </script>
  </body>
</html>

This would perfectly work however it is just in our local machine as in our script file we import

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

Now that we have a JS and HTML file, let's set up our own CDN link. We can deploy these files on any hosting provider, such as Vercel. I used Vercel to deploy my application, which can be found here. The code for the application is available on my GitHub.

However, when Vercel deploys our apps, it accesses the file system of the deployed application. My live deployed project is https://sdk-js-app.vercel.app/

I can access the file sdk.js, by adding the name of the file with the js extension as a route. https://sdk-js-app.vercel.app/sdk.js

If we access the previously mentioned route, we obtain the JavaScript. We can then inject the code into any file using this route as our CDN.

So our html will now look like

<!DOCTYPE html>
<html>
  <head>
    <title>Host Application</title>
  </head>
  <body>
    <script src="<https://sdk-js-app.vercel.app/sdk.js>"></script>
    <button id="sendMessageButton" onclick="openSDKIframe()">
      Open SDK Iframe
    </button>

    <script>
      function onSuccess(data) {
        console.log("Data from Onsuccess", data?.data?.transaction);
      }
      function onError(data) {}
      function onClose(data) {}
      const sdk = new SDK({
        onSuccess,
        onError,
        onClose,
        config: { name: "Nyerishi", amount: 300 },
      });
      // Function to open the SDK iframe5
      function openSDKIframe() {
        sdk.init();
      }
    </script>
  </body>
</html>

Now that our CDN value has been deployed, you can use the SDK in any HTML application. Remember to also deploy the React application and replace all localhost links with the deployed value.

The complete code is:

For the react, pay application: https://github.com/ChibuezeSamObisike/sdk-react-app

For the test application that contains the SDK code and test html: https://github.com/ChibuezeSamObisike/sdk-js-app

To integrate the SDK above in your application kindly paste this code in your body tage

<script src="https://sdk-js-app.vercel.app/sdk.js"></script>
    <button id="sendMessageButton" onclick="openSDKIframe()">
      Open SDK Iframe
    </button>

    <script>
      function onSuccess(data) { }
      function onError(data) {}
      function onClose(data) {}
      const sdk = new SDK({
        onSuccess,
        onError,
        onClose,
        config: { name: "Nyerishi", amount: 300 },
      });

      function openSDKIframe() {
        sdk.init();
      }
    </script>
</script>

Conclusion:

With this article I was able to build a payment SDK that can integrated across any application.

Thank you, I hope to get your reviews and hear from you

Let's on connect on: Twitter | LinkedIn | Github

What does app.use(bodyParser.urlencoded({ extended: false })); mean

CHIBUEZE SAM-OBISIKE — Sun, 19 Mar 2023 17:05:32 +0000

app.use(bodyParser.urlencoded({ extended: false })); is a middleware function in a Node.js application that uses the body-parser package to parse incoming HTTP request bodies.

The body-parser package allows you to extract data from the request body, which is useful when you're building web applications that need to handle form data or other types of user input.

The urlencoded method of body-parser is used to parse URL-encoded form data. When you submit a form on a website, the data is usually sent in the form of key-value pairs in the URL-encoded format, which looks something like this:

name=John+Doe&email=john%40example.com

The bodyParser.urlencoded() middleware function will extract this data from the request body and make it available as a JavaScript object in req.body.

The { extended: false } option in bodyParser.urlencoded() is used to configure the middleware to use the classic encoding algorithm for URL-encoded data. When set to false, the URL-encoded data will be parsed using the querystring library included with Node.js. When set to true, the URL-encoded data will be parsed using the qs library, which allows for more complex data structures to be encoded in the URL-encoded format.

In summary, app.use(bodyParser.urlencoded({ extended: false })); sets up the middleware for parsing URL-encoded form data in a Node.js application using the body-parser package.