Customizações visuais do Card Payment
O formulário de cartão renderizado pelo Card Payment Brick foi construído de forma modular para ser renderizado em ambiente web. A base segue as melhores práticas de UX para entregar ao comprador a melhor experiência sem que você precise se preocupar com detalhes de design.
Quando quiser alinhar o formulário à identidade do seu site, é possível substituir os textos exibidos e ocultar elementos da interface através do objeto customization.visual, definido ao renderizar o 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: "",
}
}
};| Propriedade | Atributos aceitos | Descrição |
formTitle | — | Título do formulário. |
emailSectionTitle | — | Título da seção de e-mail. |
installmentsSectionTitle | — | Título da seção de parcelas. |
cardNumber | label | Campo de número do cartão. |
expirationDate | label | Campo de data de validade. |
securityCode | label | Campo de código de segurança. |
cardholderName | label, placeholder | Campo de nome do titular. |
cardholderIdentification | label | Campo de documento do titular. |
email | label, placeholder | Campo de e-mail. |
selectInstallments | — | Seletor de parcelas. |
selectIssuerBank | — | Seletor de banco emissor. |
formSubmit | — | Botão de envio do formulário. |
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
}
};| Propriedade | Tipo | Descrição |
customization.visual.hideFormTitle | Boolean | Quando true, oculta a linha de título e as bandeiras aceitas. |
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
}
};| Propriedade | Tipo | Descrição |
customization.visual.hidePaymentButton | Boolean | Quando true, o botão de envio do formulário deixa de ser exibido e passa a ser necessário utilizar o método getFormData para obter os dados preenchidos. |
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:
Javascriptfunction 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() }); };