iamraphson / vue-ravepayment

RavePay Vue Plugin for Vue 2.X

Rave Payment Component for Vue 2.x

A Vue Plugin for RavePay Payment Gateway.

Demo

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

vue-ravepayment's Issues

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.

Test api uri

Hello the test api uri is not working in development mode i would love to contribute to fix it.thanks