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.
Passo a passo
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:
back_urls
se você quiser retornar ao seu site ao final do pagamento. Para mais informações, visite a seção .
<?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
}
]
}'
2. Adicione o Checkout Pro ao seu
Client-Side
Inclua o SDK MercadoPago.js
V2 no seu projeto:
html
// 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>
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.
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.