RavePay Vue Plugin for Vue 2.X

Overview

Rave Payment Component for Vue 2.x

A Vue Plugin for RavePay Payment Gateway.

Demo

Demo Image

Install

NPM
npm install vue vue-ravepayment --save 
Javascript via CDN
<!-- Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- Vue-Rave -->
<script src="https://unpkg.com/vue-ravepayment/dist/rave.min.js"></script>

Usage

Via NPM
my-compnent.vue sample
<template>
     <Rave
       style-class="paymentbtn"
       :email="email"
       :amount="amount"
       :reference="reference"
       :rave-key="raveKey"
       :callback="callback"
       :close="close"
       :metadata="meta"
       :subaccounts="subaccounts"
       :redirectUrl="redirect"
       :paymentPlan="plan"
       :customerFirstname="fname"
       :customerLastname="lname"
       paymentOptions="card,barter,account,ussd"
       hostedPayemt="1"
       customTitle="Testing title"
       currency="NGN"
       country="NG"
   ><i>Pay Me, My Money</i></Rave>
</template>
<script type="text/javascript">
import Rave from 'vue-ravepayment';
export default {
    components: {
        Rave
    },
    data(){
        return{
          raveKey: "FLWPUBK-xxxxxxxxxxxxxxxxxx-X",
          email: "[email protected]",
          amount: 8000,
          plan: 2928,
          fname: "Adewale",
          lname: "Ayuba",
          redirect: "https://google.com",
          meta: [{
            metaname: 'school',
            metavalue: 'high school'
          }],
          sub: [
            {
            id: "1324"
          },
          {
            id: "1221"
          }
          ]
        }
    },
    computed: {
      reference(){
        let text = "";
        let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 
        for( let i=0; i < 10; i++ )
          text += possible.charAt(Math.floor(Math.random() * possible.length));
 
        return text;
      }
    },
    methods: {
      callback: function(response){
        console.log(response)
      },
      close: function(){
        console.log("Payment closed")
      }
    }
}
</script>
<style> 
    .paymentbtn{
        color: #04193d;
        width: 250px;
        height: 100px;
        font-weight: 800;
    }
</style>

Usage Example via NPM or Yarn

via CDN

new Vue({
    el: '#app',
    components:{
      'Rave': VueRavePayment.default
    },
    computed: {
        reference(){
          let text = "";
          let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

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

          return text;
        }
    },
    methods: {
      callback: function(response){
        console.log(response)
      },
      close: function(){
        console.log("Payment closed")
      }
    },
    data: {
      raveBtnText: "Pay Me, My Money",
      raveKey: "FLWPUBK-xxxxxxxxxxxxxxxxx-X",
      email: "[email protected]",
      amount: 10000
    }
});

Usage Example via CDN

Please checkout Rave Documentation for other available options you can add to the tag

Deployment

WHEN DEPLOYING TO PRODUCTION/LIVE SYSTEM, take note of the following;

  1. Change is-production attribute in the component tag to true i.e :is-production="true"
  2. Change RavePay PUBLIC KEY

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 😉 😉

How can I thank you?

Why not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter or Any Social Media? Spread the word!

Don't forget to follow me on twitter!

Thanks! Ayeni Olusegun.

License

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

You might also like...
数蛙DG-IoT平台行业应用扩展插件 DG-IoT for application plugin
数蛙DG-IoT平台行业应用扩展插件 DG-IoT for application plugin

dgiot_dashboard dgiot Front framemaker 简体中文 | English Related source code address project source code Source code platform Source address github https

Todo plugin for Zuri Chat

ZURI.CHAT TODO PLUGIN Stack Laravel and VueJs To install dependencies You need to composer installed, after installing composer composer install whi

LNbits rewritten in Go with a simple and permissionless Lua-based plugin framework.
LNbits rewritten in Go with a simple and permissionless Lua-based plugin framework.

LNbits Infinity (BETA) Free Open-Source Lightning Accounts System with Extensions For the Python version of LNbits checkout Legend. Demo servers avail

Editable demo and code plugin for vuepress
Editable demo and code plugin for vuepress

The plugin is used to help you add vue examples when writing a document. Using this plugin, your users can easily modify your examples. With the editable functions your user can understand your example better.

A more configurable plugin for laravel-mix and eslint

Laravel Mix Eslint Config This is a modified/extended version of laravel-mix-eslint -- which allows for more customization, or you can just use the de

This Project will be a generic plugin-manager. It will be multi-os and multi-platform.
This Project will be a generic plugin-manager. It will be multi-os and multi-platform.

This Project will be a generic plugin-manager. It will be multi-os and multi-platform. Basic Sources will be defined, but the user should be able to add Sources of the plugins.

A Google plugin for managing to-do lists.
A Google plugin for managing to-do lists.

