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.MercadoPagoConfig;
// Adicione as credenciais
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")

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 Configurações adicionais .

          
<?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
PreferenceClient client = new PreferenceClient();

// Cria um item na preferência
List<PreferenceItemRequest> items = new ArrayList<>();
PreferenceItemRequest item =
   PreferenceItemRequest.builder()
       .title("Meu produto")
       .quantity(1)
       .unitPrice(new BigDecimal("100"))
       .build();
items.add(item);

PreferenceRequest request = PreferenceRequest.builder().items(items).build();

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 = "PEN",
            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 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 site

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:

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

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 Interface de usuário.

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.

Prerequisites

Integration test