VueJs Component for Paddle

Account.vue

<template>
    <div>
        <div class="content has-text-centered" v-if="user">
            <button @click="subscribe">Checkout</button>
        </div>
    </div>
</template>

<script
    import {db, firebase} from "../db";
    export default {
        name: "Account",
        data(){
            return {
              user: {
                id: 'user_id',
                email: 'user@email.com'
              }
            }
        },
        methods: {
            subscribe(){
                let that = this;
                Paddle.Checkout.open({
                    product: 1123,
                    email: this.user.email,
                    passthrough: this.user.id,
                    successCallback: function(data) {
                        console.log(data);
                        alert('Checkout Success');
                    },
                    closeCallback: function(data) {
                        console.log(data);
                        alert('Failed to checkout');
                    }
                });
            }
        }
    }
</script>

<style scoped>
</style>