Configure the integration
To configure Card Payment Brick integration you need to follow the steps below:
And to help, we've prepared a complete code example of the Card Payment Brick setup that you can use as a template.
Create container
Client-Side
You will need to create a container to define where the Brick will be placed on the screen. The creation of the container is done by inserting an element (for example, a div) in the HTML code of the page where the Brick will be rendered (see the code below).
id property below is just an example and can be altered, however, it should always match the id indicated in the render.html
<div id="cardPaymentBrick_container"></div>Include and configure MercadoPago.js library
Client-Side
Use our official library to access Mercado Pago features from your frontend securely.
< script > tag or a separate JS file.You will need to install the SDK by adding the following in your HTML code:
html
<script src="https://sdk.mercadopago.com/js/v2"></script>Next, initialize the SDK by setting your public keyusing JavaScript code as follows:
javascript
const mp = new MercadoPago('YOUR_PUBLIC_KEY');Instantiate Brick
Client-Side
With the container created and our SDK JS installed, the next step is to instantiate the Brick builder, which will allow generating the Brick. To create the Brick instance, insert the code below after the previous step.
javascript
const bricksBuilder = mp.bricks();Render Brick
Client-Side
Once instantiated, the Brick can be rendered and have all its configurations compiled so that the final structure of the Brick is generated.
unmount method available in the Brick controller, in this case: cardPaymentBrickController.unmount().To render the Brick, insert the following code after the previous step and fill in the attributes according to the comments highlighted in this same code.
javascript
const renderCardPaymentBrick = async (bricksBuilder) => {
const settings = {
initialization: {
amount: 10.000, // total amount to be paid
},
callbacks: {
onReady: () => {
/*
Callback called when the Brick is ready
Here you can hide loadings from your site, for example.
*/
},
onSubmit: (cardFormData) => {
// callback called when the user clicks on the submit data button
// example of sending the data collected by our Brick to your server
return new Promise((resolve, reject) => {
fetch("/process_payment", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(cardFormData)
})
.then((response) => {
// receive payment result
resolve();
})
.catch((error) => {
// handle error response when trying to create payment
reject();
})
});
},
onError: (error) => {
// callback called to all error cases related to the Brick
console.error(error);
},
},
};
const cardPaymentBrickController = await bricksBuilder.create('cardPayment', 'cardPaymentBrick_container', settings);
};
renderCardPaymentBrick(bricksBuilder); The result of rendering the Brick should be like the image below:”
onSubmit must always return a Promise. You should call resolve() only if your backend processes was successful. Call reject() if an error occurs. The reject() will make the Brick allow the fields to be filled in again and a new payment attempt possible. Also, when calling the resolve() method inside the onSubmit Promise, the Brick does not allow new payments. If you want to make a new payment, you must create a new Brick instance.