Integrar Checkout Pro - Checkout Pro - Mercado Pago Developers

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.

También es posible realizar la integración con llamadas a través del backend directamente a la API de preferencias . En esta opción, obtendrá el enlace de Checkout Pro en el atributo 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.

Para instalar el SDK debes ejecutar el siguiente código en la línea de comandos de tu terminal usando Composer:

          
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 = "CLP",
            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"]

        
Importante
El valor de 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.

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

        
Importante
Al crear un pago es posible recibir 3 estados diferentes: 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.