example: add another example using vue Object api

copy-ninja1 · copy-ninja1 · commit 7fab0bb3a4e0 · 2021-09-25T20:42:07.000+01:00
diff --git a/examples/index.example2.html b/examples/index.example2.html
@@ -0,0 +1,66 @@
+<!-- Paystack example using Vue Object api -->
+<html>
+
+<head>
+    <title>Vue PayStack Example</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
+        integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
+    <script src="https://unpkg.com/vue@next"></script>
+    <script src="../dist/paystack.umd.min.js"></script>
+    <style>
+        body {
+            font-size: 1em;
+            font-family: 'Tahoma', sans-serif;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <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
+        </pay-stack>
+    </div>
+
+    <script type="text/javascript">
+        const paystackExample = {
+            data() {
+                return {
+
+                    paystackkey: "pk_test_xxxxxxxxxxxxxxxxxxxxxx",
+                    email: "foobar@example.com",
+                    amount: 1000000,
+                }
+            },
+            components: {
+                'PayStack': Paystack.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")
+                }
+            },
+
+        };
+        Vue.createApp(paystackExample).mount('#app')
+    </script>
+</body>
+
+</html>
diff --git a/examples/index.html b/examples/index.html
@@ -1,3 +1,4 @@
+<!-- Paystack example using Vue composition api -->
 <html>
 
 <head>

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+<!-- Paystack example using Vue composition api -->`
`1`	`2`	`<html>`
`2`	`3`
`3`	`4`	`<head>`