vue-shockinflux-payview v1.7.2

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/vue-shockinflux-payview@1.7.2/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: "foobar@example.com",
      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: "foobar@example.com",
    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