> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://ixopay.ferndocs.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://ixopay.ferndocs.com/_mcp/server.

# Auto-fill card data

Most browsers and password managers support autofill of card data in payment forms. Since payment.js renders two iframes for the sensitive card data inputs (card number and CVV/CVC code) it requires special preparation to support the autofill feature.

## Known limitations

Because the browser are autofilling all data only in the scope of one domain, the card number fields should be first in order on your payment form. This is the only way that payment.js can capture all data and pass them to you through the mechanism described below.

## How to use

Once the complete handler of the [`init`](https://documentation.ixopay.com/docs/reference/integration/payment.js/methods#init) method is invoked, call the [`enableAutofill`](https://documentation.ixopay.com/docs/reference/integration/payment.js/methods#enableautofill) method to turn it on. Additionally, register a [`onAutofill`](https://documentation.ixopay.com/docs/reference/integration/payment.js/methods#onautofill) handler to receive updates on the autofill event.

```javascript
const payment = new PaymentJs();
payment.init("$INTEGRATION_KEY", "cc-number", "cc-csc", (payment) => {
  payment.enableAutofill();
  payment.onAutofill((data) => {
    /*
     * "data" contains an object like this:
     *
     * const data = {
     *   card_holder: "Alex Smith",
     *   month: 9,
     *   year: 2031
     * }
     *
     * You should apply them to the input fields on your payment form,for example:
     */
    document.getElementById("field_id_of_cardholder").value = data.card_holder;
    document.getElementById("field_id_of_month").value = data.month;
    document.getElementById("field_id_of_year").value = data.year;
  });
});
```