Vendas Online com Mercado Pago - #3 Checkout Pro

09/04/2026

No tutorial de hoje aprenderemos como inserir o checkout pro do Mercado Pago no seu site ou blog, de forma que o cliente pague no próprio site.

MP Checkout Pro

Primeiramente precisaremos instalar os seguintes softwares:
- Xampp
- Composer

Seus arquivos devem ser inseridos na pasta C:/xampp/htdocs

Vamos criar três arquivos: index.php, processa.php e javascript.js

index.php

Arquivo que abrigará o html:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Checkout Simples</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .checkout {
            display: flex;
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            width: 600px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            align-items: center;
            justify-content: space-between;
        }

        .produto {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .produto img {
            width: 120px;
            border-radius: 10px;
        }

        .info h3 {
            margin: 0;
        }

        .info p {
            margin: 5px 0;
            color: #555;
        }

        .pagamento {
            text-align: right;
        }

        .btn {
            background: #28a745;
            color: white;
            padding: 15px 25px;
            border-radius: 8px;
            text-decoration: none;
            font-size: 16px;
            display: inline-block;
        }

        .btn:hover {
            background: #218838;
        }
    </style>
</head>
<body>

<div class="checkout">

    <!-- Produto -->
    <div class="produto">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Soccerball.svg" alt="Bola de Futebol">

        <div class="info">
            <h3>Bola de Futebol</h3>
            <p>Produto oficial</p>
            <strong>R$ 20,00</strong>
        </div>
    </div>

    <!-- Botão de pagamento -->
    <div class="pagamento">
        <div id="walletBrick_container"></div>
    </div>

</div>


    <script src="https://sdk.mercadopago.com/js/v2"></script>
    <script src="javascript.js"></script>
</body>
</html>

processa.php

Esse arquivo será o backend que trará o id de preferência de pagamento:

<?php
include("vendor/autoload.php");
// SDK do Mercado Pago
use MercadoPago\MercadoPagoConfig;
// Adicione credenciais
MercadoPagoConfig::setAccessToken("TEST-6515191993880334-011910-83258140754e1a25253949b89297e187-28232671");

$client = new \MercadoPago\Client\Preference\PreferenceClient();
$preference = $client->create([
    "items"=> array(
        array(
            "title" => "Bolinha",
            "quantity" => 2,
            "unit_price" => 20
        )
    )
]);
echo json_encode($preference->id);

javascript.js

O javascript chamará o arquivo processa e o botão de pagamento:

(async function(win,doc){
    "use scrict";

    const publicKey = "TEST-c86690cc-e61d-4566-b533-b2af0d25fb1a";
    // Configure o ID de preferência que você deve receber do seu backend

    let reqs = await fetch('processa.php');
    let ress = await reqs.json();

    const preferenceId = ress;

    // Inicializa o SDK do Mercado Pago
    const mp = new MercadoPago(publicKey);

    // Cria o botão de pagamento
    const bricksBuilder = mp.bricks();
    const renderWalletBrick = async (bricksBuilder) => {
        await bricksBuilder.create("wallet", "walletBrick_container", {
            initialization: {
                preferenceId: preferenceId,
            }
        });
    };

    renderWalletBrick(bricksBuilder);

})(window,document);

Então é isso, por hoje é só! Fiquem todos com Deus! Sucesso nos códigos e na vida!

Precisa de ajuda na criação de planilhas? webdesignemfoco@gmail.com

Porque a carne luta contra o Espírito, e o Espírito luta contra a carne, porque são opostos entre si, para que vocês não façam o que querem. Gálatas 5, 17

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Vendas Online com Mercado Pago - #2 Link de Pagamento e Botões

No tutorial de hoje aprenderemos como criar links de pagamento e botões de pagamento através da plataforma de desenvolvedor do Mercado Livre.

Vendas Online com Mercado Pago - #4 Checkout Transparente

Neste tutorial implementaremos o checkout transparente do Mercado Pago.

Mercado Pago