https://github.com/prevailexcel/monnify-vue
A Vue.js 3 plugin for easily collecting payments with Monnify
https://github.com/prevailexcel/monnify-vue
Last synced: 4 months ago
JSON representation
A Vue.js 3 plugin for easily collecting payments with Monnify
- Host: GitHub
- URL: https://github.com/prevailexcel/monnify-vue
- Owner: PrevailExcel
- License: mit
- Created: 2024-06-13T12:01:38.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-06-13T12:03:42.000Z (almost 2 years ago)
- Last Synced: 2025-09-28T02:23:19.630Z (9 months ago)
- Language: TypeScript
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Monnify VueJS SDK
> monnify-vue
[](https://www.npmjs.com/package/monnify-vue) [](https://standardjs.com)
The Monnify VueJS SDK is a library that allows you to integrate a checkout functionality into your websites to enable your customers make payments on your platform. The Monnify Checkout widget provides customers with various payment method options such as; Pay with Bank Transfer, USSD, Card and Phone Number.
#### It has full TypeScript Support.
## Install
```bash
npm install --save monnify-vue
```
## Usage
```vue
import useMonnify from 'monnify-vue';
const options = {
amount: 1000,
name: "Prevail Ejimadu",
email: "prevailexcellent@gmail.com",
apiKey: "MK_TEST_**********",
contractCode: "4********2",
description: "Monify Vue",
ref: new String((new Date()).getTime()) // optional - Generated by plugin if omitted
currency: "NGN" // optional - Generated by plugin if omitted
metadata: { // optional
"name": "Prevail",
"type": 30
},
incomeSplitConfig: [{ // optional
"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) {
//Implement what happens when the transaction is completed.
console.log(response);
},
onClose: function (data) {
//Implement what should happen when the modal is closed here
console.log(data);
}
}
const payWithMonnify = useMonnify(options)
Make Payment
```
## SAMPLE RESPONSE
```js
{
"amount": 100,
"amountPaid": 100,
"completed": true,
"completedOn": "2022-03-31T10:53:50.000+0000",
"createdOn": "2022-03-31T10:52:09.000+0000",
"currencyCode": "NGN",
"customerEmail": "ogunnaike.damilare@gmail.com",
"customerName": "Damilare Ogunnaike",
"fee": 10.75,
"metaData": {
"deviceType": "mobile",
"ipAddress": "127.0.0.1"
},
"payableAmount": 100,
"paymentMethod": "CARD",
"paymentReference": "MNFY|PAYREF|GENERATED|1648723909057299503",
"paymentStatus": "PAID",
"transactionReference": "MNFY|67|20220331115209|000063"
}
```
## Contributing
Please feel free to fork this package and contribute by submitting a pull request to enhance the functionalities.
## Thank You
Why not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter or HackerNews? Spread the word!
Don't forget to [follow me on twitter](https://twitter.com/EjimaduPrevail)!
Also check out my page on medium to catch articles and tutorials on Laravel [follow me on medium](https://medium.com/@prevailexcellent)!
Thanks!
Chimeremeze Prevail Ejimadu.
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.