Integrating One-time Payment Checkout into Your Web Project

By Bolarinwa Ajayi April, 2025

Monnify provides a robust and flexible payment gateway that enables businesses to accept payments through bank transfers, debit cards, USSD, and phone numbers using it one time payment service option. reliability.

To simplify payment processes on web applications, Monnify offers a JavaScript SDK that can be integrated into your web application, this is a seamless checkout process in application, providing users with multiple payment options while maintaining security and

In this guide, we will walk through the step-by-step process of integrating Monnify into your web project, breaking it down into three key phases. Adding the SDK, configuring it with the necessary credentials, and implementing the checkout functionality.

By the end of this guide, you will have a fully functional payment solution tailored to your application’s needs.

Create a Monnify Account

Before you can start integrating to Monnify, you will need to create a Monnify account.

Create Account

Prerequisites

To follow along with this guide, you should have:

A working knowledge of JavaScript.
Understanding JavaScript fundamentals will help you grasp Software Development Kit (SDK) integration concepts more effectively.

Familiarity with SDK integration
Knowing how to work with third-party SDKs and APIs will make it easier to configure Monnify.

A basic understanding of web development
Experience with HTML, CSS, and JavaScript frameworks (such as React or Vue) is beneficial.

Donation or Giving forms where the payer need not be identified

Node js must be installed on your machine

Access to a Monnify account
You need some credentials, including an API key and contract code, to complete the integration.

We also need an active Bank account to make accept payments to monnify in our application. Don’t forget to get yourself a moniepoint account number with your phone number, download moniepoint app on playstore or app store.

What is a Payment Gateway?

A payment gateway is a technology that enables businesses to accept electronic payments from customers securely and efficiently.

Are you looking for the best payment gateway to integrate into your next development project?

Monnify is one of the leading payment gateway across the globe, it designed specifically for it’s user need and their specific uses cases, Monnify offers services, from collection, transfer or disbursement , checkout payment, offline payment, SDK customize for your development language and others.

Nevertheless, A Software Development Kit (SDK) is a collection of tools and resources that help developers build applications for a specific platform or service.

Look no further. Monnify is here. Monnify got you covered.

The Technicals?

Let get our hand dirty! Please roll up your sleeves.

To get started, we’ll need to set up our project.

First, create a Monnify account as a new user or Login as returning user.

You will be needing your unique credentials as a user, the API key and contract code, to get this you have to sign up, and visit monnify dashboard.

In your monnify dashboard, navigate or scroll to the developer section on the sidebar, after you get to see tabs, the first tab(API Keys & contract) contain all the details you need for this development.

Note:

Whether you are on live mode(production active environment) or test mode the ( sandbox, test or development environment) you have credential details specific for each environment.

Note: the toggle button on your dashboard indicate, what mode you are working on, the test mode(orange color) while the live mode ( green color)

For the credentials:

Test or development credentials start with the prefix: MK_TEST_(xxxx)
Live or Production credentials start with the prefix: MK_PROD_(xxxx)

Let understand monnify SDK code Flow.

This is a simple standard script to Integrate Monnify SDK.

This code is a simple webpage code which entails the HTML code, the scripts embedded, and the body. The first script, reference the SDK source `monnify.js` and a button that calls the function payWithMonnify().

Before, what happens behind the scene.

<html>
  <head>
    <script
      type="text/javascript"
      src="https://sdk.monnify.com/plugin/monnify.js"
    ></script>
    <script>
      function payWithMonnify() {
        MonnifySDK.initialize({
          amount: 100,
          currency: "NGN",
          reference: new String(new Date().getTime()),
          customerFullName: "Funke onakoya",
          customerEmail: "[email protected]",
          apiKey: "MK_PROD_XXXX",
          contractCode: "XXXXX",
          paymentDescription: "Test World",
          metadata: {
            name: "Funke",
            age: 21,
          },
          incomeSplitConfig: [
            {
              subAccountCode: "MFY_SUB_342113621921",
              feePercentage: 50,
              splitAmount: 1900,
              feeBearer: true,
            },
            {
              subAccountCode: "MFY_SUB_342113621922",
              feePercentage: 50,
              splitAmount: 2100,
              feeBearer: true,
            },
          ],
          onLoadStart: () => {
            console.log("loading has started");
          },
          onLoadComplete: () => {
            console.log("SDK is UP");
          },
          onComplete: function (response) {
            console.log(response);
          },
          onClose: function (data) {
            console.log(data);
          },
        });
      }
    </script>
  </head>
  <body>
    <div>
      <button type="button" onclick="payWithMonnify()">Pay With Monnify</button>
    </div>
  </body>
</html>

The MonnifySDK.initialize(), method launches the Monnify payment system with data assigned and configuration running in the browser background.

The data details are group into category in object, each has it purpose and the integration, some are mandatory (M) while some are optional (O):

Transaction Info → Defines the amount, currency, and reference. (M)
Customer Info → Identifies who is paying. (M)
API Credentials → Authenticates the merchant.(M)
Metadata → Stores extra customer details. (O)
Income Split → Distributes funds to different accounts.(O)

finally, the call back function is listening to event happening between the modal and the web browser.

It tracks progress issue and log bugs if any is found.

onLoadStart Logs() →when the payment UI starts loading.
onLoadComplete () → Logs when the Monnify SDK is ready.
onComplete() →Logs the payment response after success.
onClose() → Logs when user exits without paying.

Application Example

I would like to introduce you to an application we’ve developed using vanilla JavaScript. It’s called Monnie Market, an e-commerce platform designed to offer users an effortless shopping experience.

I’d be happy for you to take a look and explore the flow of the application.

Monnie Market is more than just an online store; it’s an intuitive platform where shoppers can purchase products with ease, with the integration of the Monnify checkout, this provides a secure and efficient checkout service, making the transaction process smooth for both the user and the vendor.

While the primary objective is to shop for product, the deeper goal of exploring this application is to understand the intricate processes occurring in the background to facilitate each step of the user experience.

So, What does the application set up entails, the user journey through out the application show the following steps:

Product Display: The first interaction begins with a visually appealing product card. Each product card displays essential information such as the product’s name, and upon hover or click, users are able to view further details.

Visible Product Details: On the product page, the shopper is presented with a more detailed breakdown of the product in a modal, including a description, price, and other relevant information. This allows the customer to make an informed purchasing decision.

Checkout payment: The application then takes the shopper to the checkout page, where they can proceed with payment.The real beauty of this application lies in the payment flow, users can easily switch between various payment options, Card, USSD, Bank transfer and phone, depending on your preference.This flexibility is crucial in ensuring a seamless checkout experience.
You can test all available option.

Redirection and Information:After a successful payment, users are redirected to an informative page of their choice.This could be a thank you page, or even a personalized dashboard.This is optional

Conclusion

This Process fosters an understanding of monnify payment checkout service, and the flow of data between the user and the service.

We believe this project offers an insightful look into the world of modern e-commerce and Online payment.

We would be thrilled to have you explore the application, by sharing your thoughts after checking it out!

Join our developer community on slack, so you meet other super developer hacking. This will be chance to connect with like minded developers.

Reference Resource.

Monnify Website Visit here

You can see a full implementation of the code sample here

View full project here Monnify-sample-store, test and give honest feedback on what can be improved, Thanks.

Was this page helpful? Tell us what you think..