# MD for: https://www.mercadopago.com.mx/developers/pt/docs/checkout-bricks/status-screen-brick/default-rendering.md

\# Default rendering Before rendering the Status Screen Brick, first execute the \[initialization steps\](https://www.mercadopago.com.mx/developers/en/docs/checkout-bricks/common-initialization) shared among all Bricks. From there, see below the necessary information to configure and render the Status Screen Brick. > NOTE > > Note > > To consult the types and specifications of the parameters and responses of the Brick functions, refer to the \[technical documentation\](https://github.com/mercadopago/sdk-js/blob/main/docs/bricks/status-screen.md). ## Configure the Brick Create Brick's startup configuration. 

* [javascript ](#editor%5F1)
* [react-jsx ](#editor%5F2)
javascript react-jsx 

```
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);
```

Copiar 

```
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.
 */
};
```

Copiar 

\> WARNING > > 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\](https://www.mercadopago.com.mx/developers/en/reference/online-payments/checkout-api-payments/create-payment/post) when generating a payment with Mercado Pago. ## Render the Brick Once the configurations are created, enter the code below to render the Brick. > WARNING > > Important > > The id \`statusScreenBrick\_container\` of the html div below should correspond to the value used in the method create() of the last step. 

* [html ](#editor%5F3)
* [react-jsx ](#editor%5F4)
html react-jsx 

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

Copiar 

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

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

Copiar 

The result of rendering the Brick should look like the image below. !\[status-screen-brick-layout\](https://www.mercadopago.com.mx/checkout-bricks/status-screen-brick-layout-all-en.jpg)