Merge pull request #9 from booluw/master

Customization with slot
somteacodes · May 27, 2024 · f6229c0 · f6229c0
2 parents 5b8f2bd + 5426339
commit f6229c0
Show file tree

Hide file tree

Showing 5 changed files with 9,164 additions and 7 deletions.
diff --git a/dev/serve.vue b/dev/serve.vue
@@ -12,6 +12,16 @@ export default defineComponent({
 
 <template>
   <div id="app">
+    <vue3-paystack buttonText="Hello Paynow">
+      <slot>
+        <img
+          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 buttonText="Vue Paystack without slot" /><br /><br />
     <vue3-paystack />
   </div>
 </template>
diff --git a/documentation/docs/guide/README.md b/documentation/docs/guide/README.md
@@ -94,25 +94,31 @@ export default {
 | `buttonText`           | `String`   | Displayed text for the button                                | `"Pay Now"`                                                             |
 | `publicKey` _required_ | `String`   | Public key from your paystack API                            |                                                                         |
 | `email` _required_     | `String`   | required                                                     |  
-| `firstname`             | `String`   |      | First name to be stored in your receipts|
-| `lastname`             | `String`   |      | Last name to be stored in your receipts|
 | `amount` _required_    | `Number`   | required                                                     |                                                                         |
 | `reference` _required_ | `String`   | a randomly generated code, made up of characters and numbers |                                                                         |
+| `firstname`             | `String`   |      | First name to be stored in your receipts|
+| `lastname`             | `String`   |      | Last name to be stored in your receipts|
 | `currency`             | `String`   | required                                                     | `"NGN"`                                                                 |
 | `onSuccess`            | `Function` |                                                              | `function() { console.log(response); }`                                 |
 | `onCancel`             | `Function` |                                                              | `function() { console.log("payment closed"); }`                         |
 | `channels`             | `Array`    |                                                              | `function() { return ["card", "bank", "ussd", "qr", "mobile_money"]; }` |
 | `metadata`             | `Object`   |                                                              | `{   "custom_fields":[{"display_name":"Cart Items",  "variable_name":"Invoice ID", "value":209}] }`                                             |
 | `label`                | `String`   |                                                              | `""`                                                                    |
 
+## Customization with slot
+
+Vue-paystack offers customization of the component using a single `slot`. This provides you the ability to fully customize how the button look to the user. Note that this overrides the `buttonText` props.
+
 ## Metadata (optional)
+
 The metadata prop is a good way to add additional information to information stored in your records.
-The meta data is of a JSON type and it has a reserved objecy key called `custom_fields`, that when used correctly displays nicely in your stored receipts. 
+The meta data is of a JSON type and it has a reserved objecy key called `custom_fields`, that when used correctly displays nicely in your stored receipts.
 
-Custom fields have 3 keys: `display_name`, `variable_name` and `value`. 
+Custom fields have 3 keys: `display_name`, `variable_name` and `value`.
 The display name will be the title for the value when displaying it on your receipts
 
 An example is
+
 ```
 "metadata":{
    "custom_fields":[
@@ -130,10 +136,10 @@ An example is
 }
 
 ```
+
 Custom fields used can be seen in your paystack dashboard
 ![Image](/images/metadata.png)
 
-
 <!-- ## Data
 
 | Name              | Type      | Description | Initial value |
@@ -159,6 +165,7 @@ payWithPaystack(): void
 ``` -->
 
 ## Other Considerations
+
 This is not an official plugin from [paystack](https://paystack.com/).
 
 You should defintely check out the official [paystack](https://paystack.com/developers) documentation for more information
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue3-paystack",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Paystack Plugin for Vue 3",
   "main": "dist/vue3-paystack.ssr.js",
   "browser": "dist/vue3-paystack.esm.js",

diff --git a/src/vue3-paystack.vue b/src/vue3-paystack.vue
@@ -143,7 +143,9 @@ export default /*#__PURE__*/defineComponent({
   <button 
   :disabled="!hasScriptLoaded"
   :class="buttonClass" @click="payWithPaystack">
-    <span>{{ buttonText }}</span>
+  <slot>
+    {{ buttonText }}
+  </slot>
   </button>
 </template>