{"id":21083573,"url":"https://github.com/aeadedoyin/vue-monnify","last_synced_at":"2025-05-16T09:33:19.609Z","repository":{"id":116938440,"uuid":"318675828","full_name":"aeadedoyin/vue-monnify","owner":"aeadedoyin","description":"Vue Component for Monnify","archived":false,"fork":false,"pushed_at":"2021-05-13T15:06:59.000Z","size":419,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-15T20:24:28.481Z","etag":null,"topics":["banktransfer","monnify","payment","vue"],"latest_commit_sha":null,"homepage":"https://monnify.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aeadedoyin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-05T01:28:58.000Z","updated_at":"2024-05-13T22:54:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"684474ce-0a43-4290-adfa-c8b577c528a2","html_url":"https://github.com/aeadedoyin/vue-monnify","commit_stats":{"total_commits":7,"total_committers":2,"mean_commits":3.5,"dds":0.4285714285714286,"last_synced_commit":"f756a8ee014919179e7256b66e5d6f62761a3610"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeadedoyin%2Fvue-monnify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeadedoyin%2Fvue-monnify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeadedoyin%2Fvue-monnify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeadedoyin%2Fvue-monnify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aeadedoyin","download_url":"https://codeload.github.com/aeadedoyin/vue-monnify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225419731,"owners_count":17471480,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["banktransfer","monnify","payment","vue"],"created_at":"2024-11-19T20:18:42.544Z","updated_at":"2024-11-19T20:18:43.082Z","avatar_url":"https://github.com/aeadedoyin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"vue-monnify.png?raw=true\" width=\"70%\"\u003e\u003c/p\u003e\n\n\u003cbr /\u003e\n\n# Vue Component for Monnify\n\nA Vue Plugin (Pay Button 💰) for Monnify payment gateway.  \nIt wraps the official [Monnify Web SDK](https://teamapt.atlassian.net/wiki/spaces/MON/pages/212008793/Monnify+Web+SDK);  \nMaking it pretty straightforward to add Monnify Pay Button to your vue-based application.  \nAvailable for Vue 2 \u0026 3\n\n## Installation\n\n### NPM\n```bash\nnpm install vue-monnify --save \n``` \n\n### Javascript via CDN\n```javascript 1.8\n\u003c!-- Vue --\u003e\n\u003cscript src=\"https://unpkg.com/vue/dist/vue.js\"\u003e\u003c/script\u003e\n\u003c!-- Vue-Monnify --\u003e\n\u003cscript src=\"https://unpkg.com/vue-monnify/dist/vue-monnify.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n```vue\n\u003ctemplate\u003e\n    \u003cvue-monnify\n        ref=\"vueMonnifyButton\"\n        :amount=\"amount\"\n        :api-key=\"monnifyAPIKey\"\n        :contract-code=\"monnifyContractCode\"\n        :customer-email=\"email\"\n        :is-test-mode=\"monnifyIsTest\"\n        :metadata=\"payMetadata\"\n        :on-close=\"monnifyClose\"\n        :on-complete=\"monnifyComplete\"\n        :reference=\"payRef\"\n        :payment-description=\"'Payment reference'\"\n    \u003e\n      \u003c!-- This could be an html template --\u003e\n       Make Payment\n    \u003c/vue-monnify\u003e\n\u003c/template\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n  import VueMonnify from 'vue-monnify';\n  export default {\n      components: {\n          VueMonnify\n      },\n      \n      data(){\n          return{\n            monnifyAPIKey: process.env.MONNIFYAPIKEY, // This has both test and product values\n            monnifyContractCode: process.env.MONNIFYCONTRACTCODE, // This has both test and product values\n            monnifyIsTest: process.env.MONNIFYISTEST, // This should be true in test/dev environment and false in production\n            payMetadata: {}, // This can be populated with key/values as you wish\n            email: \"customer@domain.com\", // Customer email\n            amount: 10000 // of type:Number and in naira\n          }\n      },\n      \n      computed: {\n        payRef(){\n          let _ref = \"\";\n          const alphanumeric = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\n\n          for( let i=0; i \u003c 10; i++ )\n            _ref += alphanumeric.charAt(Math.floor(Math.random() * alphanumeric.length));\n\n          return _ref;\n        }\n      },\n\n      methods: {\n        monnifyComplete: function(response){\n          // Perform other operations upon complete\n          console.log(\"Monnify Payment Complete\", response)\n        },\n        monnifyClose: function(data){\n          // Perform other operations upon close\n          console.log(\"Monnify Payment closed\", data)\n        }\n      }\n  }\n\u003c/script\u003e\n```\n\n## For Nuxt\nIn /plugin/components.js\n```javascript 1.8\nimport Vue from 'vue'\nimport VueMonnify from 'vue-monnify'\n\nVue.use('VueMonnify', VueMonnify)\n\n// Other components package can be here too.\n```\n\nIn nuxt.config.js\n``` javascript 1.8\n//...\nplugins: [\n  '@/plugins/components',\n],\n//...\n```\n\nIn page or component as seen above (where its used)  \nYou don't need to add\n```javascript 1.8\nimport VueMonnify from 'vue-monnify';\n```\n\n## All Props Available\n```\nreference: String (required)\ncontractCode: String (required)\napiKey: String (required)\ncustomerEmail: String (required)\ncustomerName: String (required)\ncustomerMobileNumber: String (required)\namount: Number (required)\nisTestMode: Boolean (required) [true] // possible values: [false] or [true]\nonComplete: Function (required)\nonClose: Function (required)\nmetadata: Object (optional) [{}]\ncurrency: String (optional) ['NGN']\npaymentDescription: String (optional) ['']\npaymentMethods: StringArray (optional) ['ACCOUNT_TRANSFER'] // possible values: ['CARD', 'ACCOUNT_TRANSFER']\nbtnClass: String (optional)['']\n\ni.e\n// prop: DataType (required or optional) [default value]\n```\n\n## Development and Testing\nTo simulate a bank transfer, Monnify provided a bank app simulator that works nicely. [Click here](https://websim.sdk.monnify.com/#/bankingapp)\n\n## Contribution\n\nPlease feel free to fork this package and contribute by submitting a pull request to enhance the functionalities\n\n## Appreciation\n\nGive it a star and share the link to the repo on your social platforms.  \nThanks! Adedoyin Akande,  \nTwitter: [@aeadedoyin ](https://twitter.com/aeadedoyin)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faeadedoyin%2Fvue-monnify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faeadedoyin%2Fvue-monnify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faeadedoyin%2Fvue-monnify/lists"}