Vue Shockinflux Payview Component for Vue 2.x.

Overview

Shockinflux Payview Component for Vue 2.x

A Vue Plugin for Shockinflux-Payview Payment Gateway.

Demo

Demo Image

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

You might also like...
🚀🚀🚀vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)
🚀🚀🚀vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)

🚀🚀🚀vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)

🚀🚀🚀Vue3,Vue3.0,Vue,Vue3.x,Vuex,Typescript,TSX,ts,vue后台管理,admin,vue-admin,vue3-admin,vue-element-admin,iooc-admin,iooc-vue-admin主线版本基于element-plus、Typescript开发维护.集成CRUD,JsonSchema、大量节省业务代码.
🚀🚀🚀Vue3,Vue3.0,Vue,Vue3.x,Vuex,Typescript,TSX,ts,vue后台管理,admin,vue-admin,vue3-admin,vue-element-admin,iooc-admin,iooc-vue-admin主线版本基于element-plus、Typescript开发维护.集成CRUD,JsonSchema、大量节省业务代码.

iooc-admin(element-plus) 演示地址(数据库五分钟重置一次) ⚡️ vue3.x + element-plus + TypeScript ⚡️ vue3.x + element-plus + TypeScript (视频) 项目地址 ⚡️ vue3.x + element-pl

Vue3 admin,ant design vue pro,vue admin,vue vite admin,ant design pro
Vue3 admin,ant design vue pro,vue admin,vue vite admin,ant design pro

Ant Design Vue Pro An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on Ant Design of Vue 基于 Vite2 Vue3 Ant-Design-of-

A dead simple but powerful vue admin with Vue CLI 3 and ElementUI.
A dead simple but powerful vue admin with Vue CLI 3 and ElementUI.

Element Admin A dead simple but powerful vue admin with Vue CLI 3 and ElementUI. This project is built by a magic vue cli plugin - @codetrial/vue-cli-

A dashboard scaffolding based on Vue.js created by Vue CLI.

dashboard A dashboard scaffolding based on Vue.js. Features Type annotation enhancement by JSDoc Access control by route interception Vuex (modules, p

✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0,  ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...
✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus 的后台管理系统vue3-element-admin

vue3-element-admin 🎉 基于 Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus 的后台管理系统 简介 vue3-element-admin 是一个后台前端解决方案,它基于 vue3 和 element-plu

Star Admin Vue Admin Template is a free admin template based on Bootstrap 4 and Vue.js.
Star Admin Vue Admin Template is a free admin template based on Bootstrap 4 and Vue.js.

Star Admin Vue Admin is a free admin template based on Bootstrap 4 and Vue.js.

🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus + typescript 的后台管理系统vue3-element-admin-ts

vue3-element-admin-ts 🎉 基于 Vite 2.0 + Vue 3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统 简介 vue3-element-admin 是一个后台前端解决方案,它基于 v

Owner
Temitope Adesoji
Temitope Adesoji
Component library based on Vue and Tailwind

Component library based on Vue and Tailwind Documentation For full documentation, visit Documentation. Libraries The following libraries are being use

Solfacil 30 Dec 30, 2022
🛠A Dark Style Component Library for Vue.js

English | 简体中文 Cyberpunk Vue This project is under development, the API may be upgraded and changed, please do not apply it to production projects for

Cyberpunk UI 44 Sep 21, 2022
Lxr-ui - A Vue 3 Component Library for Building LeanIX Custom Reports

Lxr-UI Lxr-UI is a Vue 3 Component Library for Building LeanIX Custom Reports. E

null 0 Jan 10, 2022
A vue component which displays text in typing/writing style

vue-autowrite Purpose This is a vue component which displays text in typing/writing style.

Shaik Tabrez 0 Sep 28, 2020
⚡️ Inertable Vue Component

INSTALATION npm install @rizkhal/inertable-vue BASIC USAGE <script setup> defineProps({ inertable: Object, }); </script> <template> <div>

Rizkhal 2 Oct 26, 2022
Vue component for hinting addresses using dadata.ru

Vue Dadata It's a vue component for hinting addresses using DaData.ru. Version Description 1.*.* Old version for vue2 2.*.* New version for vue2 3.*.*

Ivan Monastyrev 22 Nov 26, 2022
Component for fast creating dynamical components.

vue-dynamic-component (ru) Component for fast creating dynamical components. This component can help for fast migrate from pjax to vue Usage import vu

Alexandr 6 May 11, 2019
Component library based on velocity UI kit by InVision

======= vue-velocity Components library based on velocity UI kit by InVision : https://www.invisionapp.com/inside-design/design-resources/design-syste

François CORNUAUD 45 Jul 10, 2022
The UiSwitch component is a flexible alternative to the non existing but widely used "switch" type input.

UiSwitch The UiSwitch component is a flexible alternative to the non existing but widely used "switch" type input. Features ✨ Vue 3 Fully accessible E

null 3 Dec 30, 2021
Ipeng-watermark - A watermark component based on vue3

ipeng-watermark Introduction: A watermark component based on vue3 Installation:

ipeng 1 Jan 5, 2022