Vue error when attempting stripe Api

Hi,

I am following the "How to accept payment series" vue integration lesson( 3rd lesson). I am not following the ES-2015 syntax, since i don't know it till now. In the token callback function i am getting this error


Uncaught TypeError: Cannot read property 'post' of undefined
    at TokenCallback.token [as fn] (eval at <anonymous> (app.js:96), <anonymous>:64:23)
    at TokenCallback.trigger (checkout.js:3)
    at TokenCallback.trigger (checkout.js:3)
    at IframeView.onToken (checkout.js:3)
    at IframeView.closed (checkout.js:3)
    at Object.closed (checkout.js:3)
    at RPC.processMessage (checkout.js:2)
    at RPC.processMessage (checkout.js:2)
    at RPC.message (checkout.js:2)
    at checkout.js:2
token @ checkoutform.vue?4b80:64
TokenCallback.trigger @ checkout.js:3
(anonymous) @ checkout.js:3
(anonymous) @ checkout.js:3
IframeView.closed @ checkout.js:3
(anonymous) @ checkout.js:3
RPC.processMessage @ checkout.js:2
(anonymous) @ checkout.js:2
RPC.message @ checkout.js:2
(anonymous) @ checkout.js:2

here is my checkoutform.vue file


<template>
                <div class="panel panel-primary">
                    <div class="panel-heading">Stripe Checkout Form Template</div>

                    <div class="panel-body">

                        <form action="/purchase" method="POST" id="checkoutForm">

                            <!--
                            <input type="hidden" name="stripeToken" id="stripeToken" />
                            <input type="hidden" name="stripeEmail" id="stripeEmail" />
                            -->

                            <button id="buy" @click.prevent="buy" type="submit">Buy My Book</button>

                        </form>
                    </div>
                </div>
</template>

<script>
    export default {

        data: function(){
                return {
                    stripeEmail: '',
                    stripeToken: ''
                }
        },

        created: function(){
       // let's configure the connection with the stripe api

        this.stripe_checkout = StripeCheckout.configure({

            //key: this one is required for the confirure(),
            // all of hte other keys can also be passed at open()
            // more details: https://stripe.com/docs/checkout#integration-custom

            key: Laravel.stripeKey,

            // these keys can also be passed at open()
            image:"https://stripe.com/img/documentation/checkout/marketplace.png",
            locale:"auto",
            token: function(token){
                // after the ajax request to the stripe server, it will response with a stripe token
                // by which we can charge the card on the later procedure, so we need to save it for the time being

                console.log(token);


                this.stripeEmail = token.email;
                this.stripeToken = token.id;



                //jQuery('#stripeEmail').val(token.email);
                //jQuery('#stripeToken').val(token.id);

                // if it is a valid card response from the stripe server and the token value has saved,
                // let's pass the data to our backend by mannual form submission
                //jQuery('#checkoutForm').submit();

                this.$http.post('/purchase', this.$data).then(function(response){
                    alert('Complete, Thanks for your payment !');
                });

            }

        });


        },

        methods: {
            buy: function(){

                   this.stripe_checkout.open({

                        amount: 2500,
                        name:"My Product Name",
                        description:"A simple test product.",

                     });




                }

        }

        /*
        mounted() {
            console.log('Component mounted.')
        }
        */
    }
</script>

By the way, the jquery way works fine for me, but i am attempting for the vue way now. Can anyone please help me to get resolved the issue.

Thanks

fahad

9 years ago

Best Answer

Level 7

it was an scope issue in fact, inside the token: callback() this refers the callback function itself instead of vue instance. so i just cache the vue instance in the created method and then used the variable into callback to make the ajax request with the data. That solves my problem

here is the modified code samples::

<script>
    export default {

        data: function(){
                return {
                    stripeEmail: '',
                    stripeToken: ''
                }
        },

        created: function(){

    // caching the vue instance
       var $this = this;

        this.stripe_checkout = StripeCheckout.configure({
            key: Laravel.stripeKey,
            image:"https://stripe.com/img/documentation/checkout/marketplace.png",
            locale:"auto",
            token: function(token){
        
        // using the cache version of the vue instance, insteade of this, using $this   
                $this.stripeEmail = token.email;
                $this.stripeToken = token.id;

                $this.$http.post('/purchase', $this.$data).then(function(response){
                    alert('Complete, Thanks for your payment !');
                });

            }

        });


        },

        methods: {
            buy: function(){

                   this.stripe_checkout.open({

                        amount: 2500,
                        name:"My Product Name",
                        description:"A simple test product.",

                     });




                }

        }
    }
</script>

Please or to participate in this conversation.