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