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.
Instalar SDK de Mercado Pago
Server-Side
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.1.7</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);
});
PreferenceItemRequest itemRequest =
PreferenceItemRequest.builder()
.id("1234")
.title("Games")
.description("PS5")
.pictureUrl("http://picture.com/PS5")
.categoryId("games")
.quantity(2)
.currencyId("BRL")
.unitPrice(new BigDecimal("4000"))
.build();
List<PreferenceItemRequest> items = new ArrayList<>();
items.add(itemRequest);
PreferenceRequest preferenceRequest = PreferenceRequest.builder()
.items(items).build();
PreferenceClient client = new PreferenceClient();
Preference preference = client.create(request);
# 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 de pago.
La instalación se realiza, básicamente, 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 o instale la biblioteca para ReactJs.
// SDK MercadoPago.js
<script src="https://sdk.mercadopago.com/js/v2"></script>
npm install @mercadopago/sdk-react
Luego, inicialice la integración configurando tu clave pública usando el siguiente código JavaScript.
const mp = new MercadoPago('YOUR_PUBLIC_KEY');
const bricksBuilder = mp.bricks();
import { initMercadoPago, Wallet } from '@mercadopago/sdk-react'
initMercadoPago('YOUR_PUBLIC_KEY');
Para las integraciones de JavaScript/HTML, a través de CDN, deberá crear un contenedor de identificador para definir la ubicación donde se insertará el botón en la pantalla. La creación del contenedor se realiza insertando un elemento en el código HTML de la página en la que se representará el componente.
html
<div id="wallet_container"></div>- Al finalizar el paso anterior, inicializa tu checkout usando el ID de la preferencia previamente creada con el identificador del elemento donde se debe mostrar el botón, si estás usando la integración
Javascript/HTML, o por instanciando el componente, en el caso de la bibliotecaReact, como se muestra en los ejemplos a continuación.
mp.bricks().create("wallet", "wallet_container", {
initialization: {
preferenceId: "<PREFERENCE_ID>",
},
});
<Wallet initialization={{ preferenceId: '<PREFERENCE_ID>' }} />
A continuación, podrá observar el botón de pago que se muestra en su página.
En el ejemplo anterior, se mostrará un botón de pago y será responsable por abrir el Checkout Pro. Si desea que la experiencia con Checkout Pro se realice en una pestaña externa o de manera modal, consulte la sección Esquema de apertura
back_urls porque serán las encargadas de guiar el flujo de regreso a su sitio web cuando se complete el pago. Es posible definir tres URL de retorno diferentes, para escenarios de pago pendiente, éxito o error. Para obtener más información, consulte la sección
URL de retorno.
.\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.
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: