Cacher is the code snippet organizer for pro developers

<template>
    <div class="col-md-4">
        <form action="/purchases" method="POST">
            <input type="hidden" name="stripeToken" v-model="stripeToken">
            <input type="hidden" name="stripeEmail" v-model="stripeEmail">
            <div class="form-group">
                <select name="product" v-model="product" class="form-control">
                    <option v-for="product in products" :value="product">
                        {{ product.name }} &mdash; ${{ product.price/100 }}
                    </option>
                </select>
            </div>

            <button type="submit" @click.prevent="submitTheForm" class="button btn-warning">Buy Product</button>
        </form>
    </div>

</template>


<script>
    export default{
        props: ['products'],
        data(){
            return {
                stripeEmail : '',
                stripeToken : '',


            };
        },

        created(){
            this.stripe = StripeCheckout.configure({
                key: Pranay.stripeKey,
                image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
                locale: 'auto',
                token:  (token) => {
                    console.log(token);
                        this.stripeToken = token.id;
                        this.stripeEmail = token.email;

                        this.$http.post('/purchases', this.$data)
                                .then(response => alert('Complete! Thanks for your payment'));
                    }
            });
        },
        methods: {
            submitTheForm(){
                console.log(this.product);
                this.stripe.open({
                    name: this.product.name,
                    description: this.product.description,
                    zipCode: false,
                    amount: this.product.price

                });

            }
        }
    }
</script>