Integra con Checkout Pro
La integración con el Checkout Pro de Mercado Pago te permite cobrar a través de nuestro formulario web desde cualquier dispositivo de manera simple, rápida y segura.
Buenas prácticas
Utiliza nuestro y el para comprender más sobre la integración completa con Checkout Pro.
Paso a paso
Instalar el Checkout Pro consta de dos pasos:
- Generar las preferencias deseadas;
- Sumar el Checkout Pro a tu sitio.
1. Genera tu preferencia
Server-Side
Suma la SDK de Mercado Pago y las credenciales necesarias en tu proyecto para habilitar el uso de preferencias:
<?php
// SDK de Mercado Pago
require __DIR__ . '/vendor/autoload.php';
// Agrega credenciales
MercadoPago\SDK::setAccessToken('PROD_ACCESS_TOKEN');
?>
// SDK de Mercado Pago
const mercadopago = require("mercadopago");
// Agrega credenciales
mercadopago.configure({
access_token: "PROD_ACCESS_TOKEN",
});
// SDK de Mercado Pago
import com.mercadopago.MercadoPagoConfig;
// Agrega credenciales
MercadoPagoConfig.setAccessToken("PROD_ACCESS_TOKEN");
# SDK de Mercado Pago
require 'mercadopago'
# Agrega credenciales
sdk = Mercadopago::SDK.new('PROD_ACCESS_TOKEN')
// SDK de Mercado Pago
using MercadoPago.Config;
// Agrega credenciales
MercadoPagoConfig.AccessToken = "PROD_ACCESS_TOKEN";
# SDK de Mercado Pago
import mercadopago
# Agrega credenciales
sdk = mercadopago.SDK("PROD_ACCESS_TOKEN")
En seguida, configura la preferencia según tu producto o servicio:
Ten en cuenta que es necesario configurar las
back_urls si deseas volver a tu sitio al finalizar el pago. Para más información, visita la sección .
<?php
// Crea un objeto de preferencia
$preference = new MercadoPago\Preference();
// Crea un ítem en la preferencia
$item = new MercadoPago\Item();
$item->title = 'Mi producto';
$item->quantity = 1;
$item->unit_price = 75.56;
$preference->items = array($item);
$preference->save();
?>
// Crea un objeto de preferencia
let preference = {
items: [
{
title: "Mi producto",
unit_price: 100,
quantity: 1,
},
],
};
mercadopago.preferences
.create(preference)
.then(function (response) {
// En esta instancia deberás asignar el valor dentro de response.body.id por el ID de preferencia solicitado en el siguiente paso
})
.catch(function (error) {
console.log(error);
});
// Crea un objeto de preferencia
PreferenceClient client = new PreferenceClient();
// Crea un ítem en la preferencia
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);
# Crea un objeto de preferencia
preference_data = {
items: [
{
title: 'Mi producto',
unit_price: 75.56,
quantity: 1
}
]
}
preference_response = sdk.preference.create(preference_data)
preference = preference_response[:response]
# Este valor reemplazará el string "<%= @preference_id %>" en tu HTML
@preference_id = preference['id']
// Crea el objeto de request de la preference
var request = new PreferenceRequest
{
Items = new List<PreferenceItemRequest>
{
new PreferenceItemRequest
{
Title = "Mi producto",
Quantity = 1,
CurrencyId = "PEN",
UnitPrice = 75.56m,
},
},
};
// Crea la preferencia usando el client
var client = new PreferenceClient();
Preference preference = await client.CreateAsync(request);
# Crea un ítem en la preferencia
preference_data = {
"items": [
{
"title": "Mi producto",
"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": "Mi producto",
"quantity": 1,
"unit_price": 75.76
}
]
}'
Adapta la integración de Checkout Pro a tu negocio
Accede a la sección para saber cómo agregar nuevas funciones a Checkout Pro de acuerdo con tu modelo de negocio.
2. Suma el Checkout Pro a tu sitio
Client-Side
Agrega la SDK MercadoPago.js V2 a tu proyecto:
html
// SDK MercadoPago.js V2
<script src="https://sdk.mercadopago.com/js/v2"></script>Después, configura las credenciales de la SDK para su uso e inicializa tu checkout con el ID de la preferencia creada previamente y el identificador del elemento donde deberá mostrarse el botón de pago:
<script>
// Agrega credenciales de SDK
const mp = new MercadoPago("PUBLIC_KEY", {
locale: "es-AR",
});
// Inicializa el checkout
mp.checkout({
preference: {
id: "YOUR_PREFERENCE_ID",
},
render: {
container: ".cho-container", // Indica el nombre de la clase donde se mostrará el botón de pago
label: "Pagar", // Cambia el texto del botón de pago (opcional)
},
});
</script>
Nota
Recuerda reemplazar el valor AR por tu pais en el campo
locale.En el ejemplo anterior, se mostrará un botón de pago, que a su vez abrirá el Checkout Pro.
Puedes consultar otras maneras de abrir el checkout en la sección de Interfaz de usuario.
Importante
No te olvides de acceder al Checkout Pro desde otro navegador o cerrar la sesión de tu cuenta de Mercado Pago antes de probarlo, ya que no puedes pagar con la misma cuenta con la que creaste el formulario de pago.
Video tutorial
Implementa la solución Checkout Pro en tu sitio con nuestro video tutorial sobre la integración:
Ejemplo de implementación básica
Consulta el ejemplo de integración completa en GitHub para PHP o NodeJS para descargar un proyecto básico de implementación rápida de Checkout Pro en tu sitio.