Refreshing the Credit Card Image

[dcipher]

I have the masked Credit Card No (**** **** **** 1234), expiry and Name stored on a cell phone. When the user wants to update their credit card information it would be nice if the form showed the currently saved values without having the user enter data in each field. So is there a way to cause the form to refresh using the values in the pre-loaded fields?

[sergeykonovalenko]

I have the same problem

[melloware]

I use JQuery and this works for me to show the card with the values that are prefilled updated.

$(document).ready(function() {
    const blur = new Event('blur');
    const change = new Event('change');
    $('form').find(':input').each(function() {
        if (this.name === "number" || this.name === "name" || this.name === "expiry" || this.name === "cvc") {
            this.dispatchEvent(blur);
            this.dispatchEvent(change);
        }
    })
});

This assumes your field names are like mine above. Works like a charm

[ronaldohoch]

Same here.
But, used the solution provided by melloware.

Angular code:
this.nameInput.nativeElement.dispatchEvent(new Event('change'));

But, when set the input to empty, this doesn't work, tried these events: change, keydown, keyup, blur, keypress.

[melloware]

@ronaldohoch and you are using the latest version found in the /dist folder here? Just making sure its not already fixed as we have committed some fixes since the 2.5.0 release that is on NPM.

[melloware]

Also I think I had to fire BOTH blur and change to make it work.

[ronaldohoch]

Due Content Security Policy, i need to download the file '-'
Is this the new version?

https://unpkg.com/[email protected]/dist/card.js

[melloware]

No this 2.5.1 is not published to NPM yet: https://github.com/jessepollak/card/tree/master/dist

[melloware]

You can see what has been fixed in 2.5.1 here: https://github.com/jessepollak/card/milestone/2?closed=1

[ronaldohoch]

Worked!

Thank you :)