Skip to main content

Autocomplete

In certain circumstances, you may wish to build a web form which allows your customer to utilize autocomplete to populate information that has been cached or saved by their browser in order to complete the form.

Usage of autocomplete for Payment Methods is discouraged by PCI DSS Best Practices. Our clients should discuss usage of this function with their security assessor to determine if this impacts their PCI scope.

Since TokenEx provides an iFrame field that is embedded within a web form that is hosted by our clients, autocompletion of iFrame fields behave in a way that is slightly different from what our clients may be used to. M odern web browsers that the TokenEx iFrame supports (Chrome, Safari, Firefox, Edge) will not support autocomplete of both client form fields and our embedded iFrame in one action. This is due to problems created by elements crossing origin boundaries, forms, etc., breaking up the form within the page. In the end, part of the form exists on the TokenEx iFrame site, and the rest on the client's (your) site. You can see this in the below example.

Standard web forms look like this from a hierarchy perspective:

Normal Web Form
<html>
  <body>
    <form>
      <input type="text" id="creditCard" />
      <input type="text" id="cvv" />
      <input type="text" id="expDate" />
      <input type="submit" value="Submit payment" />
    </form>
  </body>
</html>

A page with our iFrame would look like this from a hierarchy perspective:

<html>
  <body>
    <form>
      <iframe src="tokenex's domain">
        <html>
          <body>
            <input type="text" id="creditCard" />
          </body>
        </html>
      </iframe>
      <input type="text" id="cvv" />
      <input type="text" id="expDate" />
      <input type="submit" value="Submit payment"> />
    </form>
  </body>
</html>

As a result, for clients that opt to set the autocomplete flag on the CC# input within the TokenEx iFrame, the consumer of the end web form would be able to use autocomplete for all elements outside of the iFrame as one action, and the elements inside the iFrame as a second action. However modern browser architecture means that it is impossible to fill out both the parent form and the iFrame field with a single autocomplete action.

To allow autocompletion of browser-stored payment methods in the iFrame, you will need to add this setting in the iFrame config object:

enableAutoComplete: true

This will set the data element autocomplete attribute to: cc-number and the cvv field to cc-csc. For use with cvv only mode, the only data element is cc-csc.

Last updated on