MercadoPago doesn't see my cardForm form as SecureFields

[cuartas15]

So I have my integration up and running, my score is 76/100, but one of the recommendations of mercadopago is to use secureFields. The only reference about it I found was this migration link
https://www.mercadopago.com.ar/developers/es/docs/sdks-library/client-side/java/howto-migrate

Have in mind I'm using the latest version already, and since I'm using a non-central method like cardForm, none of these migration steps apply because cardform is doing everything for me right?
As far as I'm concerned, cardForm is fully in charge of making the input elements of my form secureFields and such, so I don't really understand why mercadopago is recommending me to make use of them.

I'll show some snippets of code, I have a Vue 2.7 app running:

payments.php:

<div class="row form-container">
    <label for="cardNumber" class="col-12 mb-1 required"><?= metaValue('Card number', 'cardNumber', $this) ?></label>
    <div class="col-12">
        <div class="form-group">
            <input class="form-control" :class="errors.has('cardNumber') || (formServerErrors.cardNumber && !fields.cardNumber.dirty) ? 'is-invalid' : ''" id="cardNumber" name="cardNumber" type="text" @input="FixCreditCardValue" v-validate="'required|valid_credit_card|length:8,19'"/>
            <p v-if="errors.has('cardNumber')" class="small text-danger pt-1 mb-0">{{ errors.first('cardNumber') }}</p>
            <p v-if="formServerErrors.cardNumber && !fields.cardNumber.dirty" class="small text-danger pt-1 mb-0">{{ formServerErrors.cardNumber }}</p>
        </div>
    </div>
</div>
<div class="row form-container">
    <label for="cardExpirationDate" class="col-12 mb-1 required"><?= metaValue('Expiration date', 'cardExpirationDate', $this) ?></label>
    <div class="col-12">
        <div class="form-group">
            <input class="form-control" :class="errors.has('cardExpirationDate') || (formServerErrors.cardExpirationDate && !fields.cardExpirationDate.dirty) ? 'is-invalid' : ''" id="cardExpirationDate" name="cardExpirationDate" type="text" v-validate="'required|valid_card_expiration_date'"/>
            <p v-if="errors.has('cardExpirationDate')" class="small text-danger pt-1 mb-0">{{ errors.first('cardExpirationDate') }}</p>
            <p v-if="formServerErrors.cardExpirationDate && !fields.cardExpirationDate.dirty" class="small text-danger pt-1 mb-0">{{ formServerErrors.cardExpirationDate }}</p>
        </div>
    </div>
</div>
<div class="row form-container">
    <label for="cardSecurityCode" class="col-12 mb-1 required"><?= metaValue('Security code', 'cardSecurityCode', $this) ?></label>
    <div class="col-12">
        <div class="form-group">
            <input class="form-control" :class="errors.has('cardSecurityCode') || (formServerErrors.cardSecurityCode && !fields.cardSecurityCode.dirty) ? 'is-invalid' : ''" id="cardSecurityCode" name="cardSecurityCode" type="text" v-validate="'required|numeric|length:3,4'"/>
            <p v-if="errors.has('cardSecurityCode')" class="small text-danger pt-1 mb-0">{{ errors.first('cardSecurityCode') }}</p>
            <p v-if="formServerErrors.cardSecurityCode && !fields.cardSecurityCode.dirty" class="small text-danger pt-1 mb-0">{{ formServerErrors.cardSecurityCode }}</p>
        </div>
    </div>
</div>

Payments.vue:

