examples/index.html

<html>
  <head>
    <title>Vue Shockinflux Payview 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/dist/vue.js"></script>
    <script src="../dist/shockinflux.min.js"></script>
    <style>
      body {
        font-size: 1em;
        font-family: "Tahoma", sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <shockinflux-payview
                :email="email"
                :amount="amount"
                currency="ngn"
                template="modern"
                language="en"
                action="float"
                :transactionid="transactionid"
                :storeid="storeid"
                :comment="comment"
                :callback="callback"
                style-class="paymentbtn"
                :close="close"
      >
        <i class="fas fa-money-bill-alt"></i>
        Make Payment
      </shockinflux-payview>
    </div>

    <script type="text/javascript">
      new Vue({
        el: "#app",
        components: {
          ShockinfluxPayview: ShockinfluxPayview.default
        },
        methods: {
          callback: function(response) {
            console.log(response);
          },
          close: function() {
            console.log("Payment canceled");
          }
        },
        data: {
          email: "foobar@example.com",
          amount: 10000,
          transactionid: "836327236732632671009",
          storeid: "g1xq8y87************9XBJbKXuZo+x3uqw=",
          comment: "This is a test"
        }
      });
    </script>
  </body>
</html>