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