iamraphson · BarnabasAsha · Mar 16, 2023 · Mar 16, 2023 · Mar 16, 2023 · Mar 16, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -27,7 +27,12 @@ npm install vue vue-paystack --save
 
 #### Via NPM
 
-###### my-compnent.vue sample
+This library can be implemented in 2 different ways:
+1. By using the component provided by the library
+2. By using the composable provided by the library (For vue versions earlier than 2.7 you would need to install the composition api plugin)
+
+##### Using the Component
+###### my-component.vue sample
 
 ```vue
 <template>
@@ -84,6 +89,54 @@ export default {
 
 [Usage Example via NPM or Yarn](examples/commonjs/App.vue)
 
+##### Using the Composable
+###### my-component-two.vue sample
+
+```vue
+<template>
+  <div class="App">
+    <p class="App-intro">
+      <button @click="handlePayWithPaystack">Pay with paystack</button>
+    </p>
+  </div>
+</template>
+
+<script type="text/javascript">
+import usePaystackPayment from "../../src";
+export default {
+  setup() {
+    const paystackArgs = {
+      paystackkey: "pk_test_a137d402b5975716e89952a898aad2832c961d69",
+      email: "foobar@example.com",
+      amount: 1000000,
+      reference: "PayXYZ344234",
+    };
+
+    const payWithPaystack = usePaystackPayment(paystackArgs);
+
+    const callback = (response) => {
+      console.log(response);
+    };
+
+    const close = () => {
+      console.log("Payment closed");
+    };
+
+    const handlePayWithPaystack = () => {
+      payWithPaystack(callback, close);
+    };
+
+    return {
+      handlePayWithPaystack,
+    };
+  },
+};
+</script>
+```
+
+[Usage Example via NPM or Yarn](examples/commonjs/AppTwo.vue)
+
+
 #### via CDN
 
 ```javascript

diff --git a/dist/paystack.umd.min.js b/dist/paystack.umd.min.js
diff --git a/examples/commonjs/AppTwo.vue b/examples/commonjs/AppTwo.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="App">
+    <p class="App-intro">
+      <button @click="handlePayWithPaystack">Pay with paystack</button>
+    </p>
+  </div>
+</template>
+
+<script type="text/javascript">
+import usePaystackPayment from "../../src";
+
+export default {
+  setup() {
+    const paystackArgs = {
+      paystackkey: "pk_test_a137d402b5975716e89952a898aad2832c961d69",
+      email: "foobar@example.com",
+      amount: 1000000,
+      reference: "PayXYZ344234",
+    };
+
+    const payWithPaystack = usePaystackPayment(paystackArgs);
+
+    const callback = (response) => {
+      console.log(response);
+    };
+
+    const close = () => {
+      console.log("Payment closed");
+    };
+
+    const handlePayWithPaystack = () => {
+      payWithPaystack(callback, close);
+    };
+
+    return {
+      handlePayWithPaystack,
+    };
+  },
+};
+</script>
+<style>
+.App {
+  text-align: center;
+}
+
+.App-intro {
+  font-size: large;
+}
+.payButton {
+  color: #61dafb;
+  width: 250px;
+  height: 50px;
+  font-weight: 800;
+}
+</style>
diff --git a/examples/index.html b/examples/index.html
@@ -18,7 +18,7 @@
 
 <body>
   <div id="app">
-    <pay-stack :amount="amount" :email="email" :paystackkey="paystackkey" :reference="reference" :callback="callback"
+    <pay-stack :amount="amount" :email="email" :paystackKey="paystackkey" :reference="reference" :callback="callback"
       :close="close" :embed="false" />
     <i class="fas fa-money-bill-alt"></i>
     Make Payment

diff --git a/lib/index.js → lib/index.ts b/lib/index.js → lib/index.ts
@@ -1,3 +1,4 @@
 import Paystack from "./paystack.vue";
+export { default as usePaystackPayment } from "./use-paystack";
 
 export default Paystack;
diff --git a/lib/paystack-script.ts b/lib/paystack-script.ts
@@ -0,0 +1,63 @@
+import { ref, onUnmounted, reactive, onBeforeMount } from "vue";
+
+const cachedScripts: string[] = [];
+interface IScriptResult {
+  scriptLoaded: boolean;
+  scriptError: boolean;
+}
+
+export default function usePaystackScript(): IScriptResult {
+  const src = "https://js.paystack.co/v1/inline.js";
+
+  const scriptState = reactive<IScriptResult>({
+    scriptLoaded: false,
+    scriptError: false,
+  });
+
+  const script = ref<HTMLScriptElement>();
+
+  const onScriptLoad = (): void => {
+    scriptState.scriptLoaded = true;
+  };
+
+  const onScriptError = (): void => {
+    const index = cachedScripts.indexOf(src);
+    if (index >= 0) cachedScripts.splice(index, 1);
+    script.value && script.value.remove();
+
+    scriptState.scriptError = true;
+  };
+
+  const handleLoadScript = () => {
+    if (cachedScripts.includes(src)) {
+      scriptState.scriptLoaded = true;
+    } else {
+      cachedScripts.push(src);
+
+      const scriptElement = document.createElement("script");
+      script.value = scriptElement;
+
+      script.value.src = src;
+      script.value.async = true;
+
+      script.value.addEventListener("load", onScriptLoad);
+      script.value.addEventListener("complete", onScriptLoad);
+      script.value.addEventListener("error", onScriptError);
+
+      document.body.appendChild(script.value);
+    }
+  };
+
+  onBeforeMount(() => {
+    handleLoadScript();
+  });
+
+  onUnmounted(() => {
+    if (script.value) {
+      script.value.removeEventListener("load", onScriptLoad);
+      script.value.removeEventListener("error", onScriptError);
+    }
+  });
+
+  return scriptState;
+}