first commit

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

.eslintrc

@@ -0,0 +1,8 @@
+{
+  "extends": "vue",
+   "rules": {
+     "space-before-function-paren": [2, "never"],
+      "indent": ["error",4],
+      "camelcase": [2, {"properties": "never"}]
+   }
+}

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+npm-debug.log
+.idea
+package-lock.json

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Ayeni Olusegun
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1 @@
+# Paystack Component for Vue 2.x

build/webpack.dev.js

@@ -0,0 +1,24 @@
+let path = require('path')
+let webpack = require('webpack')
+
+module.exports = {
+  entry: {
+    'paystack': './examples/commonjs/app.js'
+  },
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    publicPath: '/dist/',
+    filename: '[name].js'
+  },
+  module: {
+    rules: [{
+      test: /\.vue$/,
+      loader: 'vue-loader'
+    }, {
+      test: /\.js$/,
+      loader: 'babel-loader',
+      exclude: /node_modules/
+    }]
+  },
+  devtool: 'eval-source-map'
+}

build/webpack.dist.js

@@ -0,0 +1,45 @@
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  entry: {
+    'paystack': './src/index.js'
+  },
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    publicPath: '/dist/',
+    filename: '[name].min.js',
+    library: 'VuePaystack',
+    libraryTarget: 'umd',
+    umdNamedDefine: true
+  },
+  module: {
+    rules: [{
+      enforce: 'pre',
+      test: /\.(js|vue)$/,
+      exclude: /node_modules/,
+      loader: 'eslint-loader'
+    }, {
+      test: /\.vue$/,
+      loader: 'vue-loader'
+    }, {
+      test: /\.js$/,
+      loader: 'babel-loader',
+      exclude: /node_modules/
+    }]
+  },
+  plugins: [
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+      debug: false
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      sourceMap: true,
+      include: /\.min\.js$/,
+      compress: {
+        warnings: false
+      }
+    })
+  ],
+  devtool: 'source-map'
+}

examples/commonjs/App.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="App">
+        <p class="App-intro">
+            <paystack
+                :amount="amount"
+                :email="email"
+                :paystackkey="paystackkey"
+                :reference="reference"
+                :callback="callback"
+                :close="close"
+            ></paystack>
+        </p>
+    </div>
+</template>
+
+<script type="text/javascript">
+import paystack from '../../src';
+import axios from 'axios';
+export default {
+    components: {
+        paystack
+    },
+    data(){
+        return{
+          paystackBtnText: "Pay Me, My Money",
+          paystackkey: "pk_test_xxxxxxxxxxxxxxxxxxxxxxx",
+          email: "[email protected]",
+          amount: 1000000
+        }
+    },
+    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>
+<style>
+    .App {
+        text-align: center;
+    }
+
+    .App-intro {
+        font-size: large;
+    }
+    .payButton{
+        color: #61DAFB;
+        width: 250px;
+        height: 50px;
+        font-weight: 800;
+    }
+</style>

examples/commonjs/app.js

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+import App from './App.vue'
+new Vue({
+  render: h => h(App)
+}).$mount('#app')

examples/commonjs/index.html

@@ -0,0 +1,10 @@
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>vue-paystack</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="../../dist/paystack.js"></script>
+  </body>
+</html>

examples/index.html

@@ -0,0 +1,70 @@
+<html>
+
+<head>
+    <title>Vue PayStack Example</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
+    <script src="../dist/paystack.min.js"></script>
+    <style>
+    body {
+        font-size: 1em;
+        font-family: 'Tahoma', sans-serif;
+    }
+
+    .payButton{
+        color: #61DAFB;
+        width: 250px;
+        height: 50px;
+        font-weight: 800;
+    }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <paystack
+                :amount="amount"
+                :email="email"
+                :paystackkey="paystackkey"
+                :reference="reference"
+                :callback="callback"
+                :close="close"
+        ></paystack>
+    </div>
+
+    <script type="text/javascript">
+    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",
+          email: "[email protected]",
+          amount: 1000000,
+        }
+    });
+    </script>
+</body>
+
+</html>

package.json

@@ -0,0 +1,51 @@
+{
+  "name": "vue-paystack",
+  "version": "1.0.0",
+  "description": "Vue Paystack Component for Vue 2.x.",
+  "main": "dist/paystack.min.js",
+  "scripts": {
+    "lint": "eslint src --ext=js,vue  || exit 0",
+    "lint:fix": "eslint src --ext=js,vue --fix  || exit 0",
+    "dev": "webpack-dev-server --content-base ./examples/commonjs --env=webpack.dev --open --hot",
+    "dist": "webpack --env=webpack.dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/iamraphson/vue-paystack.git"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "PayStack",
+    "Vue",
+    "Vuejs",
+    "Vue 2",
+    "Payment Gateway"
+  ],
+  "author": "Ayeni Olusegun",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/iamraphson/vue-paystack/issues"
+  },
+  "homepage": "",
+  "devDependencies": {
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-preset-es2015": "^6.18.0",
+    "css-loader": "^0.28.1",
+    "eslint-config-vue": "^2.0.2",
+    "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"
+  }
+}

src/index.js

@@ -0,0 +1,3 @@
+import paystack from './paystack.vue'
+
+export default paystack