I’ve installed “mercadopago/magento2-plugin” on Magento 2.4.6 and managed to complete purchase flows with test users. However, when I apply a discount coupon in the second step of the checkout, it keeps loading indefinitely, and I get this error in the console:
The code of the installed module creates a JS component mixin so that when a coupon is applied or canceled, the card form is unmounted calling to the function “mpDeleteCardForm”. I’ve disabled the mixin, and even though it allows me to add or remove coupons, the error in the console still appears.
Here I provide a portion of the component that initializes the form:
(function () {
window.cvvLength = null;
window.additionalInfoNeeded = {};
var mp = null;
var mpCardForm = null;
var mpRemountCardForm = false;
window.initCardForm = function (
pk,
quote,
processMode,
country,
customMethod
) {
console.log(pk);
mp = new MercadoPago(pk);
// Instance SDK v2
mpCardForm = mp.cardForm({
amount: String(quote.totals().base_grand_total),
autoMount: true,
processingMode: processMode,
iframe: true,
form: {
id: "co-mercadopago-form",
cardNumber: {
id: "mpCardNumber",
placeholder: "0000 0000 0000 0000",
style: {
"font-size": "14px",
"font-family": "Helvetica Neue",
},
},
cardholderName: {
id: "mpCardholderName",
},
cardExpirationDate: {
id: "mpCardExpirationDate",
placeholder: "MM/YY",
mode: "short",
style: {
"font-size": "14px",
"font-family": "Helvetica Neue",
},
},
securityCode: {
id: "mpSecurityCode",
placeholder: "CVC",
style: {
"font-size": "14px",
"font-family": "Helvetica Neue",
},
},
installments: {
id: "mpInstallments",
},
identificationType: {
id: "mpDocType",
},
identificationNumber: {
id: "mpDocNumber",
},
issuer: {
id: "mpIssuer",
},
},
callbacks: {
onFormMounted: (error) => {
if (error) return console.warn("FormMounted handling error: ", error);
additionalInfoHandler();
},
onFormUnmounted: (error) => {
fullClearInputs();
if (error) return console.warn("FormMounted handling error: ", error);
if (mpRemountCardForm) {
initCardForm(pk, quote, processMode, country, customMethod);
mpRemountCardForm = false;
} else {
setTimeout(() => {
initCardForm(pk, quote, processMode, country, customMethod);
}, 5000);
}
},
onIdentificationTypesReceived: (error) => {
if (error)
return console.warn("IdentificationTypes handling error: ", error);
},
onInstallmentsReceived: (error, installments) => {
if (error) {
return console.warn("Installments handling error: ", error);
}
setChangeEventOnInstallments(country, installments.payer_costs);
},
onCardTokenReceived: (error, token) => {
if (error) {
showErrors(error);
return console.warn("Token handling error: ", error);
}
customMethod.placeOrder();
},
onPaymentMethodsReceived: (error, paymentMethods) => {
clearInputs();
if (error) {
return console.warn("PaymentMethods handling error: ", error);
}
setImageCard(paymentMethods[0].thumbnail);
handleInstallments(paymentMethods[0].payment_type_id);
loadAdditionalInfo(paymentMethods[0].additional_info_needed);
additionalInfoHandler();
},
onValidityChange: function (error, field) {
if (error) {
if (field == "cardNumber") {
if (error[0].code !== "invalid_length") {
onCardCleaning();
}
}
}
},
},
});
};
window.mpRemountCardForm = function () {
mpRemountCardForm = true;
mpCardForm.unmount();
};
window.mpDeleteCardForm = function () {
mpCardForm.unmount();
};
window.getMpCardFormData = function () {
return mpCardForm.getCardFormData();
};
}.call(this));
If anyone can help me, I would appreciate it.