Monnify Web SDK
- Tobi Amira
- Emmanuel Okorie
- Damilare Ogunnaike
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
<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
{
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
{
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 |
|---|---|
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. |