Monnify Web SDK

Installing the Monnify SDK can be completed in a couple of minutes by simply following the steps below:

Add the Monnify Web SDK Javascript Snippet to your website

You can simply copy the code snippet below and paste it in your website to install the Monnify SDK.

Monnify Web SDK

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 <script type="text/javascript" src="https://sdk.monnify.com/plugin/monnify.js"></script> <button onclick="payWithMonnify()">Pay with Monnify</button> <script type="text/javascript"> function payWithMonnify() { MonnifySDK.initialize({ amount: 5000, currency: "NGN", reference: '' + Math.floor((Math.random() * 1000000000) + 1), customerName: "John Doe", customerEmail: "monnify@monnify.com", apiKey: "MK_TEST_SAF7HR5F3F", contractCode: "4934121693", paymentDescription: "Test Pay", isTestMode: true, metadata: { "name": "Damilare", "age": 45 }, paymentMethods: ["CARD", "ACCOUNT_TRANSFER"], incomeSplitConfig: [ { "subAccountCode": "MFY_SUB_342113621921", "feePercentage": 50, "splitAmount": 1900, "feeBearer": true }, { "subAccountCode": "MFY_SUB_342113621922", "feePercentage": 50, "splitAmount": 2100, "feeBearer": true } ], onComplete: function(response){ //Implement what happens when transaction is completed. console.log(response); }, onClose: function(data){ //Implement what should happen when the modal is closed here console.log(data); } }); } </script>


Once you've copied this code into your website, you can start receiving payments via Monnify immediately. 

You will need to pass in your own values when initializing the SDK. Your contractCode, and apiKey can be found on your Monnify dashboard

When the transaction is completed, Monnify returns a response object to your onComplete function. 

Monnify Web SDK Response Object

1 2 3 4 5 6 7 8 9 10 11 12 { accountReference: null amountPaid: "5000.00" invoiceReference: null paidOn: "26/08/2019 02:13:32" paymentDescription: "Test Pay" paymentReference: "421168696" paymentStatus: "PAID" totalPayable: "5000.00" transactionHash: "6373d5039175201eed06c1872c557749cfba27f0d56d75ff713e58f06ebad84795d38b34334ca59470ffae8addfbdf113ec36823a1607325c89da4981e1054bf" transactionReference: "MNFY|20190826141314|000290" }

If a user cancels, Monnify returns the following response to your onClose function

Monnify Web SDK Cancellation Object

1 2 3 4 5 6 7 { authorizedAmount: 0 paymentStatus: "USER_CANCELLED" redirectUrl: "file:///Users/tamira/Webapps/html/sdk.html" responseCode: "USER_CANCELLED" responseMessage: "User cancelled Transaction" }


We recommend that you always make a get transaction status call whenever a transaction is completed (or cancelled) before saving the transaction on your database. Monnify will also notify you via your webhook url of the status of any transaction.

Simulating Bank Transfers on the Sandbox

To simulate bank transfers on the Monnify Sandbox environment you can use our Banking App Web Simulator. Click here to view the banking app simulator 


Field Reference

(M) indicates fields that are mandatory in the request body

Field

Description

Field

Description

amount (M)

The amount to be paid by the customer

currency (M)

The currency of the transaction being initialized. "NGN"

reference (M)

Merchant's Unique reference for every transaction. (The SDK already has a code snippet that generates this for you, but you can always replace it)

customerName (M)

Full name of the customer

customerEmail (M)

Email address of the customer

customerMobileNumber (M)

Phone number of the customer

apiKey (M)

Merchant's API Key (Can be found on the Monnify dashboard)

contractCode (M)

Merchant's contract code (Can be found on the Monnify dashboard)

paymentDescription (M)

Description for the transaction. Will be used as the account name for bank transfer payments

isTestMode (M)

Should be set to true when using the sandbox and false when on production

transactionHash (M)

Transaction Hash added to transaction response for security purposes. Click here for information on how to calculate the hash value

paymentStatus (M)

Status of the transaction ("PAID", "PENDING" or "FAILED")

incomeSplitConfig 

Object containing specifications on how payments to this reserve account should be split.

subAccountCode (m)

The unique reference for the sub account that should receive the split.

feeBearer

Boolean to determine if the sub account should bear transaction fees or not

feePercentage

The percentage of the transaction fee to be borne by the sub account

splitPercentage

The percentage of the amount paid to be split into the sub account.

paymentMethods

An array containing payment methods which will be displayed to select from. It's defaulted to both account and card payment methods.