Vendas Online via API com Mercado Pago - #6 Bandeira e Parcelas

Neste tutorial aprenderemos como trazer a bandeira do cartão de crédito para o nosso formulário e como exibir a quantidade de parcelas disponíveis para o comprador.

Mercado Pago - Bandeira e Parcelas do Cartão

Para implementar a bandeira, primeiramente iremos criar um div com a class brand no nosso html:

<li>
    <label for="cardNumber">Credit card number:</label>
    <input type="text" id="cardNumber" data-checkout="cardNumber" placeholder="4509 9535 6623 3704" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
    <div class="brand"></div>
</li>

Posteriormente iremos chamar a bandeira pelo javascript:

//Set Payment
function setPaymentMethodInfo(status, response) {
    if (status == 200) {
        const paymentMethodElement = doc.querySelector('input[name=paymentMethodId]');
        paymentMethodElement.value=response[0].id;
        doc.querySelector('.brand').innerHTML="<img src='"+response[0].thumbnail+"' alt='Bandeira do Cartão'>";
    } else {
        alert(`payment method info error: ${response}`);
    }
}

Para chamar a quantidade de parcelas pegaremos pela mesma função que pega o bin do cartão:

//Card bin
function cardBin(event) {
    let textLength=event.target.value.length;
    if(textLength >= 6){
        let bin=event.target.value.substring(0,6);
        window.Mercadopago.getPaymentMethod({
            "bin": bin
        }, setPaymentMethodInfo);

        Mercadopago.getInstallments({
            "bin": bin,
            "amount": parseFloat(document.querySelector('#amount').value),
        }, setInstallmentInfo);
    }
}
if(doc.querySelector('#cardNumber')){
    let cardNumber=doc.querySelector('#cardNumber');
    cardNumber.addEventListener('keyup',cardBin,false);
}

//Set Installments
function setInstallmentInfo(status, response) {
   let label=response[0].payer_costs;
   let installmentsSel=doc.querySelector('#installments');
   installmentsSel.options.length=0;

   label.map(function(elem,ind,obj){
      let txtOpt=elem.recommended_message;
      let valOpt=elem.installments;
      installmentsSel.options[installmentsSel.options.length]=new Option(txtOpt,valOpt);
   });

};

Por hoje é só! Sucesso nos códigos e na vida!

Precisa de Suporte Premium pelo TeamViewer? Contrate agora: webdesignemfoco@gmail.com