import { loadMercadoPago } from '@mercadopago/sdk-js';
//
//
methods: {
    async GetMercadoPagoObject() {
        await loadMercadoPago();

        this.mercadoPagoObject = new window.MercadoPago(this.mercadopagoInfo.PUBLIC_KEY, {
            locale: this.mercadopagoInfo.locale
        });

        this.cardFormObject = this.mercadoPagoObject.cardForm({
            amount: '' + (this.convertedMercadopagoPrice !== -1 ? Math.ceil(this.convertedMercadopagoPrice) : Math.ceil(this.GetLocalStringToNumber(this.currentPriceServer))),
            iframe: false,
            form: {
                id: 'credit-card-checkout',
                cardNumber: {
                    id: 'cardNumber',
                    placeholder: '',
                },
                expirationDate: {
                    id: 'cardExpirationDate',
                    placeholder: 'MM/YY',
                },
                securityCode: {
                    id: 'cardSecurityCode',
                    placeholder: '',
                },
                cardholderName: {
                    id: 'cardHolderName',
                    placeholder: '',
                },
                issuer: {
                    id: 'cardIssuer',
                    placeholder: '',
                },
                installments: {
                    id: 'cardInstallments',
                    placeholder: '',
                },
                identificationType: {
                    id: 'cardIdentificationType',
                    placeholder: '',
                },
                identificationNumber: {
                    id: 'cardIdentificationNumber',
                    placeholder: '',
                },
                cardholderEmail: {
                    id: 'cardHolderEmail',
                    placeholder: 'E-mail',
                }
            },
            callbacks: {
                onFormMounted: error => {
                    if (error) return console.warn('Form Mounted handling error: ', error);

                    selfComponent.$validator.reset();
                    $('#cardHolderEmail').val(selfComponent.defaultMercadopagoEmail);
                },
                onInstallmentsReceived: (error, data) => {
                    if (this.convertedMercadopagoPrice !== -1) {
                        let installments = data.payer_costs;
                        let price = Math.ceil(this.GetLocalStringToNumber(this.currentPriceServer));

                        $('#cardInstallments option').each(function(index, element) {
                            $(element).text(`${installments[index].installments} ${selfComponent.$store.state.Language['InstallmentsOf']} ${selfComponent.dollarFormatMercadopago.format(Math.ceil(Math.ceil(price) / parseInt(installments[index].installments)))} (${selfComponent.dollarFormatMercadopago.format(Math.ceil(price))})`)
                        });
                    }
                },
                onIdentificationTypesReceived: (error, data, identificationTypesResponse) => {
                    $('#cardIdentificationType option').each(function(index, element) {
                        if (data[index].name === 'Otro') {
                            if (selfComponent.defaultMercadopagoCurrency !== selfComponent.currentISO) {
                                $(element).text(selfComponent.$store.state.Language['IdentificationId']);
                            } else {
                                $(element).text(selfComponent.$store.state.Language['OtherId']);
                            }
                        } else {
                            if (selfComponent.defaultMercadopagoCurrency !== selfComponent.currentISO) {
                                $(element).remove();
                            }
                        }
                    });
                }
                // onCardTokenReceived: (error, data) => {
                //     console.log(error)
                //     console.log(data)
                // },
                // onError: (error, event) => {
                //     console.log(error)
                //     console.log(event)
                // }
            }
        });
    }
}

I want to understand what's missing in my code in order to make them secureFields and get these 8 extra points, which apparently I need urgently since mercadopago is rejecting a lot of credit card for no apparent reason other than the one we suspect, which is the score being too low.

Thanks in advance

[meliguicarvalho]

Hello.
Thanks for your question.
In your integration, you configured the setting iframe as false. This disables the Secure Fields.
To enable Secure Fields, change the setting to true.
Please follow the steps in our documentation to use the Card Form in the recommended manner.
For reference, check our technical documentation.

Hope this helps, if you have any follow up questions, feel free to ask.

[cuartas15]

Damn, that basically makes it so I don't have control over the inputs and I can't use vee-validate for data validation.
Well, I'm gonna have to do a workaround then, I'll report if this works

[meliguicarvalho]

Just to give you more context.
Using Secure Fields really does not allow you to control your inputs, this is to enhance security, so the sensitive PCI data is under Mercado Pago's responsability.