Common initialization
To set up Brick integrations and have a responsive, optimized, and configurable checkout, we provide the common initial configuration process for all Bricks in the steps below.
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.
Bricks
Know all Checkout Bricks modules and their availability. Payment 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.
Wallet Brick
Link Mercado Pago Wallet and allow logged payments. Test the Brick demonstration before integrating it.
Card Payment Brick
Offer credit and debit card payments. Test the Brick demonstration before integrating it.
Status Screen Brick
Inform your customers of the results of the purchase process, after making the payment. Test the Brick demonstration before integrating it.
Review & Confirm
Shows a summary of the entire purchase process, with the most relevant information, so that your customers can review before confirming the purchase.