Integre com o Checkout Pro

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

Nota

Use o nosso vídeo tutorial e o exemplo de implementação básica para mais informações sobre a integração com o Checkout Pro.

Passo a passo

Integration

Instalar o Checkout Pro requer duas etapas principais:

Criar as preferências desejadas;
Adicionar o Checkout Pro em seu site.

1. Crie sua preferência

Server-Side

Adicione o SDK do Mercado Pago e as credenciais necessárias ao seu projeto para habilitar o uso de preferências:

          
<?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 do Mercado Pago
import com.mercadopago.MercadoPago;
// Adicione as credenciais
MercadoPago.SDK.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")

Em seguida, configure a preferência de acordo com o seu produto ou serviço:

Considere que é necessário configurar as back_urls se você quiser retornar ao seu site ao final do pagamento. Para mais informações, visite a seção Integração avançada.

          
<?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);
});

          
// Cria um objeto de preferência
Preference preference = new Preference();

// Cria um item na preferência
Item item = new Item();
item.setTitle("Meu produto")
    .setQuantity(1)
    .setUnitPrice((float) 75.56);
preference.appendItem(item);
preference.save();

          
# 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"]

          
curl -X POST \
  'https://api.mercadopago.com/checkout/preferences' \
  -H 'Content-Type: application/json' \
  -H 'cache-control: no-cache' \
  -H 'Authorization: Bearer **PROD_ACCESS_TOKEN**' \
  -d '{
    "items": [
        {
            "title": "Meu produto",
            "quantity": 1,
            "unit_price": 75.76
        }
    ]
}'

Adapte a integração do Checkout Pro ao seu negócio

Acesse a seção Configuração de Preferências para saber como adicionar novas funcionalidades ao Checkout Pro de acordo com o seu modelo negócio.

2. Adicione o Checkout Pro ao seu

Client-Side

Inclua o SDK MercadoPago.js V2 no seu projeto:

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

Depois, configure as credenciais do SDK para seu uso individual, 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:

          
<script>
// Adicione as credenciais do SDK
  const mp = new MercadoPago('PUBLIC_KEY', {
        locale: 'pt-BR'
  });

  // Inicialize o checkout
  mp.checkout({
      preference: {
          id: 'YOUR_PREFERENCE_ID'
      },
      render: {
            container: '.cho-container', // Indique o nome da class onde será exibido o botão de pagamento
            label: 'Pagar', // Muda o texto do botão de pagamento (opcional)
      }
});
</script>

Nota

Lembre-se de substituir o valor BR por seu país no campo locale.

No exemplo acima, um botão de pagamento será renderizado e ficará responsável por abrir o Checkout Pro.

Você pode consultar outras maneiras de abrir o checkout na seção Customizações.

Importante

Não esqueça de acessar o Checkout Pro com outro navegador ou encerrar a sessão da sua conta do Mercado Pago antes de testá-lo, já que você não poderá pagar com a mesma conta responsável por criar o formulário de pagamento.

Vídeo tutorial

Saiba como implementar a solução Checkout Pro em seu site com o nosso vídeo tutorial:

Exemplo de implementação básica

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

Próximo passo

OBRIGATÓRIO

Teste a sua integração com o Checkout Pro

Confira se a sua integração está funcionando corretamente com usuários de teste.