Personalizaciones visuales del Card Payment

Los textos mostrados en el formulario pueden sustituirse en customization.visual.texts. Todos son del tipo string y, según el elemento, aceptan los atributos label (rótulo del campo) y placeholder (texto mostrado mientras el campo está vacío). El comportamiento será el siguiente: al enviar un texto vacío, el formulario mostrará el texto por defecto del layout y, al enviar un texto personalizado, este sustituirá al predeterminado.

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

La línea de título del formulario y las marcas aceptadas pueden ocultarse en conjunto, lo que resulta útil cuando tu página ya presenta esa información fuera del formulario.

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

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

Si prefieres usar un botón propio para enviar el formulario, oculta el botón nativo y pasa a obtener los datos de la tarjeta a través del método getFormData.

const settings = {
    ...,
    callbacks: {
        onReady: () => {
            // callback llamado cuando el formulario está listo
        },
        onError: (error) => {
            // callback llamado para todos los casos de error
        },
    },
    customization: {
        visual: {
            hidePaymentButton: true
        }
    }
};

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

Como el botón predeterminado fue ocultado, es necesario disponibilizar un sustituto. Para ello, agrega tu botón a la página:

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

Luego, implementa la función que obtiene los datos del formulario y los envía a tu backend:

Javascript
function createPayment(){
    window.cardPaymentBrickController.getFormData()
        .then((formData) => {
            const submitData = {
                type: "online",
                total_amount: String(formData.transaction_amount), // debe ser un string con formato 00.00
                external_reference: "ext_ref_1234", // identificador del origen de la transacción.
                processing_mode: "automatic",
                transactions: {
                    payments: [
                        {
                            amount: String(formData.transaction_amount), // debe ser un string con formato 00.00
                            payment_method: {
                                id: formData.payment_method_id,
                                type: "credit_card", // debe ser "credit_card" o "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) => {
                    // recibir el resultado del pago
                })
                .catch((error) => {
                    // gestionar la respuesta de error al intentar crear la order
                });
        })
        .catch((error) => {
            // gestión de errores al llamar getFormData()
        });
};