Integrar Checkout Pro - Checkout Pro - Mercado Pago Developers

Integrar Checkout Pro

A integração com o Checkout Pro permite realizar cobranças através do nosso formulário web a partir qualquer dispositivo de forma simples, rápida e segura.

Nesta documentação você encontra todos os passos necessários para integrar o Checkout Pro através dos nossos SDKs. Para isso, siga as etapas descritas abaixo.

Também é possível realizar a integração através de chamadas via backend diretamente para a API de Preferências . Neste modelo, você obterá o link do Checkout Pro no atributo init_point, na resposta à requisição da API. A partir daí, basta utilizá-lo para redirecionar o comprador ao checkout.

Instalar SDK do Mercado Pago

A primeira etapa para integrar o Checkout Pro é a instalação do SDK do Mercado Pago em seu projeto. Para isso, utilize um dos códigos disponíveis abaixo.

Para instalar o SDK, você deve executar o seguinte código na linha de comandos do seu terminal usando o Composer:

          
php composer.phar require "mercadopago/dx-php"

Para instalar o SDK, você deve executar o seguinte código na linha de comandos do seu terminal usando npm:

          
npm install mercadopago

Para instalar o SDK no seu projeto Maven, você deve adicionar a seguinte dependência ao seu arquivo pom.xml e executar o código maven install na linha de comandos do seu terminal:

          
<dependency>
   <groupId>com.mercadopago</groupId>
   <artifactId>sdk-java</artifactId>
   <version>2.1.7</version>
</dependency>

Para instalar o SDK, você deve executar o seguinte código na linha de comandos do seu terminal usando gema:

          
gem install mercadopago-sdk

Para instalar o SDK, você deve executar o seguinte código na linha de comandos do seu terminal usando NuGet:

          
nuget install mercadopago-sdk

Para instalar o SDK, você deve executar o seguinte código na linha de comandos do seu terminal usando pip:

          
pip3 install mercadopago

Criar preferência

Server-Side

Preferências são conjuntos de informações que permitem configurar um produto ou serviço que se deseja cobrar, como preço e quantidade, além de outras configurações relacionadas ao fluxo de pagamento definido.

Para criar uma preferência, utilize um dos SDKs disponíveis abaixo preenchendo os atributos com as respectivas informações.

          
<?php
// SDK do Mercado Pago
require __DIR__ .  '/vendor/autoload.php';
// Adicione as credenciais
MercadoPago\SDK::setAccessToken('PROD_ACCESS_TOKEN');
?>

          
// SDK do Mercado Pago
const mercadopago = require ('mercadopago');
// Adicione as credenciais
mercadopago.configure({
  access_token: 'PROD_ACCESS_TOKEN'
});

          
// SDK de Mercado Pago
import com.mercadopago.MercadoPagoConfig;
// Agrega credenciales
MercadoPagoConfig.setAccessToken("PROD_ACCESS_TOKEN");

          
# SDK do Mercado Pago
require 'mercadopago'
# Adicione as credenciais
sdk = Mercadopago::SDK.new('PROD_ACCESS_TOKEN')

          
// SDK do Mercado Pago
 using MercadoPago.Config;
 // Adicione as credenciais
MercadoPagoConfig.AccessToken = "PROD_ACCESS_TOKEN";

          
# SDK do Mercado Pago
import mercadopago
# Adicione as credenciais
sdk = mercadopago.SDK("PROD_ACCESS_TOKEN")

Ao finalizar a criação da preferência, é preciso configurá-la de acordo com seu produto ou serviço. Para isso, utilize um dos códigos disponíveis abaixo preenchendo os atributos com as respectivas informações.

          
<?php
// Cria um objeto de preferência
$preference = new MercadoPago\Preference();

// Cria um item na preferência
$item = new MercadoPago\Item();
$item->title = 'Meu produto';
$item->quantity = 1;
$item->unit_price = 75.56;
$preference->items = array($item);
$preference->save();
?>

          
// Cria um objeto de preferência
let preference = {
  items: [
    {
      title: 'Meu produto',
      unit_price: 100,
      quantity: 1,
    }
  ]
};

