Inicialização comum
Para configurar a integração dos Bricks e ter um checkout responsivo, otimizado e configurável, disponibilizamos nos passos abaixo o processo de configuração inicial comum para todos os Bricks.
Incluir biblioteca Mercado Pago
Client-Side
Utilize as nossas bibliotecas oficiais para acessar as funcionalidades do Mercado Pago com segurança desde seu frontend.
// O código JS pode ser incluído em uma tag < script > ou um arquivo JS separado.
<script src="https://sdk.mercadopago.com/js/v2"></script>
npm install @mercadopago/sdk-react
Inicializar biblioteca Mercado Pago
Em seguida, inicialize a biblioteca 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');
Escolher o Brick
Com a biblioteca do Mercado Pago adicionada e configurada em seu projeto, você já está pronto para adicionar os Bricks em seu site. Para isso, escolha o Brick que melhor atende sua necessidade e siga os passos detalhados na seção correspondente ao Brick escolhido.
Bricks
Conheça todos os módulos do Checkout Bricks e as suas disponibilidades. Payment Brick
Ofereça diversos métodos de pagamento para os clientes escolherem, com a capacidade de salvar dados do cartão para compras futuras. Teste a demonstração do Brick antes de integrá-lo.
Wallet Brick
Vincule a conta Mercado Pago e permita pagamentos registrados. Teste a demonstração do Brick antes de integrá-lo.
Status Screen Brick
Informe os clientes dos resultados do processo de compra após efetuar o pagamento. Teste a demonstração do Brick antes de integrá-lo.
Card Payment Brick
Ofereça pagamentos com cartão de crédito e débito. Teste a demonstração do Brick antes de integrá-lo.
Review & Confirm
Exiba um resumo de todo o processo de compra com as informações mais relevantes, assim os clientes poderão analisar antes de confirmar a compra.