Primero, asegúrate de haber creado la preferencia en tu backend.

Luego, 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:

1. Agregar el SDK de Mercado Pago al proyecto con tus credenciales configuradas
2. Iniciar el checkout desde la preferencia

Para incluir el SDK de Mercado Pago.js, agrega el siguiente código al HTML del proyecto o instala la biblioteca para ReactJs.

          
// SDK MercadoPago.js
<script src="https://sdk.mercadopago.com/js/v2"></script>

        

          
npm install @mercadopago/sdk-react

        

Luego, inicializa 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ás 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.

 <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 instanciando el componente, en el caso de la biblioteca React, como se muestra en los ejemplos a continuación.

          
mp.bricks().create("wallet", "wallet_container", {
   initialization: {
       preferenceId: "<PREFERENCE_ID>",
   },
customization: {
 texts: {
  valueProp: 'smart_option',
 },
 },
});

        

          
<Wallet initialization={{ preferenceId: '<PREFERENCE_ID>' }} customization={{ texts:{ valueProp: 'smart_option'}}} />

        

A continuación, encontrarás el botón de pago que se muestra en tu página.

En el ejemplo anterior, se renderizará un botón de pago que será responsable por abrir el Checkout Pro. Si deseas que la experiencia con Checkout Pro se realice en una pestaña externa, consulta la sección Esquema de apertura

Al final del proceso de pago, es posible redirigir al comprador a otro entorno del sitio a través del atributo back_urls que se configura al crear la preferencia. Las back_urls serán las encargadas de guiar el flujo de regreso a tu sitio web cuando se complete el pago. Es posible definir tres URL de retorno diferentes que corresponden a escenarios de pago pendiente, éxito o error.

Para obtener más información, consulta 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.

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.