mercadopago.preferences.create(preference)
.then(function(response){
// Este valor substituirá a string "<%= global.id %>" no seu HTML
  global.id = response.body.id;
}).catch(function(error){
  console.log(error);
});

          
 PreferenceItemRequest itemRequest =
       PreferenceItemRequest.builder()
           .id("1234")
           .title("Games")
           .description("PS5")
           .pictureUrl("http://picture.com/PS5")
           .categoryId("games")
           .quantity(2)
           .currencyId("BRL")
           .unitPrice(new BigDecimal("4000"))
           .build();
   List<PreferenceItemRequest> items = new ArrayList<>();
   items.add(itemRequest);
PreferenceRequest preferenceRequest = PreferenceRequest.builder()
.items(items).build();
PreferenceClient client = new PreferenceClient();
Preference preference = client.create(request);

          
# Cria um objeto de preferência
preference_data = {
  items: [
    {
      title: 'Meu produto',
      unit_price: 75.56,
      quantity: 1
    }
  ]
}
preference_response = sdk.preference.create(preference_data)
preference = preference_response[:response]

# Este valor substituirá a string "<%= @preference_id %>" no seu HTML
@preference_id = preference['id']

          
// Cria o objeto de request da preferência
var request = new PreferenceRequest
{
    Items = new List<PreferenceItemRequest>
    {
        new PreferenceItemRequest
        {
            Title = "Meu produto",
            Quantity = 1,
            CurrencyId = "ARS",
            UnitPrice = 75.56m,
        },
    },
};

// Cria a preferência usando o client
var client = new PreferenceClient();
Preference preference = await client.CreateAsync(request);

          
# Cria um item na preferência
preference_data = {
    "items": [
        {
            "title": "My Item",
            "quantity": 1,
            "unit_price": 75.76
        }
    ]
}

preference_response = sdk.preference().create(preference_data)
preference = preference_response["response"]

Adicionar Checkout

Client-Side

Após ter criado a preferência em seu backend, será necessário instalar o SDK de frontend do Mercado Pago ao seu projeto para adicionar o botão do Checkout Pro.

A instalação é feita em duas etapas: incluindo o SDK do Mercado Pago ao projeto com suas credenciais configuradas e iniciando o checkout a partir da preferência gerada anteriormente.

Para incluir o SDK Mercado Pago.js, adicione o código abaixo no HTML do projeto.

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

Ao finalizar a inclusão do SDK Mercado Pago.js, configure as credenciais do SDK e inicialize seu checkout com o ID da preferência previamente criada e o identificador do elemento onde o botão de pagamento deverá ser exibido conforme exemplo abaixo.

          
<div class="cho-container"></div>
<script>
  const mp = new MercadoPago('PUBLIC_KEY', {
    locale: 'pt-BR'
  });

  mp.checkout({
    preference: {
      id: 'YOUR_PREFERENCE_ID'
    },
    render: {
      container: '.cho-container',
      label: 'Pagar',
    }
  });
</script>

Importante

Os pagamentos criados possuem os seguintes status: Pendente, Rejeitado e Aprovado. Para acompanhar as atualizações é necessário configurar seu sistema para receber as notificações de pagamentos e outras atualizações de status. Veja Notificações para mais detalhes.

No exemplo acima, um botão de pagamento será renderizado e ficará responsável por abrir o Checkout Pro. Caso queira personalizar a forma como o checkout será aberto, veja a seção Esquema de abertura

Exemplo de implementação

Confira o exemplo completo de integração no GitHub para PHP ou NodeJS para fazer o download de um projeto básico de implementação rápida do Checkout Pro.

Pré-requisitos

Conheça os pré-requisitos necessários para realizar a integração com Checkout Pro.

Teste de integração

Conheça as etapas necessárias para testar sua integração com Checkout Pro.