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 method is invoked, call the enableAutofill method to turn it on. Additionally, register a onAutofill handler to receive updates on the autofill event.

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: 11,
     *   year: 2029
     * }
     *
     * 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;
  });
});