Vendas Online via API com Mercado Pago - #2 Pagamento por Botão, QR Code e Email
23/02/2020No vídeo de hoje aprenderemos como realizar os pagamentos mais simples disponibilizados pela plataforma do Mercado Pago, sendo eles botão, link, QRCode e email.
Pagamento por email
Para solicitar um pagamento pelo email do seu cliente, basta você acessar a plataforma do mercadopago.com.br/developers, acessar painel de controle >> solicitar pagamento . O cliente receberá um email com o link para efetuar o pagamento e o dinheiro irá direto para sua conta do Mercado Pago.
Pagamento por QR Code
Para solicitar um pagamento pelo link do QR Code, basta você criar o QR Code na plataforma e encaminhar para seu cliente.
Link de Pagamento
Para pagamento com link, basta encaminhar a url do link para o cliente que ele já cairá na página para efetuar o pagamento.
Botão de Pagamento
Dos métodos mostrados acima, o botão de pagamento é o único que exige um pouco de conhecimento html. Você precisará copiar o código e colá-lo no body da sua página html.
Primeiramente vamos criar o arquivo index.php dentro de c:/wamp64/www. Lembre-se também de ativar o WampServer instalado na primeira aula. Criaremos também as pastas img para abrigar imagens e lib para abrigar css, javascript... Veja como ficou nosso diretório.
Noss html ficará assim:
<!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 Inicial</title>
<link rel="stylesheet" href="lib/style.css">
</head>
<body>
<div class="product">
<div class="product_title">Pen Drive</div>
<div class="product_image"><img src="img/pendrive.jpg" alt=""></div>
<div class="product_desc">Pen Drive de 16gb</div>
<div class="product_btn"><a mp-mode="dftl" href="https://www.mercadopago.com.br/checkout/v1/redirect?pref_id=195847594-a01a159b-e14b-4187-a62d-6b18f3b9039d" name="MP-payButton" class='green-ar-s-rn-none'>Pagar</a></div>
</div>
<div class="product">
<div class="product_title">Celular</div>
<div class="product_image"><img src="img/celular.jpg" alt=""></div>
<div class="product_desc">Celular Sony</div>
<div class="product_btn"><a mp-mode="dftl" href="https://www.mercadopago.com.br/checkout/v1/redirect?pref_id=195847594-890b6b56-eda7-41e1-bcbe-03623318f51f" name="MP-payButton" class='blue-ar-l-rn-none'>Pagar</a></div>
</div>
<script type="text/javascript"> (function(){function $MPC_load(){window.$MPC_loaded !== true && (function(){var s = document.createElement("script");s.type = "text/javascript";s.async = true;s.src = document.location.protocol+"//secure.mlstatic.com/mptools/render.js";var x = document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);window.$MPC_loaded = true;})();}window.$MPC_loaded !== true ? (window.attachEvent ?window.attachEvent('onload', $MPC_load) : window.addEventListener('load', $MPC_load, false)) : null;})();</script>
</body>
</html>E o nosso css ficará assim:
*{margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif;}
.product{display: inline-block; width: 20%;margin: 10px 2.5%;box-shadow: 0 5px 20px #ccc;}
.product_title{width: 100%;background: #333;padding: 10px;color: #fff;font-weight: bold;text-align: center;}
.product_image{padding: 10px 40px;}
.product_image img{max-width: 100%;}
.product_desc{font-size: 16px; text-align: center;}
.product_btn{text-align: center;}Por hoje é só! Sucesso nos códigos e na vida!
Posts Relacionados
