Vendas com Pagseguro - #7 Checkout Transparente II

Nessa aula vamos aprender como listar dinâmicamente as formas de pagamento disponibilizadas pela plataforma do PagSeguro. Se você ainda não adquiriu o SSL, prepare seu site pois a partir de julho de 2018 não será mais possível utilizar o PagSeguro sem SSL.

Listando as formas de pagamento do PagueSeguro

Para listar os meios de pagamento do sistema utilizaremos a função PagSeguroDirectPayment.getPaymentMethods. Buscaremos as bandeiras diretamente da plataforma da UOL.

// Lista os pagamentos disponíveis no Pagseguro
function listaMeiosPagamento()
{
    PagSeguroDirectPayment.getPaymentMethods({
        amount: 500.00,
        success: function(data) {
            $.each(data.paymentMethods.CREDIT_CARD.options, function(i, obj){
                $('.CartaoCredito').append("
"+obj.name+"
");
            });

            $('.Boleto').append("
"+data.paymentMethods.BOLETO.name+"
");

            $.each(data.paymentMethods.ONLINE_DEBIT.options, function(i, obj){
                $('.Debito').append("
"+obj.name+"
");
            });
        },
        complete: function(data) {
        }
    });
}

Na nossa index vamos criar 3 divs para abrigar essas formas de pagamento:

<div class="CartaoCredito"><div class="Titulo">Cartão de Crédito</div></div>
<div class="Boleto"><div class="Titulo">Boleto</div></div>
<div class="Debito"><div class="Titulo">Débito Online</div></div>

Posteriormente, podemos estilizar essas divs pra ficar mais bacana a disposição no layout do site:

*{margin: 0; box-sizing: border-box;}

.CartaoCredito, .Debito , .Boleto{float:left; width: 30%; margin: 30px 1.5%; border-radius: 10px; border: 1px solid #999; font-size: 18px; font-weight: bold;}
.Titulo{float:left; width: 100%; border-radius: 10px 10px 0 0; font-weight: bold; color: #fff; background: #000; text-align: center;}

Não esqueça de fazer um layout responsivo. Até a próxima aula!