CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-router
Nitish Kumar
Nitish Kumar

Reputation: 6296

Passing props data in vuejs

I'm trying to build a small e-commerce project on VUE Js where I'm integrating through a payment gateway, third party vendor gave me a checksum function which is being utilized to get the value and should be passed from the HTML form, so I am having a function which is taking all the neccessary variables and passing to other form in a different component via props.

So my code looks like:

checkout() {
    var paramarray = {};
    paramarray['MID'] = MID; //Provided by Paytm
    paramarray['ORDER_ID'] = 'ORDER070913489845456'; //unique OrderId for every request
    paramarray['CUST_ID'] = 'CUST000145';  // unique customer identifier
    paramarray['INDUSTRY_TYPE_ID'] = INDUSTRY_TYPE_ID; //Provided by Paytm
    paramarray['CHANNEL_ID'] = CHANNEL_ID; //Provided by Paytm
    paramarray['TXN_AMOUNT'] = '1.00'; // transaction amount
    paramarray['WEBSITE'] = WEBSITE; //Provided by Paytm
    paramarray['CALLBACK_URL'] = 'https://www.paytm.com';//Provided by Paytm
    paramarray['EMAIL'] = '[email protected]'; // customer email id
    paramarray['MOBILE_NO'] = '9999999999'; // customer 10 digit mobile no.

    var PAYTM_MERCHANT_KEY = '&uuClCjORCw3UW'

    checksum.genchecksum(paramarray, PAYTM_MERCHANT_KEY, function(err, result) {});

    this.$router.push({name: 'payPaytm', params: { transData: paramarray}});
}

and in router I have definition:

{
    path: '/pay-paytm',
    component: Vue.component('payPaytm', require('../Payment/Paytm/Views/Redirect.vue')),
    name: 'payPaytm',
    props: true
},

And in my component where I'm passing these data:

<template>
    <div>
        <h1>Please do not refresh this page...</h1>

        <form method="post" action="https://pguat.paytm.com/oltp-web/processTransaction" name="f1">
            <input name="MID" type="hidden" :value="transData.MID" />
            <input name="ORDER_ID" type="hidden" :value="transData.ORDER_ID" />
            <input name="CUST_ID" type="hidden" :value="transData.CUST_ID" />
            <input name="TXN_AMOUNT" type="hidden" :value="transData.TXN_AMOUNT" />
            <input name="CHANNEL_ID" type="hidden" :value="transData.CHANNEL_ID" />
            <input name="EMAIL" type="hidden" :value="transData.EMAIL" />
            <input name="MOBILE_NO" type="hidden" :value="transData.MOBILE_NO" />
            <input name="INDUSTRY_TYPE_ID" type="hidden" :value="transData.INDUSTRY_TYPE_ID" />
            <input name="WEBSITE" type="hidden" :value="transData.WEBSITE" />
            <input name="CALLBACK_URL" type="hidden" :value="transData.CALLBACK_URL" />
            <input name="CHECKSUMHASH" type="hidden" :value="transData.CHECKSUMHASH"/>
            <button class="thm-btn bgclr-1" data-loading-text="Please wait...">Submit</button>
        </form>
    </div>
</template>

<script>
    export default {
        name: "redirect",
        props: {
            transData: {
                required: true
            }
        },
        created() {
            console.log(this.transData)
        }
    }
</script>

When I am trying to do console I am able to see the following:

console element

But when I see the elements being added, it doesn't pick the CHECKSUMHASH key in the input form

inspect element

I don't know why I am consoling this element from the props component all the variable binds, only this chechsumash key doesn't get the value. Help me out in this.

Upvotes: 1

Views: 267

Answers (1)

Fab
Fab

Reputation: 4657

Probably the reason is that checksum.genchecksum is an async function. Did you try in this way?

checksum.genchecksum(paramarray, PAYTM_MERCHANT_KEY, (err, result) => {

    this.$router.push({name: 'payPaytm', params: { transData: paramarray}});

});

Upvotes: 1

Related Questions