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.
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:
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
}
]
}'
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>
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.
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.