createCardToken "Invalid primary field found"

[lucerojulian]

Hello, we are migrating the client from version v1 to v2, we already have mercadopago working on the server and client, we use our own checkout with custom inputs, so we only need the core methods so my problem is that in v2 I don't know why I can't use the createCardToken function since it does not specify requirements to be able to use it and i get this error "No primary field found. Please create and mount on…efore calling 'createCardToken'. Ignoring call...", and also if it is okay that getIdentificationTypes does not return any type of identity document ( for Mexico ).

[gdeandradero]

Hello, how are you?

About createCardToken function:

Instead of your current custom inputs for the following fields: expirationDate, cardNumber and securityCode, you should put three divs:

<div id="expirationDate"></div>
<div id="cardNumber"></div>
<div id="securityCode"></div>

After, you need to put the following code:

const cardNumberElement = mp.fields.create('cardNumber', {
  placeholder: "Número do cartão"
}).mount('cardNumber');

const expirationDateElement = mp.fields.create('expirationDate', {
  placeholder: "MM/YY",
}).mount('expirationDate');

const securityCodeElement = mp.fields.create('securityCode', {
  placeholder: "Código de segurança"
}).mount('securityCode');

The methods above will insert the input component on the divs that you created before.

About getIdentificationTypes:

Now this function returns a promise, so, you need to resolve it, on the devsite example, we make it in the following way:

(async function getIdentificationTypes() {
      try {
        const identificationTypes = await mp.getIdentificationTypes();

        const identificationTypeElement = document.getElementById('docType');

        createSelectOptions(identificationTypeElement, identificationTypes);

      } catch (e) {
        return console.error('Error getting identificationTypes: ', e);
      }
})();

function createSelectOptions(elem, options, labelsAndKeys = { label: "name", value: "id" }) {

      const { label, value } = labelsAndKeys;

      elem.options.length = 0;

      const tempOptions = document.createDocumentFragment();

      options.forEach(option => {
        const optValue = option[value];
        const optLabel = option[label];

        const opt = document.createElement('option');
        opt.value = optValue;
        opt.textContent = optLabel;

        tempOptions.appendChild(opt);
      });

      elem.appendChild(tempOptions);
}

Reference

MP Developers Site