From 0fbd1f46eaf75e43fbda78c7397977179eb52516 Mon Sep 17 00:00:00 2001
From: ygs07 <yusufgshehu@gmail.com>
Date: Tue, 26 Nov 2024 19:18:13 +0100
Subject: [PATCH 1/2] New Feature

Added basic validation to show missing props and added the option of a full custom slot for button
---
 dev/serve.vue         | 49 ++++++++++++++++++----
 src/vue3-paystack.vue | 95 +++++++++++++++++++++++++++----------------
 2 files changed, 103 insertions(+), 41 deletions(-)

diff --git a/dev/serve.vue b/dev/serve.vue
index e6f2091..78bf40c 100644
--- a/dev/serve.vue
+++ b/dev/serve.vue
@@ -1,12 +1,12 @@
 <script>
-import { defineComponent } from 'vue';
-import Vue3Paystack from '@/vue3-paystack.vue';
+import { defineComponent } from "vue";
+import Vue3Paystack from "@/vue3-paystack.vue";
 
 export default defineComponent({
-  name: 'ServeDev',
+  name: "ServeDev",
   components: {
-    Vue3Paystack
-  }
+    Vue3Paystack,
+  },
 });
 </script>
 
@@ -15,12 +15,47 @@ export default defineComponent({
     <vue3-paystack buttonText="Hello Paynow">
       <slot>
         <img
-          style="width: 40px;"
+          style="width: 40px"
           src="https://images.unsplash.com/photo-1575936123452-b67c3203c357?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D"
         />
         VuePaystack with slot
       </slot>
-    </vue3-paystack><br /><br />
+    </vue3-paystack>
+    <br />
+    <vue3-paystack>
+      <slot>
+        <button
+          style="
+            line-height: 100%;
+            text-decoration: none;
+            display: block;
+            max-width: 100%;
+            mso-padding-alt: 0px;
+            background-color: #3eaf7c;
+            border-radius: 6px;
+            color: #fff;
+            font-size: 18px;
+            padding-top: 19px;
+            padding-bottom: 19px;
+            text-align: center;
+            width: 100%;
+            padding: 19px 0px 19px 0px;
+          "
+          target="_blank"
+        >
+          <span
+            style="
+              max-width: 100%;
+              display: inline-block;
+              line-height: 120%;
+              mso-padding-alt: 0px;
+              mso-text-raise: 14.25px;
+            "
+            >Pay</span
+          >
+        </button>
+      </slot> </vue3-paystack
+    ><br /><br />
     <vue3-paystack buttonText="Vue Paystack without slot" /><br /><br />
     <vue3-paystack />
   </div>
diff --git a/src/vue3-paystack.vue b/src/vue3-paystack.vue
index 83ec684..e5edf34 100644
--- a/src/vue3-paystack.vue
+++ b/src/vue3-paystack.vue
@@ -1,9 +1,9 @@
 <script>
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 
-export default /*#__PURE__*/defineComponent({
-  name: 'Vue3Paystack', // vue component name
-   props: {
+export default /*#__PURE__*/ defineComponent({
+  name: "Vue3Paystack", // vue component name
+  props: {
     // styles
     buttonClass: {
       type: String,
@@ -23,7 +23,7 @@ export default /*#__PURE__*/defineComponent({
       type: String,
       required: true,
     }, //required
-     firstname: {
+    firstname: {
       type: String,
       default: "",
     },
@@ -45,25 +45,25 @@ export default /*#__PURE__*/defineComponent({
     },
     onSuccess: {
       type: Function,
-      default: function(response) {
+      default: function (response) {
         console.log(response);
       },
     },
     onCancel: {
       type: Function,
-      default: function() {
+      default: function () {
         console.log("payment closed");
       },
     },
     channels: {
       type: Array,
-      default: function() {
+      default: function () {
         return ["card", "bank", "ussd", "qr", "mobile_money"];
       },
     },
     metadata: {
       type: Object,
-      default: function() {
+      default: function () {
         return {};
       },
     },
@@ -71,33 +71,45 @@ export default /*#__PURE__*/defineComponent({
       type: String,
       default: "",
     },
- 
   },
   async created() {
-    this.mountScript()
-    .then(()=>{
-       this.hasScriptLoaded = true
-    })
+    this.mountScript().then(() => {
+      this.hasScriptLoaded = true;
+    });
   },
   data() {
     return {
-      hasScriptLoaded:false
-    }
+      hasScriptLoaded: false,
+      errorMessage: "",
+    };
   },
   methods: {
-    async mountScript( ) {
-     return new Promise((res,rej)=>{
+    async mountScript() {
+      return new Promise((res, rej) => {
         const script = document.createElement("script");
-      //  add script source
-      script.setAttribute("src", "https://js.paystack.co/v2/inline.js");
-      script.setAttribute("type", "text/javascript");
-      document.head.appendChild(script);
-      // check if script is ready
-       script.onload=()=>res()
-       script.onerror=()=>rej()
-     })
+        //  add script source
+        script.setAttribute("src", "https://js.paystack.co/v2/inline.js");
+        script.setAttribute("type", "text/javascript");
+        document.head.appendChild(script);
+        // check if script is ready
+        script.onload = () => res();
+        script.onerror = () => rej();
+      });
+    },
+    validateProps() {
+      // Check for missing required props
+      if (!this.publicKey) return "Paystack Public key prop is missing.";
+      if (!this.email) return "Paying customer email prop is missing.";
+      if (!this.amount) return "Amount prop is missing.";
+      if (!this.reference) return "Reference prop is missing.";
+      return ""; // No errors
     },
     payWithPaystack() {
+      this.errorMessage = this.validateProps();
+      if (this.errorMessage) {
+        // Prevent payment if there's an error
+        return;
+      }
       //  options
       const paymentOptions = {
         // general options
@@ -109,7 +121,7 @@ export default /*#__PURE__*/defineComponent({
         currency: this.currency,
         channels: this.channels,
         metadata: this.metadata,
-        label: this.label,        
+        label: this.label,
         firstname: this.firstname,
         lastname: this.lastname,
         onSuccess: (response) => {
@@ -140,14 +152,29 @@ export default /*#__PURE__*/defineComponent({
 </script>
 
 <template>
-  <button 
-  :disabled="!hasScriptLoaded"
-  :class="buttonClass" @click="payWithPaystack">
-  <slot>
-    {{ buttonText }}
-  </slot>
-  </button>
+  <div>
+    <div @click="payWithPaystack" v-bind="$attrs">
+      <slot>
+        <!-- Fallback button if no slot is provided -->
+        <button :disabled="!hasScriptLoaded" :class="buttonClass">
+          {{ buttonText }}
+        </button>
+      </slot>
+    </div>
+    <p v-if="errorMessage" class="error-text">{{ errorMessage }}</p>
+  </div>
 </template>
 
  
+<style scoped>
+.paystack-container {
+  position: relative;
+  display: inline-block;
+}
 
+.error-text {
+  color: red;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+}
+</style>

From ae3f25fe93356af99e0007fed75214d9ceed01a5 Mon Sep 17 00:00:00 2001
From: ygs07 <yusufgshehu@gmail.com>
Date: Tue, 26 Nov 2024 20:00:29 +0100
Subject: [PATCH 2/2] updated readme

---
 README.md | 71 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 68 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 0a48ddf..48aa59c 100644
--- a/README.md
+++ b/README.md
@@ -4,10 +4,41 @@ vue3-paystack allows you to accept payments in your vue application created with
 The component is easily customisable.
 
 ### NPM
+
 ```npm
 npm i vue3-paystack
 ```
+
 ## Usage
+
+```javascript
+<template>
+     <paystack
+        buttonClass="'button-class btn btn-primary'"
+        buttonText="Pay Online"
+        :publicKey="publicKey"
+        :email="email"
+        :amount="amount"
+        :reference="reference"
+        :onSuccess="onSuccessfulPayment"
+        :onCancel="onCancelledPayment">
+    </paystack>
+</template>
+
+ <script>
+import paystack from "vue3-paystack";
+
+export default {
+  components: {
+    paystack,
+  },
+}
+  </script>
+
+```
+
+## Usage With A custom button, you can fully customize the look of the pay button
+
 ```javascript
 <template>
      <paystack
@@ -19,6 +50,38 @@ npm i vue3-paystack
         :reference="reference"
         :onSuccess="onSuccessfulPayment"
         :onCancel="onCancelledPayment">
+
+<slot>
+        <button
+          style="
+            line-height: 100%;
+            text-decoration: none;
+            display: block;
+            max-width: 100%;
+            mso-padding-alt: 0px;
+            background-color: #f95738;
+            border-radius: 6px;
+            color: #fff;
+            font-size: 18px;
+            padding-top: 19px;
+            padding-bottom: 19px;
+            text-align: center;
+            width: 100%;
+            padding: 19px 0px 19px 0px;
+          "
+        >
+          <span
+            style="
+              max-width: 100%;
+              display: inline-block;
+              line-height: 120%;
+              mso-padding-alt: 0px;
+              mso-text-raise: 14.25px;
+            "
+            >Pay</span
+          >
+        </button>
+        </slot>
     </paystack>
 </template>
 
@@ -31,15 +94,17 @@ export default {
   },
 }
   </script>
- 
+
 ```
 
 ## Documentation
+
 A more detailed guide can be found [here](https://vue3paystack.netlify.app/)
 
 ## Want to say thanks?
-If this has been helpful, kindly share the link to other and a star on the github repo would be helpful too
 
+If this has been helpful, kindly share the link to other and a star on the github repo would be helpful too
 
 ## License
-Licensed under MIT License. [Click](https://github.com/somteacodes/vue3-paystack/blob/master/LICENSE.md) for details.
\ No newline at end of file
+
+Licensed under MIT License. [Click](https://github.com/somteacodes/vue3-paystack/blob/master/LICENSE.md) for details.