Shockinflux Payview Component for Vue 2.x

A Vue Plugin for Shockinflux-Payview Payment Gateway.

Demo

Install

NPM

npm install vue vue-shockinflux-payview --save

via CDN

<!-- Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<!-- Vue-shockinflux-payview -->
<script src="https://unpkg.com/[email protected]/dist/shockinflux.min.js"></script>

Usage

Via NPM/ Vue-cli

Usage Example via NPM or Yarn

shockinflux-payview.vue

<template>
  <ShockinfluxPayview
                :email="email"
                :amount="amount"
                currency="ngn"
                template="modern"
                language="en"
                action="float"
                :transactionid="transactionid"
                :storeid="storeid"
                :comment="comment"
                :callback="callback"
                :close="close"
    ><i>Pay Now!</i></ShockinfluxPayview>
</template>
<script type="text/javascript">
import ShockinfluxPayview from "vue-shockinflux-payview";
export default {
  components: {
    ShockinfluxPayview
  },
  data() {
    return {
          email: "[email protected]",
          amount: 10000,
          transactionid: "836327236732632671009",
          storeid: "g1xq8y87************9XBJbKXuZo+x3uqw=",
          comment: "This is a test",
    };
  },
  methods: {
    callback: function(response) {
      console.log(response);
    },
    close: function() {
      console.log("Payment closed");
    }
  }
};
</script>
<style>
.shockinflux-inline-btn {
  color: #04193d;
  width: 250px;
  height: 50px;
  font-weight: 800;
}
</style>

via CDN

Usage Example via CDN

new Vue({
  el: "#app",
  components: {
    ShockinfluxPayview: ShockinfluxPayview.default
  },
  methods: {
    callback: function(response) {
      console.log(response);
    },
    close: function() {
      console.log("Payment canceled");
    }
  },
  data: {
      email: "[email protected]",
      amount: 10000,
      transactionid: "836327236732632671009",
      storeid: "g1xq8y87************9XBJbKXuZo+x3uqw=",
      comment: "This is a test",
  }
});

with NUXT SSR(server-side rendering)

/plugins/vue-shockinflux-payview.js

import Vue from 'vue'
import ShockinfluxPayview from "vue-shockinflux-payview";
Vue.component('ShockinfluxPayview', ShockinfluxPayview);

/nuxt.config.js

  plugins: [{ src: "~plugins/vue-shockinflux", ssr: false }]

pay-test.vue

                    <shockinflux-payview
                        :email="email"
                        :amount="amount"
                        currency="ngn"
                        template="modern"
                        language="en"
                        action="float"
                        :transactionid="transactionid"
                        :storeid="storeid"
                        :comment="comment"
                        :callback="callback"
                        style-class="shockinflux-inline-btn"
                        :close="close"
                    ><i>Pay Now!</i></shockinflux-payview>

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b feature-name
3. Commit your changes: git commit -am 'Some commit message'
4. Push to the branch: git push origin feature-name
5. Submit a pull request 😋

Don't forget to give me a star and follow me on twitter!

Thanks! Adesoji Temitope.

License

This project is licensed under the MIT License - see LICENSE.md