Default rendering

Before rendering the Status Screen Brick, first execute the initialization steps shared among all Bricks. From there, see below the necessary information to configure and render the Status Screen Brick.

Note

To consult the types and specifications of the parameters and responses of the Brick functions, refer to the technical documentation .

Configure the Brick

Create Brick's startup configuration.

          
const renderStatusScreenBrick = async (bricksBuilder) => {
 const settings = {
   initialization: {
     paymentId: '<PAYMENT_ID>', // payment id to show
   },
   callbacks: {
     onReady: () => {
       /*
         Callback called when Brick is ready.
         Here you can hide loadings from your site, for example.
       */
     },
     onError: (error) => {
       // callback called for all Brick error cases
       console.error(error);
     },
   },
  };
  window.statusScreenBrickController = await bricksBuilder.create(
   'statusScreen',
   'statusScreenBrick_container',
   settings,
  );  
};
renderStatusScreenBrick(bricksBuilder);

          
const initialization = {
 paymentId: '<PAYMENT_ID>', // payment id to show
};
const onError = async (error) => {
 // callback called for all Brick error cases
 console.log(error);
};
const onReady = async () => {
 /*
   Callback called when Brick is ready.
   Here you can hide loadings from your site, for example.
 */
};

Attention

Whenever the user leaves the screen where some Brick is displayed, it is necessary to destroy the current instance with the command window.statusScreenBrickController.unmount(). When entering again, a new instance must be generated.

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.

Render the Brick

Once the configurations are created, enter the code below to render the Brick.

Important

The id statusScreenBrick_container of the html div below should correspond to the value used in the method create() of the last step.

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

          
import { StatusScreen } from '@mercadopago/sdk-react';


<StatusScreen
   initialization={initialization}
   onReady={onReady}
   onError={onError}
/>

The result of rendering the Brick should look like the image below.

status-screen-Brick