Card Payment visual customizations

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.

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: "",
        }
    }
};

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.

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

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

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.

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
 }
};

Since the default button was hidden, you need to provide a replacement. To do so, add your button to the page:

html
<button type="button" onclick="createPayment();">Custom Payment Button</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()
        });
};