Vendas Online com Mercado Pago - #4 Checkout Transparente

30/04/2026

Neste tutorial implementaremos o checkout transparente do Mercado Pago.

Checkout Transparente do Mercado Pago.

O checkout transparente do Mercado Pago é uma solução de pagamento onde o cliente finaliza a compra sem sair do site ou sistema da empresa. Diferente do checkout tradicional, em que o usuário é redirecionado para outra página, no modelo transparente toda a experiência acontece dentro do próprio ambiente da loja. Isso gera mais confiança, melhora a experiência do usuário e pode aumentar significativamente a taxa de conversão das vendas.

index.php

Abriga o html e o formulário de cartão de crédito:

<!doctype html>
<html lang="en">
<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>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>
<body>

    <div id="cardPaymentBrick_container"></div>


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

javascript.js

Interliga o frontend com o backend:

(function(win,doc){
    'use stict';

    const mp = new MercadoPago("YOUR_PRODUCTION_PUBLIC_KEY");
    const bricksBuilder = mp.bricks();

    const renderCardPaymentBrick = async (bricksBuilder) => {
        const settings = {
            initialization: {
                amount: 10.99, // valor total a ser pago
            },
            callbacks: {
                onReady: () => {
                    /*
                     Callback chamado quando o Brick estiver pronto.
                     Aqui podem ser ocultos loadings do site, por exemplo.
                   */
                },
                onSubmit: (formData, additionalData) => {
                    // callback chamado ao clicar no botão de envio de dados
                    return new Promise((resolve, reject) => {
                        const submitData = {
                            type: "online",
                            total_amount: String(formData.transaction_amount), // deve ser uma string com formato 00.00
                            external_reference: "ext_ref_1234", // identificador da origem da transação.
                            processing_mode: "automatic",
                            transactions: {
                                payments: [
                                    {
                                        amount: String(formData.transaction_amount), // deve ser uma string com formato 00.00
                                        payment_method: {
                                            id: formData.payment_method_id,
                                            type: additionalData.paymentTypeId,
                                            token: formData.token,
                                            installments: formData.installments,
                                        },
                                    },
                                ],
                            },
                            payer: {
                                email: formData.payer.email,
                                identification: formData.payer.identification,
                            },
                        };

                        fetch("/processa.php", {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json",
                            },
                            body: JSON.stringify(submitData),
                        })
                            .then((response) => response.json())
                            .then((response) => {
                                // receber o resultado do pagamento
                                resolve();
                            })
                            .catch((error) => {
                                // lidar com a resposta de erro ao tentar criar o pagamento
                                reject();
                            });
                    });
                },
                onError: (error) => {
                    // callback chamado para todos os casos de erro do Brick
                    console.error(error);
                },
            },
        };
        window.cardPaymentBrickController = await bricksBuilder.create(
            "cardPayment",
            "cardPaymentBrick_container",
            settings
        );
    };
    renderCardPaymentBrick(bricksBuilder);



})(window,document)

processa.php

Processa o pagamento no backend:

<?php
include('vendor/autoload.php');

use MercadoPago\MercadoPagoConfig;

MercadoPagoConfig::setAccessToken("YOUR_PRODUCTION_KEY");
$dados = json_decode(file_get_contents("php://input"),true);
$token = $dados['transactions']['payments'][0]['payment_method']['token'];

$url = 'https://api.mercadopago.com/v1/orders';

$headers = [
    'Content-Type: application/json',
    'X-Idempotency-Key: '.uniqid(),
    'Authorization: Bearer YOUR_PRODUCTION_KEY',
];

$body = [
    'type' => 'online',
    'processing_mode' => 'automatic',
    'total_amount' => '10.00',
    'external_reference' => 'ext_ref_1234',
    'payer' => [
        'email' => 'thsites@hotmail.com',
    ],
    'transactions' => [
        'payments' => [
            [
                'amount' => '10.00',
                'payment_method' => [
                    'id' => 'visa',
                    'type' => 'credit_card',
                    'token' => $token,
                    'installments' => 1,
                ],
            ],
        ],
    ],
];

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($body));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);

if (curl_errno($ch)) {
    echo 'Erro cURL: ' . curl_error($ch);
}

curl_close($ch);

$data = json_decode($response, true);

echo "HTTP Status: $httpCode\n";
print_r($data);

Não esqueça nos códigos acima de trocar a production key.

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

Ninguém vem ao Pai, senão por mim. João 14:6

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Vendas Online com Mercado Pago - #3 Checkout Pro

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.

Mercado Pago