Como criar um arquivo HTML que usa a API do MercadoPago para exibir conteúdo após confirmação de pagamento e salvar dados no servidor

Neste artigo, vamos mostrar como criar um arquivo HTML que usa a API do MercadoPago para exibir um conteúdo específico após a confirmação do pagamento. Também vamos salvar os dados do pagamento em um diretório chamado ‘transactions’ no servidor.

O MercadoPago é uma plataforma de pagamento online que permite que os usuários realizem compras e vendas pela internet de forma fácil e segura. Além disso, a plataforma fornece uma API que permite aos desenvolvedores integrarem a plataforma de pagamento em seus sites e aplicativos.

Passo 1: Criar uma conta no MercadoPago e gerar as credenciais de integração

O primeiro passo para utilizar a API do MercadoPago é criar uma conta no site da plataforma. Depois de criar a conta, você deve acessar a seção de “Integração” e gerar as credenciais de integração (Client ID e Client Secret) para o seu site ou aplicativo.

  1. Acesse o site do MercadoPago e crie uma conta.
  2. Acesse a seção de “Integração” e crie uma aplicação.
  3. Anote as credenciais de integração (Client ID e Client Secret) geradas pelo MercadoPago.

Passo 2: Incluir o SDK do MercadoPago em seu projeto

O próximo passo é incluir o SDK do MercadoPago em seu projeto. O SDK é uma biblioteca que contém todas as funções e métodos necessários para se comunicar com a API do MercadoPago. Para incluir o SDK, você deve baixá-lo do site do MercadoPago e incluir o arquivo JavaScript em seu projeto.

  1. Baixe o SDK do MercadoPago no site da plataforma.
  2. Inclua o arquivo JavaScript em seu projeto usando a tag <script> do HTML.

Exemplo:

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

Passo 3: Criar o formulário de pagamento

Agora que o SDK do MercadoPago está incluído em seu projeto, você pode criar o formulário de pagamento. O formulário de pagamento deve incluir os campos necessários para coletar as informações do comprador, como nome, endereço, e-mail e número do cartão de crédito. Também é necessário incluir um botão de pagamento que irá chamar a função de pagamento do SDK do MercadoPago.

  1. Crie um formulário HTML que inclua os campos necessários para coletar as informações do comprador (nome, endereço, e-mail e número do cartão de crédito).
  2. Adicione um botão de pagamento que chame a função de pagamento do SDK do MercadoPago.

Exemplo:

<form>
  <input type="text" name="name" placeholder="Nome completo">
  <input type="text" name="address" placeholder="Endereço">
  <input type="email" name="email" placeholder="Endereço de e-mail">
  <input type="text" name="card_number" placeholder="Número do cartão de crédito">
  <button id="pay-button">Pagar</button>
</form>
// Configuração do SDK do MercadoPago
Mercadopago.setPublishableKey('SEU_CLIENT_ID');

// Função de pagamento
var doCheckout = function() {
  var card = {
    "number": document.querySelector('input[name=card_number]').value,
    "name": document.querySelector('input[name=name]').value,
    "expiry_month": document.querySelector('input[name=expiry_month]').value,
    "expiry_year": document.querySelector('input[name=expiry_year]').value,
    "cvv": document.querySelector('input[name=cvv]').value
  };

  Mercadopago.createToken(card, function(response, status) {
    if (status == 200 || status == 201) {
      // Enviar token para o servidor e processar o pagamento
    } else {
      // Exibir erro
    }
  });
};

// Adicionar evento de clique ao botão de pagamento
document.querySelector('#pay-button').addEventListener('click', doCheckout);

Passo 4: Processar o pagamento

Quando o comprador clica no botão de pagamento, o SDK do MercadoPago envia as informações de pagamento para o servidor do MercadoPago. O servidor do MercadoPago processa o pagamento e retorna um código de status para o seu site ou aplicativo.

