Agregar el SDK al frontend e inicializar el checkout
Client-Side
Una vez que hayas configurado tu backend y creado la Order, 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 renderizar el boton de pago de Mercado Pago y redirigir al comprador al init_point obtenido en la respuesta de la creacion de la Order.
En esta seccion, veras como incluirlo e inicializarlo correctamente, para finalmente renderizar el boton de pago de Mercado Pago.
Incluir el SDK con HTML/js
Para incluir el SDK MercadoPago.js en tu pagina HTML desde un CDN (Content Delivery Network), primero deberas 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 Integracion con Checkout Pro</title> </head> <body> <!-- Contenido de tu pagina --> <script src="https://sdk.mercadopago.com/js/v2"></script> <script> // Tu codigo JavaScript ira aqui </script> </body> </html>
Inicializar el checkout desde la Order
Despues de incluir el SDK en tu frontend, es momento de inicializarlo y luego iniciar el checkout utilizando el init_point obtenido en la respuesta de la creacion de la Order.
Para continuar, utiliza tu credencial Public Key de pruebasClave publica de pruebas, que es utilizada en el frontend para acceder a informacion y cifrar datos, sea en la etapa de desarrollo o en la de pruebas. Puedes acceder a ella a traves de *Tus integraciones > Detalles de aplicacion > Pruebas > Credenciales de prueba*..
Tambien necesitaras utilizar el init_point que obtuviste como respuesta al crear la Order.
A continuacion, para inicializar el SDK utilizando un CDN, deberas ejecutar este codigo dentro de la etiqueta <script>, reemplazando el valor YOUR_PUBLIC_KEY por tu clave y YOUR_INIT_POINT por el init_point obtenido de la respuesta de la Order.
Javascript
<script src="https://sdk.mercadopago.com/js/v2"></script> <script> // Configura tu clave publica de Mercado Pago const publicKey = "YOUR_PUBLIC_KEY"; // El init_point obtenido de la respuesta de la creacion de la Order const initPoint = "YOUR_INIT_POINT"; // Inicializa el SDK de Mercado Pago const mp = new MercadoPago(publicKey); // Crea el boton de pago const bricksBuilder = mp.bricks(); const renderWalletBrick = async (bricksBuilder) => { await bricksBuilder.create("wallet", "walletBrick_container", { initialization: { redirectMode: "self" }, callbacks: { onSubmit: () => { // Redirige al comprador al init_point de la Order window.location.href = initPoint; } } }); }; renderWalletBrick(bricksBuilder); </script>
Crear un contenedor HTML para el boton de pago
Client-Side
Por ultimo, necesitaras crear un contenedor en tu HTML para definir la ubicacion en la cual se mostrara el boton de pago de MercadoPago. La creacion del contenedor se realiza insertando un elemento en el codigo HTML de la pagina en la que se representara el componente.
html
<!-- Contenedor para el boton de pago --> <div id="walletBrick_container"></div>
Renderizar el boton de pago
El SDK de Mercado Pago renderizara automaticamente un boton dentro de este elemento. Al hacer clic, el comprador sera redirigido al init_point de la Order, donde podra completar el pago en el ambiente seguro de Mercado Pago, tal como se muestra en la siguiente imagen.
Una vez que hayas finalizado la configuracion de tu frontend, deberas configurar las Notificaciones para que tu integracion reciba informacion en tiempo real sobre los eventos que ocurren en tu integracion.