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.
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.
Forms fields
| Section | Element | Characteristics | Comments |
| Payment options container | Title 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 container | Payment 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 form | Card 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 form | Card 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 form | Security 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 form | Card 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 form | Cardholder 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 form | Cardholder 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 form | Buyer’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. |