Additional data
Inside the onSubmit callback there is a second parameter, of optional use, called additionalData. It is an object and can contain additional data useful for your integration, but which is not necessary for the commit of payment on the backend.
Check out the table below for the fields contained within the additionalData object, which will only be returned if the user has opted for payment with a card.
| Field | Type | Description |
| bin | string | BIN of the card entered by the user. |
| lastFourDigits | string | The last four digits for card purchases. |
| cardholderName | string | Name of the cardholder. |
See an example of usage below:
const settings = {
...,
callbacks: {
onSubmit: ({ selectedPaymentMethod, formData }, additionalData) => {
// callback called after the user clicks the submit button for the data
// the additionalData parameter is optional, so you can remove it if you want
console.log(additionalData);
// example of sending the data collected by Brick to your server
return new Promise((resolve, reject) => {
const url = "<YOUR-BACKEND-URL-HERE>";
if (selectedPaymentMethod === "wallet_purchase") {
// wallet_purchase (Cuenta Mercado Pago) does not need to be sent by the backend
resolve();
}
fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
})
.then((response) => response.json())
.then((response) => {
// receive the payment result
resolve();
})
.catch((error) => {
// handle the error response when trying to create the payment
reject();
});
});
},
},
};
<Payment
initialization={initialization}
customization={customization}
onSubmit={async ({ selectedPaymentMethod, formData }, additionalData) => {
console.log({ selectedPaymentMethod, formData }, additionalData);
}}
/>
If you are not using the native submit Brick form button, you can also access the additionalData object via the getAdditionalData. Check out an example usage below.
javascript
// variable where the Brick controller is saved
paymentBrickController.getAdditionalData()
.then((additionalData) => {
console.log("Additional data:", additionalData);
})
.catch((error) => console.error(error));Attention
Call the
getAdditionalData method only after the form has been submitted, i.e. after you call the
getFormData.
This ensures that the data returned is valid and reliable.