Todo List - 任务清单 ✅ 一个本地化的任务清单管理工具(A concise localization task list management tool)。 📦 无需登录,开箱即用 ⚡️ 本地持久化管理,无需等待网络延迟 ⏰ 实时角标提醒待完成任务数量 🎉 任务自定义拖拽排列 ⬇️

A small plugin for Frappe that adds the support of customizations to the attach control.

Frappe Better Attach Control A small plugin for Frappe that adds the support of customizations to the attach control. Table of Contents Requirements S

A basic setup for Vue.js project . vuex, vuex-persistedstate, vue-router , vue-resource , sweetalert2.

Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and fixes

Comments
  • Problem with callback

    Problem with callback

    Hi, thanks for this great wrapper. I'm getting an error caused by not receiving the reference generated on the front-end in the callback. The call back basically isn't receiving any reference.

    I'm working in the test mode, and I see on the receipt generated that the reference looks something like this FLW-MOCK-90bec9e9cb99b5e5605c478c0dc48675

    Also, I see that after test card data has been submitted, the modal popup generates a link to complete a verification, the link has FLW-MOCK-90bec9e9cb99b5e5605c478c0dc48675 in the URL.

    It says payment successful after completing the external form. However, I'm unable to process value for the payment on my app because the reference doesn't come in after the modal says payment successful.

    Any idea, what is going on. I'm processing in USD, although I tested NGN it's the same issue.

    Thanks.

    opened by bigfielddigital 5
Releases(v2.0.1)
  • v2.0.1(Feb 28, 2019)

    • dep update bf1b3a9
    • major upgrade 60f9237
    • Merge pull request #4 from yomete/change-name efdff21
    • Changed Paystack to Rave ea032a1
    • upgrade webpack and eslint fc6c049
    • Merge pull request #3 from temiadesina/newgetpaid-options e8b3e5a
    • added new options for the getpaidSetup 9e2cb02
    • update test inline js script 0b25b42
    • update reademe.md 047f998
    • update reademe 192a1f4
    • fix typo 423aeee
    • update readme 7412d86

    https://github.com/iamraphson/vue-ravepayment/compare/59c11f993f1d9639fe79bdcdecf3f751050f0fb0...v2.0.1

    Source code(tar.gz)
    Source code(zip)
Owner
Olusegun Ayeni
Senior Software Engineer.
Olusegun Ayeni
🚀 Lanyard API plugin for Vue to easily track your Discord status. Supports REST and WebSocket methods.

?? Lanyard API plugin for Vue to easily track your Discord status. Supports REST and WebSocket methods.

EGGSY 30 Sep 3, 2022
A simple unopinionated Vue plugin for managing user roles and permissions, access-control list (ACL) and role-based access control (RBAC).

Vue Simple ACL A simple unopinionated Vue plugin for managing user roles and permissions, access-control list (ACL) and role-based access control (RBA

Victory Osayi 86 Dec 24, 2022
v-onboarding is a super-slim, fully-typed onboarding plugin for Vue 3

v-onboarding is a super-slim, fully-typed onboarding plugin for Vue 3

Fatih Solhan 87 Dec 23, 2022
🔌 A simple Vue plugin for Fathom Analytics

vue-fathom A simple Vue plugin for Fathom Analytics. npm i -s @ubclaunchpad/vue-fathom import Vue from 'vue'; import VueFathom from '@ubclaunchpad/vue

UBC Launch Pad 2 Dec 12, 2022
A feature-rich Portal Plugin for Vue 2, for rendering DOM outside of a component, anywhere in your app or the entire document.

PortalVue A Portal Component for Vuejs, to render DOM outside of a component, anywhere in the document. For more detailed documentation and additional

Thorsten Lünborg 3.7k Jan 6, 2023
Vue-quasar-template - Initial template of an app using vuejs and quasar-ui plugin

vue-template Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Li

Joseph 0 Jan 1, 2022
A lightweight fully fledged Vue.js sprite-sheet animation render engine in a compact SFC plugin format

A lightweight fully fledged Vuejs sprite-sheet animation render engine in a compact SFC plugin format

Vincenzo Buono 5 Jul 30, 2022
seikatsu nft website. built with vue deployed with firebase. includes a metamask plugin extension injects the Ethereum web3 API into every website's javascript context, so this dapp can read from the blockchain

seikatsu nft website. built with vue deployed with firebase. includes a metamask plugin extension injects the Ethereum web3 API into every website's javascript context, so this dapp can read from the blockchain

Alisha Husain 2 Sep 28, 2022
A Vue Plugin for Paystack payment gateway

A Vue Plugin for Paystack payment gateway

t0nto 8 Oct 1, 2022
A vue plugin for Stripe checkout.

Vue Stripe Checkout Welcome to the Vue Stripe Checkout 3! This version is still incomplete, but please let me know what's missing or what you're expec

Taylor Brown 0 Jan 10, 2021