Default rendering

Before rendering the Card Payment Brick, first execute the initialization steps shared among all Bricks. From there, see below the necessary information to configure and render the Card Payment 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 renderCardPaymentBrick = async (bricksBuilder) => {
 const settings = {
   initialization: {
     amount: 100, // Total amount to be paid. It must be an integer.
   },
   callbacks: {
     onReady: () => {
       /*
         Callback called when Brick is ready.
         Here you can hide loadings from your site, for example.
       */
     },
     onSubmit: (formData) => {
       // callback called when clicking on the submit data button
       return new Promise((resolve, reject) => {
         fetch('/process_payment', {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
           },
           body: JSON.stringify(formData),
         })
           .then((response) => response.json())
           .then((response) => {
             // receive payment result
             resolve();
           })
           .catch((error) => {
             // handle error response when trying to create payment
             reject();
           });
       });
     },
     onError: (error) => {
       // callback called for all Brick error cases
       console.error(error);
     },
   },
  };
  window.cardPaymentBrickController = await bricksBuilder.create(
   'cardPayment',
   'cardPaymentBrick_container',
   settings,
  );  
};
renderCardPaymentBrick(bricksBuilder);

          
const initialization = {
 amount: 100, // Total amount to be paid. It must be an integer.
};

const onSubmit = async (formData) => {
 // callback called when clicking on the submit data button
 return new Promise((resolve, reject) => {
   fetch('/process_payment', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify(formData),
   })
     .then((response) => response.json())
     .then((response) => {
       // receive payment result
       resolve();
     })
     .catch((error) => {
       // handle error response when trying to create payment
       reject();
     });
 });
};

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.cardPaymentBrickController.unmount(). When entering again, a new instance must be generated.

Render the Brick

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

Important

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

          
<div id="cardPaymentBrick_container"></div>

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


<CardPayment
   initialization={initialization}
   onSubmit={onSubmit}
   onReady={onReady}
   onError={onError}
/>

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

cardform