Integrar PHP com PagSeguro Parte 2 - Recuperar os meios de pagamentos e as bandeiras


Neste tutorial será apresentado como iniciar a integração do PHP com PagSeguro usando a API para recuperar os meios de pagamentos e as bandeiras.

Primeiro será apresentado como receber os meios de pagamentos do PagSeguro.

Em seguida como recuperar as bandeiras de pagamento do PagSeguro.

Download do código fonte desenvolvido na aula: DOWNLOAD

Utilizando como base o arquivo "index.php" criado no tutorial anterior "Integrar PHP com PagSeguro Parte 1 - Gerando uma sessão", acrescentado a div para receber os meios de pagamentos e as bandeiras.

<div class="meio-pag"></div>

Código completo do arquivo "index.php".

<?php
include './configuracao.php';
?>
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Celke - PagSeguro</title>
        <link href="css/personalizado.css" rel="stylesheet">
    </head>
    <body>
        <button onclick="pagamento()">Pagar</button>
        <span class="endereco" data-endereco="<?php echo URL; ?>"></span>
        
        <div class="meio-pag"></div>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript" src="<?php echo SCRIPT_PAGSEGURO; ?>"></script>
        <script src="js/personalizado.js"></script>
    </body>
</html>

Em seguida no arquivo "personalizado.js" criado a função para recuperar os meios de pagamentos e as bandeiras.

function listarMeiosPag() {
    PagSeguroDirectPayment.getPaymentMethods({
        amount: 500.00,
        success: function (retorno) {
            //Recuperar as bandeiras do cartão de crédito
            $('.meio-pag').append("<div>Cartão de Crédito</div>");
            $.each(retorno.paymentMethods.CREDIT_CARD.options, function(i, obj){
                //$('.meio-pag').append("<span>"+ obj.name +"</span>");
                //$('.meio-pag').append("<span><img src='https://stc.pagseguro.uol.com.br" + obj.images.SMALL.path + "'>"+ obj.name +"</span>");
                $('.meio-pag').append("<span class='img-band'><img src='https://stc.pagseguro.uol.com.br" + obj.images.SMALL.path + "'></span>");
            });
            //Recuperar as bandeiras do boleto
            $('.meio-pag').append("<div>Boleto</div>");
            $('.meio-pag').append("<span class='img-band'><img src='https://stc.pagseguro.uol.com.br" + retorno.paymentMethods.BOLETO.options.BOLETO.images.SMALL.path + "'><span>");
                        
			//Recuperar as bandeiras do débito online
            $('.meio-pag').append("<div>Débito Online</div>");
            $.each(retorno.paymentMethods.ONLINE_DEBIT.options, function(i, obj){
                $('.meio-pag').append("<span class='img-band'><img src='https://stc.pagseguro.uol.com.br" + obj.images.SMALL.path + "'></span>");
            });
        },
        error: function (retorno) {
            // Callback para chamadas que falharam.
        },
        complete: function (retorno) {
            // Callback para todas chamadas.
        }
    });
}


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.