Vendas Online com Mercado Pago - #5 Pix

11/05/2026

No tutorial de hoje aprenderemos como implementar o pix através do checkout transparente no seu site ou blog.

Pix do Mercado Pago

Para exportar produtos faremos o seguinte código:

pix.php

O html ficará assim:

<!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>

    <form id="form-checkout" action="/processa_pix.php" method="post">
        <div>
            <div>
                <label for="payerFirstName">Nome</label>
                <input id="form-checkout__payerFirstName" name="payerFirstName" type="text">
            </div>
            <div>
                <label for="payerLastName">Sobrenome</label>
                <input id="form-checkout__payerLastName" name="payerLastName" type="text">
            </div>
            <div>
                <label for="email">E-mail</label>
                <input id="form-checkout__email" name="email" type="text">
            </div>
            <div>
                <label for="identificationType">Tipo de documento</label>
                <select id="form-checkout__identificationType" name="identificationType" type="text"></select>
            </div>
            <div>
                <label for="identificationNumber">Número do documento</label>
                <input id="form-checkout__identificationNumber" name="identificationNumber" type="text">
            </div>
        </div>

        <div>
            <div>
                <input type="hidden" name="transactionAmount" id="transactionAmount" value="100">
                <input type="hidden" name="description" id="description" value="Nome do Produto">
                <br>
                <button type="submit">Pagar</button>
            </div>
        </div>
    </form>


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

javascript.js

A ligação do backend com o frontend se dará pelo javascript:

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

    const mp = new MercadoPago("SEU PUBLIC_KEY");

    (async function getIdentificationTypes() {
        try {
            const identificationTypes = await mp.getIdentificationTypes();
            const identificationTypeElement = document.getElementById('form-checkout__identificationType');

            createSelectOptions(identificationTypeElement, identificationTypes);
        } catch (e) {
            return console.error('Error getting identificationTypes: ', e);
        }
    })();

    function createSelectOptions(elem, options, labelsAndKeys = { label: "name", value: "id" }) {
        const { label, value } = labelsAndKeys;

        elem.options.length = 0;

        const tempOptions = document.createDocumentFragment();

        options.forEach(option => {
            const optValue = option[value];
            const optLabel = option[label];

            const opt = document.createElement('option');
            opt.value = optValue;
            opt.textContent = optLabel;

            tempOptions.appendChild(opt);
        });

        elem.appendChild(tempOptions);
    }

})(window,document)

processa_pix.php

Por fim faremos o processamento do pagamento.

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

use MercadoPago\MercadoPagoConfig;

MercadoPagoConfig::setAccessToken("SEU TOKEN");


$accessToken = 'SEU TOKEN';
$idempotencyKey = uniqid();

$dados = [
    "type" => "online",
    "total_amount" => "10.00",
    "external_reference" => "ext_ref_1234",
    "processing_mode" => "automatic",
    "transactions" => [
        "payments" => [
            [
                "amount" => "10.00",
                "payment_method" => [
                    "id" => "pix",
                    "type" => "bank_transfer"
                ],
                "expiration_time" => "P3Y6M4DT12H30M5S"
            ]
        ]
    ],
    "payer" => [
        "email" => "thsites@hotmail.com"
    ]
];

$curl = curl_init();

curl_setopt_array($curl, [
    CURLOPT_URL => 'https://api.mercadopago.com/v1/orders',
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POST => true,
    CURLOPT_POSTFIELDS => json_encode($dados),
    CURLOPT_HTTPHEADER => [
        'accept: application/json',
        'Content-Type: application/json',
        'Authorization: Bearer ' . $accessToken,
        'X-Idempotency-Key: ' . $idempotencyKey
    ],
]);

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

/*if (curl_errno($curl)) {
    echo 'Erro CURL: ' . curl_error($curl);
} else {
    echo "HTTP CODE: " . $httpCode . PHP_EOL;
    echo $response;
}*/
curl_close($curl);

$retorno = json_decode($response, true);

// pega o base64 do QR Code
$qrCodeBase64 = $retorno['transactions']['payments'][0]['payment_method']['qr_code_base64'];
$copiaCola = $retorno['transactions']['payments'][0]['payment_method']['qr_code'];


// exibe diretamente no HTML
echo '<img width=300 src="data:image/png;base64,' . $qrCodeBase64 . '" alt="QR Code PIX">';
echo '<br>';
echo $copiaCola;

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 - #4 Checkout Transparente

Neste tutorial implementaremos o checkout transparente do Mercado Pago.

Mercado Pago