Configure the integration with cards

To configure Payment Brick integration to receive payments with credit and debit cards you need to follow the steps below.

1. Create container
2. Include and configure MercadoPago.js library
3. Instantiate Brick
4. Render Brick
5. Manage credit and debit cards
6. Include saved cards

You will need to create a container to define where the Brick will be placed on the screen. The creation of the container is done by inserting an element (for example, a div) in the HTML code of the page where the Brick will be rendered (see the code below).

  <div id="paymentBrick_container"></div>

Use our official library to access Mercado Pago features from your frontend securely.

You will need to install the SDK by adding the following in your HTML code:

<script src="https://sdk.mercadopago.com/js/v2"></script>

Next, initialize the SDK by setting your public keyusing JavaScript code as follows:

const mp = new MercadoPago('YOUR_PUBLIC_KEY');

With the container created and our SDK JS installed, the next step is to instantiate the Brick builder, which will allow generating the Brick. To create the Brick instance, insert the code below after the previous step.

const bricksBuilder = mp.bricks();

Once instantiated, the Brick can be rendered and have all its configurations compiled so that the final structure of the Brick is generated.

To render the Brick, insert the following code after the previous step and fill in the attributes according to the comments highlighted in this same code.

const renderPaymentBrick = async (bricksBuilder) => {
 const settings = {
   initialization: {
     amount: 100, // total amount to be paid
   },
   customization: {
     paymentMethods: {
       creditCard: 'all',
       debitCard: 'all',
     },
   },
   callbacks: {
     onReady: () => {
       /*
         Callback called when Brick is ready
         Here you can hide loadings from your site, for example.
       */
     },
     onSubmit: ({ selectedPaymentMethod, formData }) => {
       // callback called when clicking on the data submission button
         return new Promise((resolve, reject) => {
           fetch("/processar-pago", {
             method: "POST",
             headers: {
               "Content-Type": "application/json",
             },
             body: JSON.stringify(formData)
           })
             .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.paymentBrickController = await bricksBuilder.create(
   'payment',
   'paymentBrick_container',
   settings
 );
};
renderPaymentBrick(bricksBuilder);

The result of rendering the Brick should be like the image below:”

The code snippet responsible for including the credit and debit card as a means of payment is as follows:

settings = {
  ...,
  customization: {
    ...,
    paymentMethods: {
      ...,
      creditCard: 'all',
      debitCard: 'all'
    }
  }
}

The creditCard and debitCard properties accept 2 types of variables, string and string[]. In the example above, payments with credit and debit cards of any brand accepted by Mercado Pago will be accepted.

If you want to select the flags, instead of the string all, you can pass an array with just the desired IDs. As in the example below, where only MASTER and VISA credit cards and ELO debit cards will be accepted.

settings = {
  ...,
  customization: {
    ...,
    paymentMethods: {
      ...,
      creditCard: [ 'master', 'visa' ],
      debitCard: [ 'debelo' ]
    }
  }
}

For a complete list of IDs that can be passed within the array, check the Get Payment Methods API in our API Reference.

In Payment Brick you can make saved cards available to your customers. To learn how to add saved cards, see the section Include saved cards.