{"id":16085675,"url":"https://github.com/iamraphson/vue-ravepayment","last_synced_at":"2025-03-17T17:30:36.545Z","repository":{"id":78533747,"uuid":"116596098","full_name":"iamraphson/vue-ravepayment","owner":"iamraphson","description":"RavePay Vue Plugin for Vue 2.X ","archived":false,"fork":false,"pushed_at":"2019-12-04T20:08:35.000Z","size":510,"stargazers_count":33,"open_issues_count":2,"forks_count":13,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-28T02:10:08.176Z","etag":null,"topics":["cdn","flutterwave","payment","payment-gateway","ravepay","vuejs2"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vue-ravepayment","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/iamraphson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2018-01-07T20:18:58.000Z","updated_at":"2021-07-09T16:15:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"857fccc6-17e4-4a96-a0b0-aa0c02629dd7","html_url":"https://github.com/iamraphson/vue-ravepayment","commit_stats":{"total_commits":18,"total_committers":5,"mean_commits":3.6,"dds":"0.33333333333333337","last_synced_commit":"371faba31d38a72a9b06cd20c790c3096caf99e5"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamraphson%2Fvue-ravepayment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamraphson%2Fvue-ravepayment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamraphson%2Fvue-ravepayment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamraphson%2Fvue-ravepayment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamraphson","download_url":"https://codeload.github.com/iamraphson/vue-ravepayment/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243871904,"owners_count":20361380,"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":["cdn","flutterwave","payment","payment-gateway","ravepay","vuejs2"],"created_at":"2024-10-09T13:08:39.423Z","updated_at":"2025-03-17T17:30:36.538Z","avatar_url":"https://github.com/iamraphson.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Rave Payment Component for Vue 2.x\nA Vue Plugin for RavePay Payment Gateway.\n\n### Demo\n\n![Demo Image](rave-demo.png?raw=true \"Demo Image\")\n\n### Install\n\n##### NPM\n```\nnpm install vue vue-ravepayment --save \n``` \n\n##### Javascript via CDN\n```javascript\n\u003c!-- Vue --\u003e\n\u003cscript src=\"https://unpkg.com/vue/dist/vue.js\"\u003e\u003c/script\u003e\n\u003c!-- Vue-Rave --\u003e\n\u003cscript src=\"https://unpkg.com/vue-ravepayment/dist/rave.min.js\"\u003e\u003c/script\u003e\n```\n\n### Usage\n\n##### Via NPM\n\n###### my-compnent.vue sample\n```vue\n\u003ctemplate\u003e\n     \u003cRave\n       style-class=\"paymentbtn\"\n       :email=\"email\"\n       :amount=\"amount\"\n       :reference=\"reference\"\n       :rave-key=\"raveKey\"\n       :callback=\"callback\"\n       :close=\"close\"\n       :metadata=\"meta\"\n       :subaccounts=\"subaccounts\"\n       :redirectUrl=\"redirect\"\n       :paymentPlan=\"plan\"\n       :customerFirstname=\"fname\"\n       :customerLastname=\"lname\"\n       paymentOptions=\"card,barter,account,ussd\"\n       hostedPayemt=\"1\"\n       customTitle=\"Testing title\"\n       currency=\"NGN\"\n       country=\"NG\"\n   \u003e\u003ci\u003ePay Me, My Money\u003c/i\u003e\u003c/Rave\u003e\n\u003c/template\u003e\n\u003cscript type=\"text/javascript\"\u003e\nimport Rave from 'vue-ravepayment';\nexport default {\n    components: {\n        Rave\n    },\n    data(){\n        return{\n          raveKey: \"FLWPUBK-xxxxxxxxxxxxxxxxxx-X\",\n          email: \"foobar@example.com\",\n          amount: 8000,\n          plan: 2928,\n          fname: \"Adewale\",\n          lname: \"Ayuba\",\n          redirect: \"https://google.com\",\n          meta: [{\n            metaname: 'school',\n            metavalue: 'high school'\n          }],\n          sub: [\n            {\n            id: \"1324\"\n          },\n          {\n            id: \"1221\"\n          }\n          ]\n        }\n    },\n    computed: {\n      reference(){\n        let text = \"\";\n        let possible = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\n \n        for( let i=0; i \u003c 10; i++ )\n          text += possible.charAt(Math.floor(Math.random() * possible.length));\n \n        return text;\n      }\n    },\n    methods: {\n      callback: function(response){\n        console.log(response)\n      },\n      close: function(){\n        console.log(\"Payment closed\")\n      }\n    }\n}\n\u003c/script\u003e\n\u003cstyle\u003e \n    .paymentbtn{\n        color: #04193d;\n        width: 250px;\n        height: 100px;\n        font-weight: 800;\n    }\n\u003c/style\u003e\n```\n[Usage Example via NPM or Yarn](examples/commonjs/App.vue)\n#### via CDN\n```javascript\nnew Vue({\n    el: '#app',\n    components:{\n      'Rave': VueRavePayment.default\n    },\n    computed: {\n        reference(){\n          let text = \"\";\n          let possible = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\n\n          for( let i=0; i \u003c 10; i++ )\n            text += possible.charAt(Math.floor(Math.random() * possible.length));\n\n          return text;\n        }\n    },\n    methods: {\n      callback: function(response){\n        console.log(response)\n      },\n      close: function(){\n        console.log(\"Payment closed\")\n      }\n    },\n    data: {\n      raveBtnText: \"Pay Me, My Money\",\n      raveKey: \"FLWPUBK-xxxxxxxxxxxxxxxxx-X\",\n      email: \"foobar@example.com\",\n      amount: 10000\n    }\n});\n```\n[Usage Example via CDN](examples/index.html)\n\nPlease checkout [Rave Documentation](https://flutterwavedevelopers.readme.io/v1.0/reference#introduction) for other available options you can add to the tag\n\n## Deployment\nWHEN DEPLOYING TO PRODUCTION/LIVE SYSTEM, take note of the following;\n1) Change `is-production` attribute in the component tag to `true` i.e `:is-production=\"true\"`\n2) Change RavePay PUBLIC KEY \n\n## Contributing\n1. Fork it!\n2. Create your feature branch: `git checkout -b feature-name`\n3. Commit your changes: `git commit -am 'Some commit message'`\n4. Push to the branch: `git push origin feature-name`\n5. Submit a pull request 😉😉\n\n## How can I thank you?\n\nWhy not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter or Any Social Media? Spread the word!\n\nDon't forget to [follow me on twitter](https://twitter.com/iamraphson)!\n\nThanks!\nAyeni Olusegun.\n\n## License\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamraphson%2Fvue-ravepayment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamraphson%2Fvue-ravepayment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamraphson%2Fvue-ravepayment/lists"}