examples/index.html

<!-- Paystack example using Vue composition 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>
    const app = Vue.createApp({
      components: { 'PayStack': Paystack.default, },
      setup() {

        const paystackkey = Vue.ref("pk_test_xxxxxxxxxxxxxxxxxxxxxx")
        const email = Vue.ref("foobar@example.com")
        const amount = Vue.ref(1000000)
        let reference = Vue.computed(() => {
          let text = "";
          let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

          for (let i = 0; i < 10; i++)
            text += possible.charAt(Math.floor(Math.random() * possible.length));

          return text;
        })
        let callback = (response) => {
          console.log('this is a callback',{ response })
        };
        let close = () => {
          console.log('payment closed')
        };
        return {
          reference: reference,
          callback: callback,
          close: close,
          paystackkey: paystackkey.value,
          email: email.value,
          amount: amount.value,
        }
      }

    })

    app.mount('#app')

  </script>
</body>

</html>