Integrar Checkout Pro
La integración con Checkout Pro te permite cobrar a través de nuestro formulario web desde cualquier dispositivo de forma sencilla, rápida y segura.
En esta documentación encontrarás todos los pasos necesarios para integrar Checkout Pro a través de nuestras SDKs. Para hacer esto, sigue los pasos que se describen a continuación.
init_point, en la respuesta del request de la API. A partir de ahí, solo utilízalo para redirigir al comprador a la caja.Instalar SDK de Mercado Pago
El primer paso para integrar Checkout Pro es instalar el SDK de Mercado Pago en tu proyecto. Para hacer esto, usa uno de los códigos disponibles a continuación.
php composer.phar require "mercadopago/dx-php"
Para instalar el SDK debes ejecutar el siguiente código en la línea de comandos de tu terminal usando npm:
npm install mercadopago
Para instalar el SDK en tu proyecto Maven, debes agregar la siguiente dependencia en tu archivo pom.xml y ejecutar maven install en la línea de comandos de tu terminal:
<dependency>
<groupId>com.mercadopago</groupId>
<artifactId>sdk-java</artifactId>
<version>2.0.0</version>
</dependency>
Para instalar la SDK, debes ejecutar el siguiente código en la línea de comandos de tu terminal usando gema:
gem install mercadopago-sdk
Para instalar la SDK debes ejecutar el siguiente código en la línea de comandos de tu terminal usando NuGet:
nuget install mercadopago-sdk
Para instalar el SDK debes ejecutar el siguiente código en la línea de comandos de tu terminal usando Pip:
pip3 install mercadopago
Crear preferencia
Server-Side
Las preferencias son conjuntos de información que te permiten configurar un producto o servicio que deseas cobrar, como el precio y la cantidad, así como otras configuraciones relacionadas con el flujo de pago definido.
Para crear una preferencia, utiliza uno de los SDK disponibles a continuación, completando los atributos con la información respectiva.
<?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")
Cuando termines de crear la preferencia, debes configurarla de acuerdo con tu producto o servicio. Para ello, utiliza uno de los códigos disponibles a continuación, completando los atributos con la información respectiva.
<?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;
$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) {
// Este valor reemplazará el string "<%= global.id %>" en tu HTML
global.id = response.body.id;
})
.catch(function (error) {
console.log(error);
});
// Crea un objeto de preferencia
Preference preference = new Preference();
// Crea un ítem en la preferencia
Item item = new Item();
item.setTitle("Mi producto")
.setQuantity(1)
.setUnitPrice((float) 75);
preference.appendItem(item);
preference.save();
# Crea un objeto de preferencia
preference_data = {
items: [
{
title: 'Mi producto',
unit_price: 75,
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 = "COP",
UnitPrice = 75m,
},
},
};
// 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
}
]
}
preference_response = sdk.preference().create(preference_data)
preference = preference_response["response"]
unit_price debe ser un número entero.Añadir checkout
Client-Side
Una vez que hayas creado la preferencia en tu backend, deberás instalar el SDK de frontend de Mercado Pago en tu proyecto para agregar el botón Checkout Pro.
La instalación se realiza en dos pasos: agregar el SDK de Mercado Pago al proyecto con tus credenciales configuradas e iniciar el checkout desde la preferencia generada previamente.
- Para incluir el SDK de Mercado Pago.js, agrega el siguiente código al HTML del proyecto.
html
// SDK MercadoPago.js
<script src="https://sdk.mercadopago.com/js/v2"></script>- Cuando termines de agregar el SDK de Mercado Pago.js, configura las credenciales del SDK e inicia tu checkout con el ID de la preferencia creada anteriormente y el identificador del elemento donde se debe mostrar el botón de pago, como se muestra en el siguiente ejemplo.
<div class="cho-container"></div>
<script>
const mp = new MercadoPago('PUBLIC_KEY', {
locale: 'es-AR'
});
mp.checkout({
preference: {
id: 'YOUR_PREFERENCE_ID'
},
render: {
container: '.cho-container',
label: 'Pagar',
}
});
</script>
Pendiente, Rechazado y Aprobado. Para mantenerse al día con las actualizaciones, debes configurar tu sistema para recibir notificaciones de pago y otras actualizaciones de estado. Consulta
Notificaciones
para obtener más detalles.En el ejemplo anterior, se mostrará un botón de pago y será responsable por abrir el Checkout Pro. Si deseas personalizar la forma en que se abrirá el Checkout, consulta la sección Esquema de apertura
Ejemplo de implementación
Consulta el ejemplo de integración completa en GitHub para PHP o NodeJS para descargar un proyecto básico para una implementación rápida de Checkout Pro en tu sitio.
Para instalar el SDK debes ejecutar el siguiente código en la línea de comandos de tu terminal usando Composer: