From 8235fb955390fffc72073f3089fd00f2f23102d2 Mon Sep 17 00:00:00 2001
From: gift <geezyenyoghasim@gmail.com>
Date: Sat, 8 May 2021 17:06:25 +0100
Subject: [PATCH] feat : added a customization feel to the paystack component
 so that a person can input his or her own custom button in the vue-paystack
 with custom css since it is difficult to overide the default style of the
 payButton

---
 examples/commonjs/App.vue | 111 ++++++++++++++++++++++++--------------
 examples/commonjs/app.js  |   2 +-
 src/paystack.vue          |  22 ++++++--
 3 files changed, 89 insertions(+), 46 deletions(-)

diff --git a/examples/commonjs/App.vue b/examples/commonjs/App.vue
index db64fa6..5e9d179 100644
--- a/examples/commonjs/App.vue
+++ b/examples/commonjs/App.vue
@@ -1,24 +1,53 @@
 <template>
-    <div class="App">
-        <p class="App-intro">
-            <paystack
-                :amount="amount"
-                :email="email"
-                :firstname="firstname"
-                :lastname="lastname"
-                :accessCode="accessCode"
-                :splitCode="splitCode"
-                :split="split"
-                :paystackkey="paystackkey"
-                :reference="genReference"
-                :callback="callback"
-                :close="close"
-                :embed="false"
-            >
-                <i>Pay me, My Money</i>
-            </paystack>
-        </p>
-    </div>
+  <div class="App">
+    <p class="App-intro">
+      <paystack
+        :amount="amount"
+        :email="email"
+        :firstname="firstname"
+        :lastname="lastname"
+        :accessCode="accessCode"
+        :splitCode="splitCode"
+        :split="split"
+        :paystackkey="paystackkey"
+        :reference="genReference"
+        :callback="callback"
+        :close="close"
+        :embed="false"
+      >
+        <i>Pay me, My Money</i>
+      </paystack>
+      <paystack
+        :amount="amount"
+        :email="email"
+        :firstname="firstname"
+        :lastname="lastname"
+        :accessCode="accessCode"
+        :splitCode="splitCode"
+        :split="split"
+        :paystackkey="paystackkey"
+        :reference="genReference"
+        :callback="callback"
+        :close="close"
+        :embed="false"
+        :custombutton="true"
+      >
+        <button
+          style="
+            border-radius: 5px;
+            color: white;
+            padding: 15px;
+            background: crimson;
+            border: 1px solid;
+            cursor: pointer;
+            margin: 20px;
+        "
+        >
+          PAY WITH CUSTOM BUTTON
+        </button>
+      </paystack>
+    </p>
+  </div>
 </template>
 
 <script type="text/javascript">
@@ -29,34 +58,34 @@ export default {
     },
     data(){
         return{
-          paystackkey: "pk_test_xxxxxxxxxxxxxxxxxxxxxxx",
-          firstname: "Foo",
-          lastname: "Bar",
-          email: "foo@bar.com",
-          amount: 200000,
-          splitCode: "",
-          split: {},
-          channels: ['card']
+            paystackkey: "pk_test_xxxxxxxxxxxxxxxxxxxxxxx",
+            firstname: "Foo",
+            lastname: "Bar",
+            email: "foo@bar.com",
+            amount: 200000,
+            splitCode: "",
+            split: {},
+            channels: ['card']
         }
     },
     computed: {
-      genReference(){
-        let text = "";
-        let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+        genReference(){
+            let text = "";
+            let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 
-        for( let i=0; i < 10; i++ )
-          text += possible.charAt(Math.floor(Math.random() * possible.length));
+            for( let i=0; i < 10; i++ )
+                text += possible.charAt(Math.floor(Math.random() * possible.length));
 
-        return text;
-      }
+            return text;
+        }
     },
     methods: {
-      callback: function(response){
-        console.log(response)
-      },
-      close: function(){
-          console.log("Payment closed")
-      }
+        callback: function(response){
+            console.log(response)
+        },
+        close: function(){
+            console.log("Payment closed")
+        }
     }
 }
 </script>
diff --git a/examples/commonjs/app.js b/examples/commonjs/app.js
index ca668ea..c9f6154 100644
--- a/examples/commonjs/app.js
+++ b/examples/commonjs/app.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
 import App from './App.vue'
 new Vue({
-  render: h => h(App)
+    render: h => h(App)
 }).$mount('#app')
diff --git a/src/paystack.vue b/src/paystack.vue
index 57f9c21..2f2312c 100644
--- a/src/paystack.vue
+++ b/src/paystack.vue
@@ -1,11 +1,21 @@
 <template>
-  <button
+  <div
     v-if="!embed"
-    class="payButton"
+    class="payContainer"
     @click="payWithPaystack"
   >
-    <slot>Make Payment</slot>
-  </button>
+    <slot v-if="custombutton" />
+    <button
+      v-if="!custombutton"
+      class="payButton"
+    >
+      <slot
+        v-if="!custombutton"
+      >
+        Make Payment
+      </slot>
+    </button>
+  </div>
   <div
     v-else
     id="paystackEmbedContainer"
@@ -15,6 +25,10 @@
 <script type="text/javascript">
 export default {
     props: {
+        custombutton: {
+            type:Boolean,
+            default : false
+        },
         embed: {
             type: Boolean,
             default: false