package and payment

credit-card.vue

<template>
    <div class="credit-card">
        <vue-stripe-checkout
                ref="checkoutRef"
                :image="image"
                :name="name"
                :description="description"
                :currency="currency"
                :amount="0"
                :email="$store.state.auth.email"
                :allow-remember-me="false"
                @done="done"
                @opened="opened"
                @closed="closed"
                @canceled="canceled"
        ></vue-stripe-checkout>
        <!--<button @click="checkout">Checkout</button>-->
    </div>
</template>

<script>
    export default {
        name: "credit-card",
        data() {
            return {
                image: 'http://localhost:3000/image/logo.png',
                name: 'Aviations Job',
                description: 'Connecting People Controlling The Sky',
                currency: 'USD',
                amount: 99999
            }
        },
        methods: {

            async checkout () {
                // token - is the token object
                // args - is an object containing the billing and shipping address if enabled
                const { token, args } = await this.$refs.checkoutRef.open();
                return {token, args}
            },
            done ({token, args}) {

//                 axios.post('/payment/update-payment', {token, args}).then(res=>{
//                    console.log(res)
//                }).catch(error=>{
//                    console.log(error.data)
//                })
            },
            opened () {
                // do stuff
            },
            closed () {
                // do stuff
            },
            canceled () {
                // do stuff
            }
        }
    }
</script>

<style scoped>

</style>

payment.vue

<template>
    <div class="payment">
        <div>
            <div class="row">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            Basic
                        </div>
                        <div class="card-body">
                            feature for 1 month
                        </div>
                        <div class="card-footer">
                            <button class="btn btn-sm btn-primary" @click="checkCreditCard(24.95)">submit</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            Silver
                        </div>
                        <div class="card-body">
                            feature for 6 month
                        </div>
                        <div class="card-footer">
                            <button class="btn btn-sm btn-primary" @click="checkCreditCard(55.95)">submit</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            Platinum
                        </div>
                        <div class="card-body">
                            feature for 12 month
                        </div>
                        <div class="card-footer">
                            <button class="btn btn-sm btn-primary" @click="checkCreditCard(98.95)">submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "payment",
        props:['id', 'type'],
        data() {
            return {
                showCard:false,
                package: [
                    {'basic': {'selected': true, 'featured': true}},
                    {'sliver': {'selected': false, 'featured': false}},
                    {'basic': {'selected': false, 'featured': false}},
                ]
            }
        },
        
        
        methods: {
            checkCreditCard(amount){
                axios.get('/payment/check-card').then(response=>{
                    if(!response.data){

                        this.$root.$refs.creditcard.checkout().then(res=>{
                           if(res.token){
                               this.charge(amount,res.token)
                           }
                        })

                    }else{
                        this.charge(amount)
                    }
                }).catch(error=>{
                    // call credit card form
                });
            },
            charge(amount,token=null){

                axios.post('/payment/charge',{
                    amount:amount,
                    token:token,
                    arg:{}
                }).then(res=>{

                }).catch(err=>{
                    this.$root.$refs.creditcard.checkout().then(res=>{
                        if(res.token){
                            this.charge(amount,res.token)
                        }
                    })
                })
            },

        }
    }
</script>

<style scoped lang="scss">
    .payment {
        padding: 30px;
    }
</style>