Renderização padrão

Antes de realizar a renderização do Status Screen Brick, primeiro execute os passos de inicialização compartilhados entre todos os Bricks. A partir disso, veja abaixo as informações necessárias para você configurar e renderizar o Status Screen Brick.

Nota

Para consultar tipagens e especificações dos parâmetros e respostas de funções do Brick, consulte a documentação técnica .

Configurar o Brick

Crie a configuração de inicialização do Brick.

          
const renderStatusScreenBrick = async (bricksBuilder) => {
 const settings = {
   initialization: {
     paymentId: '<PAYMENT_ID>', // id do pagamento a ser mostrado
   },
   callbacks: {
     onReady: () => {
       /*
         Callback chamado quando o Brick estiver pronto.
         Aqui você pode ocultar loadings do seu site, por exemplo.
       */
     },
     onError: (error) => {
       // callback chamado para todos os casos de erro do Brick
       console.error(error);
     },
   },
  };
  window.statusScreenBrickController = await bricksBuilder.create(
   'statusScreen',
   'statusScreenBrick_container',
   settings,
  );  
};
renderStatusScreenBrick(bricksBuilder);

          
const initialization = {
 paymentId: '<PAYMENT_ID>', // id do pagamento a ser mostrado
};
const onError = async (error) => {
 // callback chamado para todos os casos de erro do Brick
 console.log(error);
};
const onReady = async () => {
 /*
   Callback chamado quando o Brick estiver pronto.
   Aqui você pode ocultar loadings do seu site, por exemplo.
 */
};

Atenção

Sempre que o usuário sair da tela onde algum Brick é exibido, é necessário destruir a instância atual com o comando window.statusScreenBrickController.unmount(). Ao entrar novamente, uma nova instância deve ser gerada.

O paymentId que deve ser enviado ao Brick para a sua inicialização é o ID retornado pela API de Pagamentos ao se gerar um pagamento com Mercado Pago.

Renderizar o Brick

Uma vez criadas as configurações, insira o código abaixo para renderizar o Brick.

Importante

O id statusScreenBrick_container da div html abaixo, deve corresponder ao valor enviado dentro do método create() da etapa anterior.

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

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


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

O resultado de renderizar o Brick deve ser como na imagem abaixo.

status-screen-Brick