softare development

Remita Payment Integration: How to Generate RRR and Check Transaction Status in React JS

So the other day I was trying to integrate Remita payment integration system into a React software application I was working on.

Like all developers, I browsed through their website looking for an official documentation to use, just like the other payment systems, but couldn’t find any.

Granted, there’s a documentation for Javascript, Node js, PHP and other software development programs listed on the Remita website. So what I’m going to do is convert the plain Javascript code to React.

At the time of writing this article, there still isn’t an official documentation on how to generate RRR in React JS on the Remita website, and I hope this simplifies things well enough for other developers.

See Also: How to Use Data tables in React JS

Let’s begin.

Make Payment With Remita

Since we’re using Crypto JS for the API hash, we need to first import that into our project using yarn.

yarn add crypto-js

Next, we initialise it in our project.

import React, { Component } from 'react';
let CryptoJS = require("crypto-js");

  makeRemitaPayment = () => {
    let merchantId = "2547916";
    let apiKey = "1946"
    let serviceTypeId = "4430731"
    let d = new Date();
    let orderId = d.getTime();
    let totalAmount = "10000";
    let apiHash =       CryptoJS.SHA512(merchantId+serviceTypeId+orderId+totalAmount+apiKey);

    let req = {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `remitaConsumerKey=${merchantId},remitaConsumerToken=${apiHash}`,
      },
      body: JSON.stringify({
        "serviceTypeId": serviceTypeId,
        "amount": totalAmount,
        "orderId": orderId,
        "payerName": 'Pete Attah',
        "payerEmail": 'pete@domain.com',
        "payerPhone": '808080808080',
        "description": "Your payment description here"
      }),
    };

    fetch(`https://remitademo.net/remita/exapp/api/v1/send/api/echannelsvc/merchant/api/paymentinit`, req)
      .then((response) => response.json())
      .then((responseJson) => {
        console.warn(responseJson);
      })
      .catch((error) => {
         console.log(error);
      });
  }

Result:

Remita RRR Code Generation

Check Transaction Status

To check transaction status, we will pass the merchant id, the generated rrr and the api hash.

  checkPaymentStatus = async () => {
    let merchantId = "2547916";
    let apiKey = "1946"
    let serviceTypeId = "4430731"
    let d = new Date();
    let orderId = d.getTime();
    let totalAmount = "10000";
    let rrr = "your_generated_rrr";
    let apiHash = CryptoJS.SHA512(rrr + apiKey + merchantId);

    let req = {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `remitaConsumerKey=${merchantId},remitaConsumerToken=${apiHash}`,
      },
    };

    await fetch(`https://remitademo.net/remita/exapp/api/v1/send/api/echannelsvc/${merchantId}/${rrr}/${apiHash}/status.reg`, req)
      .then((response) => response.json())
      .then((responseJson) => {
        console.warn(responseJson);
      })
      .catch((error) => {
        console.error(error);
        });
      });
  }

Result For Remita Payment Integration:

Conclusion

There we have it guys. We’ve been able to both generate RRR and check transaction status.

Let me know if you have any questions in the comments.

Enrol For A Software Development Training

View Comments

  • No, this tutorial does not support that because the demonstration is on Remita's documentation. This tutorial captures what Remita did not originally have in their documentation.

Recent Posts

Trump Extends U.S. TikTok Sale Deadline to September 2025

In a surprising turn of events, former President Donald Trump announced on June 19, 2025,…

1 week ago

Master React Native Flexbox

Flexbox is a powerful layout system in React Native that allows developers to create responsive…

2 weeks ago

Getting Started With TensorFlow

"The journey of a thousand miles begins with a single step." — Lao Tzu Welcome…

2 weeks ago

Your Mind is a Supercomputer

We often describe ourselves as "processing" information, "rebooting" after a bad day, or feeling "overloaded"…

3 weeks ago

What is a QR Code And How to Create One

QR codes have evolved from a niche tracking technology to an indispensable digital connector, seamlessly…

4 weeks ago

Will AI Replace Software Developers?

Artificial Intelligence (AI) has made remarkable progress in recent years, transforming industries such as healthcare,…

1 month ago