Apr 24, 2017

Level 3

[Vue warn]: Error in created hook: (found in <CheckoutForm>) TypeError: Cannot read property 'email' of undefined

Hey :)

I am currently working on a subscriptions feature on my project and I am following the laracasts payments series https://laracasts.com/series/how-to-accept-payments-with-stripe

I am using: laravel 5.2 vue 2.0.1

I am recieving the above error when I am trying to load my stripe checkout form, when I remove all references to email t debug the issue, I get a different error:

Uncaught ReferenceError: StripeCheckout is not defined

CheckoutForm.vue

    <option v-for="plan in plans" :value="plan.id">

        {{ plan.name }} &mdash; ${{ plan.price /100 }}
    </option>

export default {

    props:['plans'],


    data(){

        return {

            stripeEmail: '',
            stripeToken: '',
            plan: 1,
            status: false

        };

    },

created() {

    this.stripe = stripeCheckout.configure({
    key: configs.stripeKey,
    image: "{!! URL::to('/img/icons/passport.128.png') !!}",
    locale: 'auto',
        panelLabel: "Subscribe For",
        token: (token) => {
           this.stripeToken = token.id;
           this.stripe = token.email;
    
    this.$http.post('/subscriptions', this.$data)

   .then(
    response => alert('complete! Thanks for your payment'),
    response => this.status = response.body.status

    )


  }

}); },

methods: {

subscribe(){

    let plan = this.findPlanById(this.plan);

    this.stripe.open({
        name: 'Site Passport',
        description: 'plan.name',
        currency: 'eur',
        amount: plan.price
            
     });

}, findPlanById(id){

            return this.plans.find(plan => plan.id == id);
        }
    }

}

snippet from my subscribe.blade.php

var configs = {

csrfToken: "{{ csrf_token() }}",
stripeKey: "{{ config('services.stripe.secret') }}"

}

<checkout-form :plans="{{ $plans  }}"></checkout-form>

package.json { "private": true, "devDependencies": { "gulp": "^3.8.8", "gulp-bower": "0.0.10", "laravel-elixir-vue": "^0.1.8", "laravel-elixir-vueify": "^1.0.6", "vue": "^2.0.1", "vue-resource": "^1.0.3"

}, "dependencies": { "laravel-elixir": "^3.0.0", "bootstrap-sass": "^3.0.0"

"browser": { "vue": "vue/dist/vue.common.js" }

}

app.js

require('./bootstrap');

import Vue from 'vue/dist/vue.common.js'

import CheckoutForm from './components/CheckoutForm.vue'

Vue.component('CheckoutForm',CheckoutForm)

new Vue({ el: '#app' });

Has anyone come across this Also anyone have any good tips for debugging vue, errors are quiet vague

Thanks :)

Evie

9 years ago

Level 3

spotted an error in created this.stripe = token.email;

fixed this and now I have this error

[Vue warn]: Error in created hook: (found in ) ReferenceError: StripeCheckout is not defined

checked this a few times and I can't seem to find why I am getting this error.

Any ideas?

Thanks :)

thepassenger

9 years ago

Level 2

For the email error looks like you are trying to fetch the email from an object which has no email defined yet. It's kinda hard to know where tho since you didn't post the whole CheckOutForm component.

I am not familiar with stripe but for the second error looks like you are trying to do something with stripe without importing it first. Have you done the checkout tutorial? Here you can find more to use stripe with php. https://stripe.com/docs/checkout/php

Evie

9 years ago

Level 3

@thepassenger hey :) I did post the whole checkoutform, sorry it might not be very clear as I have not yet figured out the code formatting for posting discussions.

I fixed this: this.stripe = token.email;

and replaced it with this:

this.stripeEmail = token.email;

and then I realised when I am configuring my checkout here:

this.stripe = stripeCheckout.configure({

I was using a lowercase s so I fixed this:

this.stripe = StripeCheckout.configure({

and now I am back to my first error:

TypeError: Cannot read property 'email' of undefined

thepassenger

9 years ago

Level 2

Again I'm not familiar with stripe but this part.

this.stripe = stripeCheckout.configure({
    key: configs.stripeKey,
    image: "{!! URL::to('/img/icons/passport.128.png') !!}",
    locale: 'auto',
        panelLabel: "Subscribe For",
        token: (token) => {
           this.stripeToken = token.id;
           this.stripe = token.email;

I think should be closed before calling the post method. Like this:

this.stripe = stripeCheckout.configure({
    key: configs.stripeKey,
    image: "{!! URL::to('/img/icons/passport.128.png') !!}",
    locale: 'auto',
    panelLabel: "Subscribe For",
    token: (token) => {
       this.stripeToken = token.id;
       this.stripe = token.email;
    }
});

// Then here this.$httpd etc...

Also the this.stripe = token.email doesn't make much sense to me. Maybe you meant this.stripeEmail = token.email? Also the warning may be because you are trying to get the email of the token as soon as the component is created but the token doesn't have an email attribute yet.

Again I never used stripe so I think you should read more carefully the documentation. Seemed pretty straight forward to me

Evie

9 years ago

Level 3

@thepassenger Thanks for your insight, I have read the documentation and I am following the laracasts video tutorials as I want to learn from the best but it is my first time integrating stripe payment gateway or any payment or subcription feature into a project ever so it's all pretty new to me. I have also mentioned in my my last two replies that I have rectified this issue:

this.stripe = token.email;

is supposed to be:

this.stripeEmail = token.email;

This did not solve my problem, I know what the warning is telling me but from going through my code and studying other examples that are very similar to mine I cannot find the issue.

Please or to participate in this conversation.