vue.js

vue.js

var checkout = new Vue({
        el: '#checkout',
        data: {
            pagseguro : {
                toggle : false
            },
            products : {
                toggle : false
            }, 

            inputs : {
                card_number : {
                    six_chars : '',
                    value : ''
                }, 
                card_split : {
                    options: [
                        {value:'', name: 'Primeiro informe os dados do cartão...'}
                    ]
                }
            }
        }, 
        methods: {
            getCardBrand: function(){
                // console.log(this.inputs.card_number.value);
                card_number = this.inputs.card_number.value;
                if (this.inputs.card_number.value.length >= 6 && this.inputs.card_number.value.substring(0, 6) != this.inputs.card_number.six_chars){
                    this.inputs.card_number.six_chars = this.inputs.card_number.value.substring(0, 6);
                    PagSeguroDirectPayment.getBrand({
                        cardBin: this.inputs.card_number.value,
                            success: function(response) {
                                //bandeira encontrada
                                console.log('success');
                                console.log(response.brand.name);
                                PagSeguroDirectPayment.getInstallments({	
                                    amount: {{ number_format($cart->products->sum('product_price') + $cart->budget->shipment_price, 2, ".", "") }},
                                    brand: response.brand.name,
                                    success: function(response) {
                                        //opções de parcelamento disponível
                                        console.log('success:getInstallments');
                                        console.log(response);
                                        console.log(response.installments.)
                                    },
                                    error: function(response) {
                                        //tratamento do erro
                                        console.log('error');
                                        console.log(response);
                                    },
                                    complete: function(response) {
                                        //tratamento comum para todas chamadas
                                        console.log('complete');
                                        console.log(response);
                                    }
                                });

                            },
                            error: function(response) {
                                //tratamento do erro
                                console.log('error');
                                console.log(response);
                            },
                            complete: function(response) {
                                //tratamento comum para todas chamadas
                                console.log('complete');
                                console.log(response);
                            }
                    });
                }
            }
        },
        mounted: function(){
            PagSeguroDirectPayment.setSessionId('{{ session('pagseguro.sess_id') }}');
            PagSeguroDirectPayment.onSenderHashReady(function(response){
                if(response.status == 'error') {
                    console.log(response.message);
                    return false;
                }

                var hash = response.senderHash; //Hash estará disponível nesta variável.
                console.log(hash);
            });
            PagSeguroDirectPayment.getPaymentMethods({
                amount: {{ number_format($cart->products->sum('product_price') + $cart->budget->shipment_price, 2, ".", "") }},
                success: function(response) {
                    //meios de pagamento disponíveis
                    console.log('success');
                    console.log(response);
                },
                error: function(response) {
                    //tratamento do erro
                    console.log('error');
                    console.log(response);
                },
                complete: function(response) {
                    //tratamento comum para todas chamadas
                    console.log('complete');
                    console.log(response);
                }
            });
        }
    });

Thanks for sharing! And...not so long ago I have read a great article about the Most Efficient Way to Hire Vue.js Developers. Check out the article.