Vue-ravepayment NPM

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: "foobar@example.com",
          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: "foobar@example.com",
      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