Monnify provides a robust and flexible payment gateway that enables businesses to accept payments through bank transfers, debit cards, USSD, and phone numbers using its one-time payment service. To simplify payment processes on web applications, Monnify offers a JavaScript SDK that provides a seamless checkout process, giving users multiple payment options while maintaining security and reliability.
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.
Prerequisites
- A working knowledge of JavaScript — understanding JavaScript fundamentals will help you grasp 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.
- Node.js must be installed on your machine.
- Access to a Monnify account — sign up at app.monnify.com/create-account. You need credentials including an API key and contract code to complete the integration.
What is a Payment Gateway?
A payment gateway is a technology that enables businesses to accept electronic payments from customers securely and efficiently.
Monnify is one of the leading payment gateways, designed specifically for its users' needs. Monnify offers services from collection, transfer or disbursement, checkout payment, offline payment, and SDKs customized for your development language.
A Software Development Kit (SDK) is a collection of tools and resources that help developers build applications for a specific platform or service.
The SDK Code Flow
This is a simple standard script to integrate the Monnify SDK. The first script references the SDK source monnify.js and a button that calls the function payWithMonnify().
1<html>
2 <head>
3 <script
4 type="text/javascript"
5 src="https://sdk.monnify.com/plugin/monnify.js"
6 ></script>
7 <script>
8 function payWithMonnify() {
9 MonnifySDK.initialize({
10 amount: 100,
11 currency: "NGN",
12 reference: new String(new Date().getTime()),
13 customerFullName: "Funke Onakoya",
14 customerEmail: "[email protected]",
15 apiKey: "MK_PROD_XXXX",
16 contractCode: "XXXXX",
17 paymentDescription: "Test World",
18 metadata: {
19 name: "Funke",
20 age: 21,
21 },
22 incomeSplitConfig: [
23 {
24 subAccountCode: "MFY_SUB_342113621921",
25 feePercentage: 50,
26 splitAmount: 1900,
27 feeBearer: true,
28 },
29 ],
30 onLoadStart: () => console.log("loading has started"),
31 onLoadComplete: () => console.log("SDK is UP"),
32 onComplete: function(response) { console.log(response); },
33 onClose: function(data) { console.log(data); },
34 });
35 }
36 </script>
37 </head>
38 <body>
39 <div>
40 <button type="button" onclick="payWithMonnify()">Pay With Monnify</button>
41 </div>
42 </body>
43</html>The MonnifySDK.initialize() method launches the Monnify payment system with your configuration. The data fields fall into these categories (M = mandatory, O = optional):
- 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)
The callback functions listen to events between the modal and the web browser: onLoadStart logs when loading begins, onLoadComplete logs when the SDK is ready, onComplete logs the payment response after success, and onClose logs when the user exits without paying.
Application Example: Monnie Market
Monnie Market is a vanilla JavaScript e-commerce platform that showcases the Monnify checkout integration. The user journey through the application follows these steps:
- Product Display: Users see a visually appealing product card with the product's name and details on hover or click.
- Visible Product Details: A modal shows a detailed breakdown including description, price, and other relevant information.
- Checkout Payment: The application takes the shopper to the checkout page. Users can switch between Card, USSD, Bank transfer, and phone payment options.
- Redirection: After a successful payment, users are redirected to an informative page of their choice — a thank-you page or personalized dashboard.
Conclusion
This process fosters an understanding of Monnify's 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.
You can see a full implementation of the code sample at: https://github.com/Monnify/Monnify-Sample-Store
View the full project live at: https://monnifystore.netlify.app/
