How can we fill createCardToken method parameters using SecureFields?

[ihojmanb]

Since using SecureFields injects iframe's to protect card data, we are unable to access those card values. Then, how am I supposed to fill createCardToken params the documentation way?

In the docs you are using document.getElementById to access card value:

    async function createCardToken(event) {
      try {
        const tokenElement = document.getElementById('token');
        if (!tokenElement.value) {
          event.preventDefault();
          const token = await mp.fields.createCardToken({
            cardholderName: document.getElementById('form-checkout__cardholderName').value,
            identificationType: document.getElementById('form-checkout__identificationType').value,
            identificationNumber: document.getElementById('form-checkout__identificationNumber').value,
          });
          tokenElement.value = token.id;
          formElement.requestSubmit();
        }
      } catch (e) {
        console.error('error creating card token: ', e)
      }
    }

but with iframes document.getElementById('form-checkout__cardholderName') returns undefined, so getting the value field gets us nowhere (only errors)

Any alternatives?

[icaldana]

Hello @ihojmanb 😸
Secure Fields use iFrames to do not expose PCI data such as cardNumber, expirationDate and securityCode, so you do not need to worry about it on mp.fields.createCardToken method. This is actually the reason for the iframes to exist. About you getting undefined, please make sure the page is loading properly, I’ve tested on a local example, and I was able to get the data from document.getElementById('form-checkout__cardholderName').value

Please take a look at https://github.com/mercadopago/sdk-js/blob/main/API/fields.md#mp-instancefieldscreatecardtokennonpcidata

[icaldana]

Ah, please make sure you are not mixing up cardholderName with cardNumber ☺️

[ihojmanb]

So this nonPCIData means that I only need to pass cardholderName to mp.fields.createCardToken and mercadopago will capture the PCI data under the hood?

[icaldana]

• nonPCIData means everything except cardNumber, expirationDate and securityCode
• As you mentioned already, mp.fields.createCardToken is expecting cardholderName, identificationType and identificationNumber as parameters

      const token = await mp.fields.createCardToken({
        cardholderName: document.getElementById('form-checkout__cardholderName').value,
        identificationType: document.getElementById('form-checkout__identificationType').value,
        identificationNumber: document.getElementById('form-checkout__identificationNumber').value,
      });

[icaldana]

In a nutshell, the fields you need to pass to createCardToken should already be available to you.

[ihojmanb]

Excellent, it worked! thanks Ismael 😃