Configurar la integración
Para configurar la integración de Status Screen Brick, debes seguir los pasos a continuación:
Y, para ayudar, hemos preparado un completo ejemplo de código de la configuración del Status Screen Brick que puede usar como modelo.
Crear container
Client-Side
Deberás crear un container para definir dónde se colocará el Brick en la pantalla. La creación del container se realiza insertando un elemento (por ejemplo, un div) en el código HTML de la página en la que se renderizará el Brick (ver el código a continuación).
id a continuación es solo un ejemplo y puede ser alterado, pero siempre debe coincidir con el id indicado en la renderización.html
<div id="statusScreenBrick_container"></div>Incluir y configurar la librería MercadoPago.js
Client-Side
Usa nuestra librería oficial para acceder a las funcionalidades de Mercado Pago desde tu frontend de forma segura.
< script > o también en archivos .js separados que importes en tu sitio.Para esto deberás instalar la SDK agregando lo siguiente en tu código HTML:
html
<script src="https://sdk.mercadopago.com/js/v2"></script>Luego, inicializa la SDK y configura tu clave pública mediante código JavaScript de la siguiente manera:
javascript
const mp = new MercadoPago('YOUR_PUBLIC_KEY');Instanciar Brick
Client-Side
Con el container creado y la SDK JS instalada, el siguiente paso es instanciar el Brick builder, que permitirá generar el Brick. Para crear la instancia, inserta el código a continuación del paso anterior.
javascript
const bricksBuilder = mp.bricks();Renderizar Brick
Client-Side
Una vez instanciado el builder, nuestro Brick puede ser renderizado y tener todas sus configuraciones compiladas para que la estructura final sea generada.
unmount disponible en el controller de Brick, en este caso: window.statusBrickController.unmount().Para renderizar el Brick, inserta el código a continuación del paso anterior y completa los atributos de acuerdo con los comentarios destacados en este mismo código.
javascript
const renderStatusScreenBrick = async (bricksBuilder) => {
const settings = {
initialization: {
paymentId: '1234567890', // id de pago generado por Mercado Pago
},
callbacks: {
onReady: () => {
// callback llamado cuando Brick está listo
},
onError: (error) => {
// callback llamado para todos los casos de error de Brick
},
},
};
window.statusBrickController = await bricksBuilder.create(
'statusScreen',
'statusScreenBrick_container',
settings
);
};
renderStatusScreenBrick(bricksBuilder);paymentId que se debe enviar a Brick para su inicialización es el id devuelto por la API de
Pagos
al generar un pago con Mercado Pago.El resultado de renderizar el Brick debe ser como la imagen de abajo:
