Configure the integration - Status Screen - Mercado Pago Developers

Configure the integration

To configure Status Screen Brick integration you need to follow the steps below:

  1. Create container
  2. Include and configure MercadoPago.js library
  3. Instantiate Brick
  4. Render Brick
The steps are performed on the backend or frontend. The Client-Side and Server-Side pills located immediately next to the title help you to identify which step is performed in which instance.

And, to help, we have prepared a complete code example the Status Screen Brick configuration that you can use as a template.

Create container


You will need to create a container to define where the Brick will be placed on the screen. The creation of the container is done by inserting an element (for example, a div) in the HTML code of the page where the Brick will be rendered (see the code below).

The value shown in the id property below is just an example and can be altered, however, it should always match the id indicated in the render.


 <div id="statusScreenBrick_container"></div>

Include and configure MercadoPago.js library


Use our official library to access Mercado Pago features from your frontend securely.

JS code can be included in a < script > tag or a separate JS file.

You will need to install the SDK by adding the following in your HTML code:


<script src=""></script>

Next, initialize the SDK by setting your public keyusing JavaScript code as follows:


const mp = new MercadoPago('YOUR_PUBLIC_KEY');

Instantiate Brick


With the container created and our SDK JS installed, the next step is to instantiate the Brick builder, which will allow generating the Brick. To create the Brick instance, insert the code below after the previous step.


const bricksBuilder = mp.bricks();
During Brick instantiation, different errors may appear. For more details on each of them, see the Possible Errors section.

Render Brick


Once instantiated, the Brick can be rendered and have all its configurations compiled so that the final structure of the Brick is generated.

If it is necessary to close and reopen the Brick (when a user returns to the cart to change some purchase detail, for example) it is necessary to eliminate the current instance of the Brick and create a new one when it is necessary to show the Brick again. To do so, use the unmount method available in the Brick controller, in this case: window.statusBrickController.unmount().

To render the Brick, insert the following code after the previous step and fill in the attributes according to the comments highlighted in this same code.


const renderStatusScreenBrick = async (bricksBuilder) => {
const settings = {
  initialization: {
    paymentId: '1234567890', // payment id generated by Mercado Pago
  callbacks: {
    onReady: () => {
      // callback called when Brick is ready
    onError: (error) => {
      // callback called for all Brick error cases
window.statusBrickController = await bricksBuilder.create(
The paymentId that must be sent to Brick for its initialization is the id returned by the Payments API when generating a payment with Mercado Pago.

The result of rendering the Brick should be like the image below:”


Always let the user return to your site from the payment status screen. Add a link so that if the payment fails, the user can try again.