Payment - Checkout Bricks - Mercado Pago Developers

Payment Brick

Payment Brick is a modular and customizable solution that allows you to add several payment methods to your store with just one Brick, allowing you to save card data for future purchases. By using Payment Brick, you will have different payment methods at your disposal and you will be able to choose which ones to enable for your site.

For now, you will be able to give your customers the possibility of making payments through debit and credit cards or use the Mercado Pago Wallet. In the short term we will add the possibility that, using this same Brick, you can also allow them to make cash payments.

The possibility of saving the data of cards that have already been charged in previous purchases, makes the payment process more efficient and faster. For the buyer, it is no longer necessary to have to reload the data each time they enter the checkout.

payment-Brick-layout-all

In turn, our processor complies with all security guarantees to give users maximum protection when saving their data. This is one of the great advantages of adding Checkout Bricks to your site: the peace of mind of providing a secure solution, backed by Mercado Pago, but customized to the needs of your company.

Layout

The Payment Brick layout is based on the best UX practices, so that it is possible to offer the best shopping experience without having to worry about design details. The layout offers the elements detailed below.

Attention
The Bricks were created not only to meet the technical needs of implementation and security, but also to provide the best experience for the buyer. Customizing a Brick can drastically change the buyer's experience. Our recommendation is that you always use the Brick with as little additional customization as possible to always ensure the best experience.

Forms fields

SectionElementCharacteristicsComments
Payment options containerTitle

Property: formTitle
Value (title): Credit or debit card
Label: N/A
Placeholder: N/A
Type: text/image
Format: N/A
Max. characters: N/A
Optional
Customizable
Payment options containerPayment button

Property: formSubmit
Value: [imagen] Pay
Label: N/A
Placeholder: N/A
Type: text
callback: onSubmit
function: promise(cardFormData)
Optional
Concealable and customizable

*The function receives the data from the form, including the card token, and presents a loading animation.
Card payment formCard number input field

Property: cardNumber
Value: N/A
Label: Card number
Placeholder: 1234 1234 1234 1234
Type: number
Format: N/A
Max. characters: depending on the issuer it can vary between 15 and 16.
Mandatory
Customizable (label, placeholder)
Card payment formCard expiration date input field

Property: expirationDate
Value: N/A
Label: expiration date
Placeholder: MM/AA
Type: date
Format: MM/AA
Max. characters: 5
Mandatory
Customizable (label, placeholder)
Card payment formSecurity code input field

Property: securityCode
Value: N/A
Label: Security code
Placeholder: 1234
Type: integer
Format: N/A

Max. characters: 4
Mandatory
Customizable (label, placeholder and maximum of wrong characters)
Card payment formCard cardholder name input field

Property: cardholderName
Value: N/A
Label: Name of the holder as it appears on the card
Placeholder: João Silva
Type: string
Format: N/A
Max. characters: 100
Mandatory
Customizable (label, placeholder, type, format and maximum of wrong characters.)
Card payment formCardholder ID selection field

Property: cardholderIdentificationType
Value: CC, CE, NIT, Otro
Label: ID
Placeholder: N/A
Type: select
Format: N/A
Max. characters: N/A
Mandatory
Customizable (label, placeholder)

*If the document type and number data were previously provided and saved, this element becomes optional.
Card payment formCardholder ID number input field

Property: cardholderIdentificationNumber
Value: N/A
Label: N/A
Placeholder: N/A
Type: number
Format: N/A
Max. characters: N/A
Mandatory
Non customizable (label, placeholder)
Card payment formBuyer’s email input field

Property: email
Value: N/A
Label: Email
Placeholder: joaosilva@email.com
Type: string
Formato: conventional email format (example@email.com)
Max. characters: N/A
Mandatory
Customizable (label, placeholder)

*If the data was previously provided and saved, this element becomes optional.