update readme

iamraphson · Nov 3, 2017 · abe6e66 · abe6e66
1 parent a894190
commit abe6e66
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,139 @@
 # Paystack Component for Vue 2.x
+A Vue Plugin for Paystack payment gateway.
+
+###Demo
+
+![Demo Image](vue-paystack.png?raw=true "Demo Image")
+
+### Install
+
+#### NPM
+```
+npm install vue iamraphson/vue-paystack --save 
+``` 
+
+#### Javascript via CDN
+```javascript 1.8
+<!-- Vue -->
+<script src="https://unpkg.com/vue/dist/vue.js"></script>
+<!-- Vue-Paystack -->
+<script src="https://unpkg.com/vue-paystack/dist/paystack.min.js"></script>
+```
+
+### Usage
+
+#### Via NPM
+
+###### my-compnent.vue sample
+```vue
+<template>
+    <paystack
+        :amount="amount"
+        :email="email"
+        :paystackkey="paystackkey"
+        :reference="reference"
+        :callback="callback"
+        :close="close"
+    ></paystack>
+</template>
+
+<script type="text/javascript">
+import paystack from 'vue-paystack';
+export default {
+    components: {
+        paystack
+    },
+    data(){
+        return{
+          paystackBtnText: "Pay Me, My Money",
+          paystackkey: "pk_test_xxxxxxxxxxxxxxxxxxxxxxx", //paystack 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>
+```
+[Usage Example via NPM or Yarn](examples/commonjs/App.vue)
+#### via CDN
+```javascript 1.8
+new Vue({
+        el: '#app',
+        components:{
+          'paystack': VuePaystack.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: {
+          paystackBtnText: "Pay Me, My Money",
+          paystackkey: "pk_test_xxxxxxxxxxxxxxxxxxxxxx", //paystack public key
+          email: "foobar@example.com", // Customer email
+          amount: 1000000, // in kobo
+        }
+    });
+```
+[Usage Example via CDN](examples/index.html)
+
+Please checkout [Paystack Documentation](https://developers.paystack.co/docs/paystack-inline) 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
+
+
+
diff --git a/examples/commonjs/App.vue b/examples/commonjs/App.vue
@@ -15,7 +15,6 @@
 
 <script type="text/javascript">
 import paystack from '../../src';
-import axios from 'axios';
 export default {
     components: {
         paystack

diff --git a/examples/index.html b/examples/index.html
@@ -3,7 +3,7 @@
 <head>
     <title>Vue PayStack Example</title>
     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-    <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
+    <script src="https://unpkg.com/vue/dist/vue.js"></script>
     <script src="../dist/paystack.min.js"></script>
     <style>
     body {

diff --git a/package.json b/package.json
@@ -39,13 +39,10 @@
     "eslint-loader": "^1.7.1",
     "eslint-plugin-vue": "^2.0.1",
     "standard": "^10.0.3",
-    "vue": "^2.3.3",
-    "vue-loader": "^12.0.4",
-    "vue-template-compiler": "^2.3.3",
-    "webpack": "^2.5.1",
-    "webpack-dev-server": "^2.4.5"
-  },
-  "dependencies": {
-    "axios": "^0.17.0"
+    "vue": "^2.5.2",
+    "vue-loader": "^13.3.0",
+    "vue-template-compiler": "^2.5.2",
+    "webpack": "^3.8.1",
+    "webpack-dev-server": "^2.9.4"
   }
 }
diff --git a/vue-paystack.png b/vue-paystack.png