Integrar PHP com PagSeguro Parte 3 - Recuperar a bandeira do cartão que o usuário digitar


Neste tutorial será apresentado como iniciar a integração do PHP com PagSeguro usando a API para recuperar a bandeira do cartão que o usuário digitar.

Primeiro será apresentado como receber o número do cartão e enviar para o PagSeguro validar.

Em seguida como apresentar a bandeira retornada pelo PagSeguro no site.

Download do código fonte desenvolvido na aula: DOWNLOAD

Continuando no arquivo "index.php", criado na aula "Integrar PHP com PagSeguro Parte 2 - Recuperar os meios de pagamentos e as bandeiras", será acrescentado o formulário para o usuário digitar o número do cartão.

<form action="">
	<label>Número do cartão</label>
	<input type="text" name="numCartao" id="numCartao">
</form>

Em seguida usando o jQuery com o evento "keyup", implementado para receber os dados do fomulário. No código abaixo está a explicação de cada parte do JavaScript. 

//Receber os dados do formulário, usando o evento "keyup" para receber sempre que tiver alguma alteração no campo do formulário
$('#numCartao').on('keyup', function () {
	
	//Receber o número do cartão digitado pelo usuário
    var numCartao = $(this).val();
	
	//Contar quantos números o usuário digitou
    var qntNumero = numCartao.length;
	
	//Validar o cartão quando o usuário digitar 6 digitos do cartão
    if (qntNumero == 6) {
		
		//Instanciar a API do PagSeguro para validar o cartão
        PagSeguroDirectPayment.getBrand({
            cardBin: numCartao,
            success: function (retorno) {
                $('#msg').empty();
				
				//Enviar para o index a imagem da bandeira
                var imgBand = retorno.brand.name;
                $('.bandeira-cartao').html("<img src='https://stc.pagseguro.uol.com.br/public/img/payment-methods-flags/42x20/" + imgBand + ".png'>");
            },
            error: function (retorno) {
				
				//Enviar para o index a mensagem de erro
                $('.bandeira-cartao').empty();
                $('#msg').html("Cartão inválido");
            }
        });
    }
});

Para receber a imagem da bandeira retornada pelo PagSeguro no "index.php", criado nova <div> com o seletor "bandeira-cartao".

<div class="bandeira-cartao"></div>

Também para receber a mensagem de erro, criado no "index.php", com a TAG <span> novo seletor "msg".

<span id="msg"></span>

No link abaixo pode ser baixado o código fonte completo, as aula anterior e da aula atual: DOWNLOAD

Chegamos ao final de mais um tutorial, no próximo tutorial será dado sequencia a integração do PagSeguro com o PHP.