Customizações visuais do Card Payment

Os textos exibidos no formulário podem ser substituídos em customization.visual.texts. Todos são do tipo string e, dependendo do elemento, aceitam os atributos label (rótulo do campo) e placeholder (texto exibido enquanto o campo está vazio). O comportamento será o seguinte: o enviar um texto vazio, o formulário apresentará o texto padrão do layout e, ao enviar um texto customizado, ele substituirá o padrão.

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

A linha de título do formulário e as bandeiras aceitas podem ser ocultadas em conjunto, útil quando a sua página já apresenta essas informações fora do formulário.

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

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

Se preferir usar um botão próprio para enviar o formulário, oculte o botão nativo e passe a obter os dados do cartão através do método getFormData.

const settings = {
    ...,
    callbacks: {
        onReady: () => {
            // callback chamado quando o formulário estiver pronto
        },
        onError: (error) => {
            // callback chamado para todos os casos de erro
        },
    },
    customization: {
        visual: {
            hidePaymentButton: true
        }
    }
};

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

Como o botão padrão foi ocultado, é necessário disponibilizar um substituto. Para isso, adicione o seu botão à página:

html
<button type="button" onclick="createPayment();">Custom Payment Button</button>

Em seguida, implemente a função que obtém os dados do formulário e os envia ao seu backend:

Javascript
function createPayment(){
    window.cardPaymentBrickController.getFormData()
        .then((formData) => {
            const submitData = {
                type: "online",
                total_amount: String(formData.transaction_amount), // deve ser uma string com formato 00.00
                external_reference: "ext_ref_1234", // identificador da origem da transação.
                processing_mode: "automatic",
                transactions: {
                    payments: [
                        {
                            amount: String(formData.transaction_amount), // deve ser uma string com formato 00.00
                            payment_method: {
                                id: formData.payment_method_id,
                                type: "credit_card", // deve ser "credit_card" ou "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) => {
                    // receber o resultado do pagamento
                })
                .catch((error) => {
                    // lidar com a resposta de erro ao tentar criar a order
                });
        })
        .catch((error) => {
            // tratamento de erros ao chamar getFormData()
        });
};