Common initialization - Checkout Bricks - Mercado Pago Developers
Which documentation are you looking for?

Do not know how to start integrating? 

Check the first steps

Common initialization among Bricks

To set up the Bricks integration and have a responsive, optimized and configurable checkout you need to follow the steps below. These steps apply to the integration of all Bricks.

Add the Mercado Pago library

Client-Side

Use our official libraries to access Mercado Pago's features safely from your frontend.

          
//  The JS code can be included in a < script > tag or a separate JS file.
<script src="https://sdk.mercadopago.com/js/v2"></script>

        
          
npm install @mercadopago/sdk-react

        

Initialize Mercado Pago library

Then, initialize the Mercado Pago library to use Checkout Bricks.

          
const mp = new MercadoPago('YOUR_PUBLIC_KEY');
const bricksBuilder = mp.bricks();

        
          
import { initMercadoPago } from '@mercadopago/sdk-react';
initMercadoPago('YOUR_PUBLIC_KEY');

        

Choose the Brick

With the MercadoPago library added and configured in your project, you are ready to add Bricks to your website. To do so, choose the Brick that best meets your needs and follow the steps detailed in the section corresponding to the chosen Brick.

Payment Brick

AVAILABLE

Offer different payment methods from which your customers can choose, with the ability to save card details for future purchases. Test the Brick demonstration before integrating it.
Learn more
Wallet Brick

AVAILABLE

Link Mercado Pago Wallet and allow logged payments. Test the Brick demonstration before integrating it.
Learn more
Card Payment Brick

AVAILABLE

Offer credit and debit card payments. Test the Brick demonstration before integrating it.
Learn more
Status Screen Brick

AVAILABLE

Inform your customers of the results of the purchase process, after making the payment. Test the Brick demonstration before integrating it.
Learn more