https://github.com/iamraphson/vue-ravepayment
RavePay Vue Plugin for Vue 2.X
https://github.com/iamraphson/vue-ravepayment
cdn flutterwave payment payment-gateway ravepay vuejs2
Last synced: about 1 year ago
JSON representation
RavePay Vue Plugin for Vue 2.X
- Host: GitHub
- URL: https://github.com/iamraphson/vue-ravepayment
- Owner: iamraphson
- License: mit
- Created: 2018-01-07T20:18:58.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-12-04T20:08:35.000Z (over 6 years ago)
- Last Synced: 2025-02-28T02:10:08.176Z (about 1 year ago)
- Topics: cdn, flutterwave, payment, payment-gateway, ravepay, vuejs2
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/vue-ravepayment
- Size: 498 KB
- Stars: 33
- Watchers: 2
- Forks: 13
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Rave Payment Component for Vue 2.x
A Vue Plugin for RavePay Payment Gateway.
### Demo
### Install
##### NPM
```
npm install vue vue-ravepayment --save
```
##### Javascript via CDN
```javascript
```
### Usage
##### Via NPM
###### my-compnent.vue sample
```vue
Pay Me, My Money
import Rave from 'vue-ravepayment';
export default {
components: {
Rave
},
data(){
return{
raveKey: "FLWPUBK-xxxxxxxxxxxxxxxxxx-X",
email: "foobar@example.com",
amount: 8000,
plan: 2928,
fname: "Adewale",
lname: "Ayuba",
redirect: "https://google.com",
meta: [{
metaname: 'school',
metavalue: 'high school'
}],
sub: [
{
id: "1324"
},
{
id: "1221"
}
]
}
},
computed: {
reference(){
let text = "";
let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( let i=0; i < 10; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
},
methods: {
callback: function(response){
console.log(response)
},
close: function(){
console.log("Payment closed")
}
}
}
.paymentbtn{
color: #04193d;
width: 250px;
height: 100px;
font-weight: 800;
}
```
[Usage Example via NPM or Yarn](examples/commonjs/App.vue)
#### via CDN
```javascript
new Vue({
el: '#app',
components:{
'Rave': VueRavePayment.default
},
computed: {
reference(){
let text = "";
let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( let i=0; i < 10; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
},
methods: {
callback: function(response){
console.log(response)
},
close: function(){
console.log("Payment closed")
}
},
data: {
raveBtnText: "Pay Me, My Money",
raveKey: "FLWPUBK-xxxxxxxxxxxxxxxxx-X",
email: "foobar@example.com",
amount: 10000
}
});
```
[Usage Example via CDN](examples/index.html)
Please checkout [Rave Documentation](https://flutterwavedevelopers.readme.io/v1.0/reference#introduction) for other available options you can add to the tag
## Deployment
WHEN DEPLOYING TO PRODUCTION/LIVE SYSTEM, take note of the following;
1) Change `is-production` attribute in the component tag to `true` i.e `:is-production="true"`
2) Change RavePay PUBLIC KEY
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b feature-name`
3. Commit your changes: `git commit -am 'Some commit message'`
4. Push to the branch: `git push origin feature-name`
5. Submit a pull request 😉😉
## How can I thank you?
Why 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!
Don't forget to [follow me on twitter](https://twitter.com/iamraphson)!
Thanks!
Ayeni Olusegun.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details