Configure a integração
Para configurar a integração do Card Payment Brick você precisa seguir os passos abaixo:
E, para ajudar, preparamos um exemplo de código completo da configuração do Card Payment Brick que você pode usar como modelo.
Criar container
Client-Side
Você vai precisar criar um container para definir o local que o Brick será inserido na tela. A criação do container é feita inserindo um elemento (por exemplo, uma div) no código HTML da página no qual o Brick será renderizado (veja código abaixo).
id a seguir é apenas um exemplo, e pode ser alterado, mas deve sempre corresponder ao id indicado na renderização.html
<div id="cardPaymentBrick_container"></div>Incluir e configurar a biblioteca MercadoPago.js
Client-Side
Utilize a nossa biblioteca oficial para acessar as funcionalidades do Mercado Pago com segurança desde seu frontend.
< script > ou um arquivo JS separado.Você precisará instalar o SDK adicionando o seguinte em seu código HTML:
html
<script src="https://sdk.mercadopago.com/js/v2"></script>Em seguida, inicialize o SDK definindo sua chave pública usando código JavaScript:
javascript
const mp = new MercadoPago('YOUR_PUBLIC_KEY');Instanciar Brick
Client-Side
Com o container criado e o SDK JS instalado, o próximo passo é instanciar o Brick builder, que permitirá gerar o Brick. Para instanciar o Brick, insira o código abaixo após a etapa anterior.
javascript
const bricksBuilder = mp.bricks();Renderizar Brick
Client-Side
Uma vez instanciado, o Brick pode ser renderizado e ter todas as suas configurações compiladas de modo que a estrutura final do Brick seja gerada.
unmount disponível no controller do Brick, sendo neste caso: cardPaymentBrickController.unmount().Para renderizar o Brick, insira o código abaixo após o passo anterior e preencha os atributos conforme os comentários destacados neste mesmo código.
javascript
const renderCardPaymentBrick = async (bricksBuilder) => {
const settings = {
initialization: {
amount: 10.000, // valor total a ser pago
},
callbacks: {
onReady: () => {
/*
Callback chamado quando o Brick estiver pronto.
Aqui você pode ocultar loadings do seu site, por exemplo.
*/
},
onSubmit: (cardFormData) => {
// callback chamado o usuário clicar no botão de submissão dos dados
// ejemplo de envío de los datos recolectados por el Brick a su servidor
return new Promise((resolve, reject) => {
fetch("/process_payment", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(cardFormData)
})
.then((response) => {
// receber o resultado do pagamento
resolve();
})
.catch((error) => {
// lidar com a resposta de erro ao tentar criar o pagamento
reject();
})
});
},
onError: (error) => {
// callback chamado para todos os casos de erro do Brick
console.error(error);
},
},
};
const cardPaymentBrickController = await bricksBuilder.create('cardPayment', 'cardPaymentBrick_container', settings);
};
renderCardPaymentBrick(bricksBuilder);O resultado de renderizar o Brick deve ser como na imagem abaixo:
onSubmit deve sempre retornar uma Promise. Chame o resolve() apenas se o processamento em seu backend ocorreu com sucesso. Chame o reject() caso algum erro ocorra. Isso fará com que o Brick permita o preenchimento dos campos novamente e viabilize uma nova tentativa de pagamento. Ao chamar o método resolve() dentro da Promise do onSubmit, o Brick não permite novos pagamentos. Caso queira realizar um novo pagamento, deve-se criar uma nova instância do Brick.