# MD for: https://www.mercadopago.com.pe/developers/pt/docs/checkout-api-orders/additional-settings/websites/visual-customizations.md

\# Card Payment visual customizations The card form rendered by the Card Payment Brick was built in a modular way to be rendered in a web environment. Its base follows UX best practices to deliver the best experience to the buyer without you having to worry about design details. When you want to align the form with your site's identity, you can replace the displayed texts and hide interface elements through the \`customization.visual\` object, defined when rendering the Card Payment. :::AccordionComponent{title="Change texts" pill="client-side"} The texts displayed in the form can be replaced in \`customization.visual.texts\`. All of them are of the string type and, depending on the element, accept the \`label\` (field label) and \`placeholder\` (text displayed while the field is empty) attributes. The behavior will be as follows: \*\*when you send an empty text, the form displays the default layout text, and when you send a custom text, it replaces the default one.\*\* > NOTE > > If the custom text is longer than the available space, it will be truncated at the maximum allowed length and the excess replaced by an ellipsis. 

javascript 

javascriptreact-jsx

```
const settings = {
    customization: {
        visual: {
            texts: {
                formTitle: "",
                emailSectionTitle: "",
                installmentsSectionTitle: "",
                cardholderName: {
                    label: "",
                    placeholder: "",
                },
                email: {
                    label: "",
                    placeholder: "",
                },
                cardholderIdentification: {
                    label: "",
                },
                cardNumber: {
                    label: "",
                },
                expirationDate: {
                    label: "",
                },
                securityCode: {
                    label: "",
                },
                selectInstallments: "",
                selectIssuerBank: "",
                formSubmit: "",
            },
        },
    },
};
```

```
const customization = {
    visual: {
        texts: {
            formTitle: "",
            emailSectionTitle: "",
            installmentsSectionTitle: "",
            cardholderName: {
                label: "",
                placeholder: "",
            },
            email: {
                label: "",
                placeholder: "",
            },
            cardholderIdentification: {
                label: "",
            },
            cardNumber: {
                label: "",
            },
            expirationDate: {
                label: "",
            },
            securityCode: {
                label: "",
            },
            selectInstallments: "",
            selectIssuerBank: "",
            formSubmit: "",
        }
    }
};
```

| Property | Accepted attributes | Description | |---|---|---| | \`formTitle\` | — | Form title. | | \`emailSectionTitle\` | — | E-mail section title. | | \`installmentsSectionTitle\` | — | Installments section title. | | \`cardNumber\` | \`label\` | Card number field. | | \`expirationDate\` | \`label\` | Expiration date field. | | \`securityCode\` | \`label\` | Security code field. | | \`cardholderName\` | \`label\`, \`placeholder\` | Cardholder name field. | | \`cardholderIdentification\` | \`label\` | Cardholder document field. | | \`email\` | \`label\`, \`placeholder\` | E-mail field. | | \`selectInstallments\` | — | Installments selector. | | \`selectIssuerBank\` | — | Issuing bank selector. | | \`formSubmit\` | — | Form submission button. | ::: :::AccordionComponent{title="Hide title and card brands" pill="client-side"} The form's title line and the accepted card brands can be hidden together, which is useful when your page already presents that information outside the form. 

javascript 

javascriptreact-jsx

```
const settings = {
   ...,
   customization: {
       visual: {
           hideFormTitle: true
       }
   }
};
```

```
const customization = {
 visual: {
   hideFormTitle: true
 }
};
```

| Property | Type | Description | |---|---|---| | \`customization.visual.hideFormTitle\` | Boolean | When \`true\`, hides the title line and the accepted card brands. | ::: :::AccordionComponent{title="Hide payment button" pill="client-side"} If you prefer to use your own button to submit the form, hide the native button and start obtaining the card data through the \`getFormData\` method. 

javascript 

javascriptreact-jsx

```
const settings = {
    ...,
    callbacks: {
        onReady: () => {
            // callback called when the form is ready
        },
        onError: (error) => {
            // callback called for all error cases
        },
    },
    customization: {
        visual: {
            hidePaymentButton: true
        }
    }
};
```

```
const customization = {
 visual: {
   hidePaymentButton: true
 }
};
```

| Property | Type | Description | |---|---|---| | \`customization.visual.hidePaymentButton\` | Boolean | When \`true\`, the form submission button is no longer displayed and it becomes necessary to use the \`getFormData\` method to obtain the filled-in data. | Since the default button was hidden, you need to provide a replacement. To do so, add your button to the page: \`\`\`html Custom Payment Button\`\`\` Then, implement the function that obtains the form data and sends it to your backend: \`\`\`Javascript function createPayment(){ window.cardPaymentBrickController.getFormData() .then((formData) => { const submitData = { type: "online", total\_amount: String(formData.transaction\_amount), // must be a string in the 00.00 format external\_reference: "ext\_ref\_1234", // identifier of the transaction origin. processing\_mode: "automatic", transactions: { payments: \[ { amount: String(formData.transaction\_amount), // must be a string in the 00.00 format payment\_method: { id: formData.payment\_method\_id, type: "credit\_card", // must be "credit\_card" or "debit\_card" token: formData.token, installments: formData.installments, }, }, \], }, payer: { email: formData.payer.email, identification: formData.payer.identification, }, }; fetch("/process\_order", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(submitData), }) .then((response) => response.json()) .then((response) => { // receive the payment result }) .catch((error) => { // handle the error response when trying to create the order }); }) .catch((error) => { // error handling when calling getFormData() }); }; \`\`\` > NOTE > > If you need to customize the visual style beyond the customizations described in this section, do not use the CSS classes and IDs shipped with the form as a reference, since they are automatically generated during the application build and change frequently. Use HTML element inheritance to access the elements you need to customize. :::