Vendas Online via API com Mercado Pago - #5 Introdução à API

08/03/2020

Nessa vídeoaula iniciamos a introdução a API do Mercado Pago aprendendo como utilizar o checkout transparente do Mercado Livre.

Iniciando com checkout transparente

Vamos criar o index.php com o código html5:

<!doctype html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pagamento via API - Mercado Pago</title>
</head>

<body>
    <form action="/controllers/PaymentController.php" method="post" id="pay" name="pay" >
        <fieldset>
            <ul>
                <li>
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" value="test_user_19653727@testuser.com"  placeholder="your email"/>
                </li>
                <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 />
                </li>
                <li>
                    <label for="securityCode">Security code:</label>
                    <input type="text" id="securityCode" data-checkout="securityCode" placeholder="123" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
                </li>
                <li>
                    <label for="cardExpirationMonth">Expiration month:</label>
                    <input type="text" id="cardExpirationMonth" data-checkout="cardExpirationMonth" placeholder="11" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
                </li>
                <li>
                    <label for="cardExpirationYear">Expiration year:</label>
                    <input type="text" id="cardExpirationYear" data-checkout="cardExpirationYear" placeholder="2025" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
                </li>
                <li>
                    <label for="cardholderName">Card holder name:</label>
                    <input type="text" id="cardholderName" data-checkout="cardholderName" placeholder="APRO" />
                </li>
                <li>
                    <label for="docType">Document type:</label>
                    <select id="docType" data-checkout="docType"></select>
                </li>
                <li>
                    <label for="docNumber">Document number:</label>
                    <input type="text" id="docNumber" data-checkout="docNumber" placeholder="19119119100" />
                </li>
                <li>
                    <label for="installments">Installments:</label>
                    <select id="installments" class="form-control" name="installments"></select>
                </li>
            </ul>
            <input type="hidden" name="amount" id="amount"/>
            <input type="hidden" name="description"/>
            <input type="hidden" name="paymentMethodId" />
            <input type="submit" value="Pay!" />
        </fieldset>
    </form>


    <script src="https://secure.mlstatic.com/sdk/javascript/v1/mercadopago.js"></script>
    <script src="lib/js/javascript.js"></script>
</body>
</html>

Vamos criar também o diretório lib/js e o arquivo javascript.js:

(function(win,doc){
    "use strict";

    //Public Key
    window.Mercadopago.setPublishableKey("SUA_PUBLIC_KEY");

    //Docs Type
    window.Mercadopago.getIdentificationTypes();

    //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);
        }
    }
    if(doc.querySelector('#cardNumber')){
        let cardNumber=doc.querySelector('#cardNumber');
        cardNumber.addEventListener('keyup',cardBin,false);
    }

    //Set Payment
    function setPaymentMethodInfo(status, response) {
        if (status == 200) {
            const paymentMethodElement = doc.querySelector('input[name=paymentMethodId]');
            paymentMethodElement.value=response[0].id;
        } else {
            alert(`payment method info error: ${response}`);
        }
    };
})(window,document);

Vamos criar o diretório controllers e dentro desse diretório o arquivo PaymentController.php:

Sucesso nos códigos e na vida!

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Vendas Online via API com Mercado Pago - #4 Smart Checkout

Nesse tutorial aprenderemos a utilizar o Smart Checkout que é uma forma de receber todas as formas de pagamento disponibilizadas pelo Mercado Pago.

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.

Mercado Pago

Neste curso aprenderemos como desenvolver pagamentos através do checkout transparente da API do Mercado Pago.