https://github.com/iamraphson/vue-paystack
Paystack Vue Plugin for Vue 2.X
https://github.com/iamraphson/vue-paystack
cdn payment payment-gateway paystack vuejs2
Last synced: 3 months ago
JSON representation
Paystack Vue Plugin for Vue 2.X
- Host: GitHub
- URL: https://github.com/iamraphson/vue-paystack
- Owner: iamraphson
- License: mit
- Created: 2017-11-02T18:12:36.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-12T15:23:41.000Z (almost 2 years ago)
- Last Synced: 2025-03-30T15:08:52.302Z (3 months ago)
- Topics: cdn, payment, payment-gateway, paystack, vuejs2
- Language: Vue
- Homepage: https://www.npmjs.com/package/vue-paystack
- Size: 399 KB
- Stars: 119
- Watchers: 3
- Forks: 45
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Paystack Component for Vue 3.x
A Vue Plugin for Paystack payment gateway.
### Demo
### Install
#### NPM
```
npm install vue vue-paystack --save
```
#### Javascript via CDN
```javascript 1.8
```
### Usage
#### Via NPM
###### my-compnent.vue sample
```vue
Make Payment
import paystack from "vue-paystack";
export default {
components: {
paystack,
},
data() {
return {
paystackkey: "pk_test_xxxxxxxxxxxxxxxxxxxxxxx", //paystack public key
email: "[email protected]", // Customer email
amount: 1000000, // in kobo
};
},
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");
},
},
};
```
[Usage Example via NPM or Yarn](examples/commonjs/App.vue)
#### via CDN
```javascript
const app = Vue.createApp({
components: { PayStack: Paystack.default },
setup() {
const paystackkey = Vue.ref("pk_test_xxxxxxxxxxxxxxxxxxxxxx");
const email = Vue.ref("[email protected]");
const amount = Vue.ref(1000000);
let reference = Vue.computed(() => {
let text = "";
let possible =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (let i = 0; i < 10; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
});
let callback = (response) => {
console.log({ response });
};
let close = () => {
console.log("payment closed");
};
return {
reference: reference,
callback: callback,
close: close,
paystackkey: paystackkey.value,
email: email.value,
amount: amount.value,
};
},
});
app.mount("#app");
```
[Usage Example via CDN](examples/index.html)
Please checkout [Paystack Documentation](https://paystack.com/docs/payments/accept-payments#popup) for other available options you can add to the
## Deployment
REMEMBER TO CHANGE THE KEY WHEN DEPLOYING ON A LIVE/PRODUCTION SYSTEM
## 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) file for details