format credit card number after Autofill

[jack-guide]

Hi,

is there a way to format the credit card number after Autofill by the browser.

e.g. the user has their card details saved in chrome / Edge etc and is prompted to use it when they enter the credit card field. the Autofil enters the card number without spaces e.g. 4444333322221111 and it is not automatically formatted to 4444 3333 2222 1111.

if you paste 4444333322221111 into the credit card box it does format it 4444 3333 2222 1111.

thanks for your help.

very useful library

jack

[melloware]

Hmmmm i would assume autofill would fire the change event. If you do some research on what event is fired on autofill we might be able to fix it.

[jack-guide]

the following fires:

$("[id*='CCInputFieldName']").on('blur input', function () {
alert();
});

but i do not think i have access to a function to format the input box

thanks for replying

[melloware]

Weird these are the DOM events mapped to the field... Looks like formatCardNumber is called on "input" but not on "blur" but i thought "input" should cover it?

  @formatCardNumber: (el, maxLength) ->
    Payment.restrictNumeric el
    QJ.on el, 'keypress', restrictCardNumber(maxLength)
    QJ.on el, 'keypress', formatCardNumber(maxLength)
    QJ.on el, 'keydown', formatBackCardNumber
    QJ.on el, 'keyup blur', setCardType
    QJ.on el, 'paste', reFormatCardNumber
    QJ.on el, 'input', formatCardNumber(maxLength)

[jack-guide]

that is a bit beyond my technical knowledge.

at the moment autofill is unformatted like this

[jack-guide]

when i manually key them in, its formatted correctly.

the same is true if i paste 4444333322221111

[melloware]

Can you try something. Can you edit your payment.js locally and try it. I already had the input event so I added a blur event to reformatCardNumber. Which is similar to the 2 Jquery events you have above.

Payment.formatCardNumber = function(el, maxLength) {
    Payment.restrictNumeric(el);
    QJ.on(el, 'keypress', restrictCardNumber(maxLength));
    QJ.on(el, 'keypress', formatCardNumber(maxLength));
    QJ.on(el, 'keydown', formatBackCardNumber);
    QJ.on(el, 'keyup blur', setCardType);
    QJ.on(el, 'blur', reFormatCardNumber);
    QJ.on(el, 'paste', reFormatCardNumber);
    QJ.on(el, 'input', formatCardNumber(maxLength));
    return el;
  };

I added the line

    QJ.on(el, 'blur', reFormatCardNumber);

[jack-guide]

perfect! that worked

genius

[melloware]

Thanks for testing fixed for 2.4.4

[jack-guide]

rockstar

[melloware]

I have to revert this change as it broke mobile browsers see #161

[osrl]

I still have this issue on 2.4.6

[melloware]

Yes see my comment above that is had to be reverted because it broke mobile browsers