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 Mercado Pago 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.

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

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

Offer credit and debit card payments. Test the Brick demonstration before integrating it.

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

Requisitos previos

Conoce los requisitos previos necesarios para integrarte con Checkout Bricks.

Payment

Obtenga más información sobre Payment Brick y sus principales características.