Vendas com Pagseguro - #9 Checkout Transparente IV

Hoje aprenderemos como listar a quantidade de parcelas e os valores das parcelas de acordo com a bandeira do cartão de crédito escolhida.

Dividindo parcelas com a API PagueSeguro

Para dividir as parcelas utilizaremos a função PagSeguroDirectPayment.getInstallments() do Pagseguro.

//Exibe a quantidade e valores das parcelas
function getParcelas(Bandeira)
{
    PagSeguroDirectPayment.getInstallments({
        amount: Amount,
        maxInstallmentNoInterest: 2,
        brand: Bandeira,
        success: function(response)
        {
            $.each(response.installments,function(i,obj){
                $.each(obj,function(i2,obj2){
                    var NumberValue=obj2.installmentAmount;
                    var Number= "R$ "+ NumberValue.toFixed(2).replace(".",",");
                    $('#QtdParcelas').show().append("<option value='"+Number+"'>"+obj2.quantity+" parcelas de "+Number+"</option>");
                });
            });
        }
    });
}

O código acima povoará um select que devemos criar na nossa index:

<select name="QtdParcelas" id="QtdParcelas" class="DisplayNone">
    <option value="">Selecione</option>
</select>

O select acima só ficará visível após o usuário digitar os 6 primeiros dígitos do cartão. Para isso, utilizaremos o CSS:

.DisplayNone{display: none;}

A função javascript iniciada nessa aula será ativada após o usuário digitar os 6 primeiros dígitos do cartão e ela receberá como parâmetro a bandeira do cartão. Então, devemos adicionar no código da última aula o acionamento dessa função e a passagem de parâmetro. Logo a função de pegar bandeira da última aula ficará assim:

//Função de pegar a bandeira do cartão vista na última aula
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>")
    getParcelas(BandeiraImg);
},

Veja que no código acima foi adicionado o trecho de acionamento da função: getParcelas(BandeiraImg);

Com os códigos acima conseguimos fazer um select que mostra ao usuário todas as parcelas e valores disponíveis de acordo com a API do Pagseguro.