0.0.4 • Published 30 days ago
vue-credo v0.0.4
Credo Component for Vue 3.x
A Vue Plugin for Credo payment gateway.
Demo
Install
NPM
npm install vue vue-credo --save
Javascript via CDN
<!-- Vue -->
<script src="https://unpkg.com/vue@next"></script>
<!-- Vue-Credo -->
<script src="https://unpkg.com/vue-credo/dist/credo.umd.min.js"></script>
Usage
Via NPM
my-compnent.vue sample
<template>
<credo
:amount="amount"
:email="email"
:credokey="credokey"
:reference="reference"
:callback="callback"
:close="close"
:embed="false"
>
<i class="fas fa-money-bill-alt"></i>
Make Payment
</credo>
</template>
<script type="text/javascript">
import credo from "vue-credo";
export default {
components: {
credo,
},
data() {
return {
credokey: "pk_test_xxxxxxxxxxxxxxxxxxxxxxx", //credo public key
email: "foobar@example.com", // 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");
},
},
};
</script>
via CDN
const app = Vue.createApp({
components: { PayStack: Credo.default },
setup() {
const credokey = Vue.ref("pk_test_xxxxxxxxxxxxxxxxxxxxxx");
const email = Vue.ref("foobar@example.com");
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,
credokey: credokey.value,
email: email.value,
amount: amount.value,
};
},
});
app.mount("#app");
Please checkout Credo Documentation for other available options you can add to the
Deployment
REMEMBER TO CHANGE THE KEY WHEN DEPLOYING ON A LIVE/PRODUCTION SYSTEM
Contributing
- Fork it!
- Create your feature branch:
git checkout -b feature-name
- Commit your changes:
git commit -am 'Some commit message'
- Push to the branch:
git push origin feature-name
- 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!
Thanks! Ayeni Olusegun.
License
This project is licensed under the MIT License - see the LICENSE.md file for details