Agregar el SDK al frontend e inicializar el checkout
Client-Side
Una vez que hayas configurado tu backend, es necesario que configures el frontend para completar la experiencia de cobro del lado del cliente. Para esto, puedes utilizar el SDK MercadoPago.js, que permite capturar pagos directamente en el frontend de manera segura.
En esta sección, verás cómo incluirlo e inicializarlo correctamente, para finalmente renderizar el botón de pago de Mercado Pago.
Incluir el SDK con HTML/js
Para incluir el SDK MercadoPago.js en tu página HTML desde un CDN (Content Delivery Network), primero deberás agregar la etiqueta <script> justo antes de la etiqueta </body> en tu archivo HTML principal, tal como te mostramos en el siguiente ejemplo.
html
<!DOCTYPE html> <html> <head> <title>Mi Integración con Checkout Pro</title> </head> <body> <!-- Contenido de tu página --> <script src="https://sdk.mercadopago.com/js/v2"></script> <script> // Tu código JavaScript irá aquí </script> </body> </html>
Inicializar el checkout desde la preferencia de pago
Después de incluir el SDK en tu frontend, es momento de inicializarlo y luego iniciar el Checkout.
Para continuar, deberás utilizar tu credencial public key de producción, a la que podrás acceder ingresando a los Detalles de tu aplicación en Tus integraciones, bajo el título Producción > Credenciales de producción en el menú ubicado a la izquierda de la pantalla.
También necesitarás utilizar el identificador de la preferencia de pago que obtuviste como respuesta en Crear y configurar una preferencia de pago.
A continuación, para inicializar el SDK utilizando un CDN, deberás ejecutar este código dentro de la etiqueta <script>, reemplazando el valor YOUR_PUBLIC_KEYpor tu clave y YOUR_PREFERENCE_ID por el identificador de la preferencia de pago.
js
<script src="https://sdk.mercadopago.com/js/v2"></script> <script> // Configura tu clave pública de Mercado Pago const publicKey = 'YOUR_PUBLIC_KEY'; // Configura el ID de preferencia que deberías recibir de tu backend const preferenceId = 'YOUR_PREFERENCE_ID'; // Inicializa el SDK de Mercado Pago const mp = new MercadoPago(publicKey); // Crea el botón de pago const checkout = mp.checkout({ preference: { id: preferenceId }, render: { container: '#wallet_container', // Usa el ID de tu div existente label: 'Pagar con Mercado Pago' } }); </script>
Crear un contenedor HTML para el botón de pago
Client-Side
Por último, necesitarás crear un contenedor en tu HTML para definir la ubicación en la cual se mostrará el botón de pago de MercadoPago. 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
<!-- Contenedor para el botón de pago --> <div id="wallet_container"></div>
Renderizar el botón de pago
El SDK de Mercado Pago renderizará automáticamente un botón dentro de este elemento, que será responsable de redirigir al comprador hacia un formulario de compra en el ambiente de Mercado Pago, tal como se muestra en la siguiente imagen.
Una vez que hayas finalizado la configuración de tu frontend, deberás configurar las Notificaciones para que tu integración reciba información en tiempo real sobre los eventos que ocurren en tu integración.