Inicio común
Para configurar la integración de Bricks y tener un pago receptivo, optimizado y configurable, proporcionamos en los pasos a continuación el proceso de configuración inicial común para todos los Bricks.
Incluir la biblioteca de Mercado Pago
Client-Side
Utiliza nuestras bibliotecas oficiales para acceder a las funcionalidades de Mercado Pago de forma segura desde tu frontend.
// El código JS se puede incluir en una etiqueta < script > o en un archivo JS separado.
<script src="https://sdk.mercadopago.com/js/v2"></script>
npm install @mercadopago/sdk-react
Inicializar biblioteca de Mercado Pago
A continuación, inicialice la biblioteca de Mercado Pago para utilizar Checkout Bricks.
const mp = new MercadoPago('YOUR_PUBLIC_KEY');
const bricksBuilder = mp.bricks();
import { initMercadoPago } from '@mercadopago/sdk-react';
initMercadoPago('YOUR_PUBLIC_KEY');
Eligir el Brick
Con la biblioteca de Mercado Pago agregada y configurada en su proyecto, está listo para agregar Bricks a su sitio web. Para ello, elige el Brick que mejor se adapte a tus necesidades y sigue los pasos detallados en el apartado correspondiente al Brick elegido.
Bricks
Conoce todos los módulos de Checkout Bricks y su disponibilidad. Payment Brick
Ofrece diferentes medios de pago a sus clientes, con la posibilidad de guardar datos de la tarjeta para futuras compras. Prueba la demostración del Brick antes de integrarlo.
Wallet Brick
Vincula la cuenta de Mercado Pago y permite pagos logueados. Prueba la demostración del Brick antes de integrarlo.
Card Payment Brick
Ofrece pagos con tarjeta de crédito y débito. Prueba la demostración del Brick antes de integrarlo.
Status Screen Brick
Informa a tus clientes los resultados del proceso de compra, luego de realizado el pago. Prueba la demostración del Brick antes de integrarlo.
Brand Brick
Comunica diferentes mensajes relacionados con las formas de pago disponibles a través de Mercado Pago en tu tienda.
Review & Confirm
Muestra un resumen de todo el proceso de compra, con la información más relevante, para que tus clientes puedan revisar antes de confirmar la compra.