kenkeiter / skeuocard

Skeuocard progressively enhances credit card inputs to provide a skeuomorphic interface.
http://kenkeiter.com/skeuocard/
MIT License
3.23k stars 231 forks source link

How do I redeem the identifier flag credit card selected as visa, amex ... ? #93

Closed hackin88 closed 11 years ago

hackin88 commented 11 years ago

I need to get the handle of the flag, or redeem stored value

What would be the correct way to get this information?

kenkeiter commented 11 years ago

I assume that you need to get the details of the card. The underlying form values are changed in real-time as the user enters them -- so there should be an underlying field containing the card type, as well.

You should use jQuery to get the value of the underlying type field. If you're using the default selectors, you can do so using something like this:

jQuery('[name="cc_type"]').val()

If you'd like to take an event-based approach, you can subscribe to the productWillChange.skeuocard or productDidChange.skeuocard events by doing something like this:

card.bind('productWillChange.skeuocard', function(_card, oldProduct, newProduct){
  if(newProduct != null){
    alert("Skeuocard will change to type: " + newProduct.attrs.companyShortname);
  };
});
hackin88 commented 11 years ago

Is not working, go

http://www.cerebrum.com.br/diversos/skeuocard_event.html

Enter the following credit card

VISA 4073020000000002

It is not immediately displayed the type of credit card is "visa"

Then when entering the following credit card

MASTERCARD 5555666677778884

Ai appears "skeuocard will change to type: visa"

kenkeiter commented 11 years ago

Ah -- my mistake. The first parameter to the handler function is the event itself. It should look more like this:

card.bind('productWillChange.skeuocard', function(e, _card, oldProduct, newProduct){
  if(newProduct != null){
    alert("Skeuocard will change to type: " + newProduct.attrs.companyShortname);
  };
});

Note that null will represent a generic card (no card product). oldProduct or newProduct may be null when the user enters a number which doesn't match any known card product (i.e. visa, mastercard, etc.)

I tried the above code in the browser, and it worked :)

kenkeiter commented 11 years ago

Side note: adding a page to the wiki about this: https://github.com/kenkeiter/skeuocard/wiki/Events