Vendas Online via API com Mercado Pago - #12 Carrinho de Compras III

No tutorial de hoje iremos terminar o nosso carrinho de compras interligado ao Mercado Livre já exibindo os dados dos produtos no checkout.

Checkout API Mercado Livre

O nosso CarrinhoController redirecionará o comprador para a view checkout.php

checkout.php

A checkout.php ficará responsável por exibir a listagem de produtos, preços e o total das compras:

<div class="product__list">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Descrição</th>
                <th>Valor</th>
            </tr>
        </thead>
        <tbody>
            <?php echo $carrinho->listProducts(); ?>
        </tbody>
    </table>
</div>


<form action="/mp/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 />
                <div class="brand"></div>
            </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" value="<?php echo $carrinho->getAmount(); ?>" />
        <input type="hidden" name="description" value="Website Dinâmico" />
        <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>

Na classe do carrinho iremos implementar um novo método para exibição dos produtos.

ClassCarrinho.php

//List products
public function listProducts()
{
    $html="";
    if(isset($_SESSION['products'])) {
        foreach ($_SESSION['products'] as $product) {
            $html .= "";
            $html .= "" . $product['id'] . "";
            $html .= "" . $product['description'] . "";
            $html .= "" . $product['quantity'] * $product['price'] . "";
            $html .= "";
        }
    }
    return $html;
}

//Total Amount
public function getAmount()
{
    $amount=0;
    if(isset($_SESSION['products'])){
        foreach ($_SESSION['products'] as $product){
            $amount+=$product['quantity']*$product['price'];
        }
    }
    return $amount;
}

Para realizar os testes, lembre-se de enviar os arquivos para uma hospedagem SSL.

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

Precisa integrar ao seu site? Suporte premium já: webdesignemfoco@gmail.com