card type icon not working

[timcullen]

I like the idea of the card icon. IS the intention that the icon appears when enough of the card number has been entered to identify the issuer? I cant get the icon to appear at all. The ng-class stays as myForm.number.$card.type without being dynamically changed to the card type (e.g. mastercard) to take advantage of the CSS styling.

It be because I have carved up your example into its separate components (styling into my .css file, handler into existing controller etc.

Anything obvious Im doing wrong?

[shannon]

Yea I don't think this works either. myForm.number has no property $card. The demo was using angular 1.07 which is quite old. Perhaps angular has changed so this no longer works?

[shannon]

Ah nevermind, I figured out what was missing. Make sure you give your number input a name attribute.

<input type="text" name="number" ng-model="number" payments-validate="card" payments-format="card" payments-type-model="type" ng-class="myForm.number.$card.type" />

[timcullen]

still doesn’t work for me

From: Shannon Poole [mailto:notifications@github.com] Sent: 07 July 2014 20:43 To: laurihy/angular-payments Cc: Tim Cullen Subject: Re: [angular-payments] card type icon not working (#40)

Ah nevermind, I figured out what was missing. Make sure you give your number input a name attribute.

— Reply to this email directly or view it on GitHubhttps://github.com/laurihy/angular-payments/issues/40#issuecomment-48230716.

[carlosazaustre]

I've used this piece of code on my controller, using jquery.payment from Stripe:

    var inputCard = $("#paymentCard");
        var card;
        inputCard.keypress(function() {
            card = $.payment.cardType( $(this).val() );
            if (card !== null) {
                $(this).addClass("card-" + card);
            }
        });
        inputCard.keyup(function(e) {
            if(e.keyCode == 8 || e.keyCode == 64) {
                $(this).removeClass("card-" + card);
            }
        });

[mmick66]

The name attribute is definitely missing from the example code and without that it will not work at all. Adding it did the job for me.

[timcullen]

So Ive come back to this and managed to fix it. In my case, the problem was being caused by CSS class priorities. I fixed it by adding '!important' to each of the entries in the CSS class definition. eg for visa

.visa { background-image: url('data:image/svg+xml) !important; background-size: auto 50% !important; background-repeat: no-repeat !important; background-position-x: 98% !important; background-position-y: 50% !important; }

hope this helps someone

tim

[sztelzer]

Beyond the name attribute, ng-class should be (surprisingly as I understand ng scopes) in single quotes. ng-class='creditForm.number.$card.type' If in double quotes, ng-class can't pass it along. Also added !important to all class definitions, mainly must do this if using some design framework.

Well, but now only 'Visa' works. Amid Mastercard being validated, the type doesn't change, so neither the class.

This is the full input tag working with Visa: