Vendas com Pagseguro - #8 Checkout Transparente III

Fala turma, na vídeo aula de hoje vamos pegar a bandeira do cartão de acordo com o número do cartão digitado pelo usuário, o chamado cardBin. Esse dado é capturado após o sexto algarismo digitado.

Pegando a bandeira do cartão no e-commerce

Para capturar a bandeira do cartão pelo cardBin, utilizaremos a função PagSeguroDirectPayment.getBrand() do PagueSeguro.

Primeiramente vamos criar um input text com o nome NumeroCartao na nossa index e vamos criar também a div que recepcionará a bandeira vinda da API, essa div terá uma className BandeiraCartao. O código ficará assim:

<form action="">
    <input type="text" id="NumeroCartao" name="NumeroCartao">
</form>
<div class="BandeiraCartao"></div>

Posteriormente acionaremos a função PagSeguroDirectPayment.getBrand() pelo evento keyUp:

$('#NumeroCartao').on('keyup',function(){
    var NumeroCartao=$(this).val();
    var QtdCaracteres=NumeroCartao.length;

    if(QtdCaracteres == 6){
        PagSeguroDirectPayment.getBrand({
            cardBin: NumeroCartao,
            success: function(response) {
                var BandeiraImg=response.brand.name;
                $('.BandeiraCartao').html("<img src=https://stc.pagseguro.uol.com.br/public/img/payment-methods-flags/42x20/"+BandeiraImg+".png>")
            },
            error: function (response) {
                alert('Cartão não reconhecido');
                $('.BandeiraCartao').empty();
            }
        });
    }
});

Repare no código acima fazemos um if que aponta para a função após o 6 caracter. Esse if funciona como um debounce para evitar requisições sucessivas na nossa api.