Se o pagamento for aprovado, o código de status será “approved”. Nesse caso, você pode exibir o conteúdo específico para o usuário. Se o pagamento for reprovado, o código de status será “rejected” e você deve informar ao usuário que o pagamento não foi aprovado.

  1. Receba o código de status do servidor do MercadoPago após a tentativa de pagamento.
  2. Verifique se o código de status é “approved”.
  3. Exiba o conteúdo específico para o usuário.

Exemplo:

Mercadopago.checkout({
  preference: {
    // Configuração da preferência de pagamento
  }
}).then(function(response) {
  // Receber o código de status do servidor do MercadoPago
  var status = response.status;

  // Verificar se o pagamento foi aprovado
  if (status === 'approved') {
    // Exibir conteúdo específico para o usuário
  } else {
    // Exibir mensagem de pagamento reprovado
  }
}).catch(function(error) {
  // Exibir mensagem de erro
});

Passo 5: Salvar os dados do pagamento no servidor

Por fim, você deve salvar os dados do pagamento em um diretório chamado ‘transactions’ no servidor. Os dados do pagamento devem incluir informações como o valor do pagamento, o ID da transação, o nome do comprador, o endereço de e-mail e o status do pagamento.

Para salvar os dados do pagamento, você pode criar um arquivo PHP que receba os dados do pagamento via POST e os salve em um arquivo de texto ou em um banco de dados.

  1. Crie um diretório “transactions” no servidor onde os dados do pagamento serão salvos.
  2. Salve os dados do pagamento em um arquivo JSON nomeado com o ID do pagamento gerado pelo MercadoPago.

Exemplo:

// Receber o ID do pagamento gerado pelo MercadoPago
var paymentId = response.id;

// Salvar os dados do pagamento em um arquivo JSON
var transactionData = {
  "id": paymentId,
  "name": document.querySelector('input[name=name]').value,
  "email": document.querySelector('input[name=email]').value,
  "amount": document.querySelector('input[name=amount]').value
};
var xhr = new XMLHttpRequest();
xhr.open('POST', '/transactions/' + paymentId + '.json');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('Dados do pagamento salvos com sucesso.');
  } else {
    console.log('Erro ao salvar os dados do pagamento.');
  }
};
xhr.send(JSON.stringify(transactionData));

Passo 6: Exibir o conteúdo após a confirmação do pagamento

  1. Crie um arquivo HTML com o conteúdo que deve ser exibido após a confirmação do pagamento.
  2. Verifique se o arquivo JSON correspondente ao ID do pagamento gerado pelo MercadoPago existe no diretório “transactions”.
  3. Exiba o conteúdo específico para o usuário.

Exemplo:

// Receber o ID do pagamento gerado pelo MercadoPago
var paymentId = response.id;

// Verificar se o arquivo JSON correspondente ao ID do pagamento existe
var xhr = new XMLHttpRequest();
xhr.open('GET', '/transactions/' + paymentId + '.json');
xhr.onload = function() {
  if (xhr.status === 200) {
    var transactionData = JSON.parse(xhr.responseText);
    // Exibir conteúdo específico para o usuário
  } else {
    // Exibir mensagem de erro
  }
};
xhr.send();

Conclusão

Integrar a API do MercadoPago em seu site ou aplicativo é uma ótima maneira de aceitar pagamentos online de forma fácil e segura. Com os passos descritos acima, você pode criar um formulário de pagamento e exibir conteúdo específico após a confirmação do pagamento. Além disso, é importante salvar os dados do pagamento em um diretório seguro no servidor para fins de registro e controle.

Com a API do MercadoPago, é possível criar um sistema de pagamento seguro e eficiente para seu website ou aplicativo. Neste artigo, demonstramos como criar um arquivo HTML que use a API do MercadoPago para exibir um certo conteúdo após a confirmação do pagamento e salvar os dados do pagamento em um diretório “transactions” no servidor. Com essas informações, você poderá implementar um sistema de pagamento personalizado para seu projeto.