jquery.creditcardtypes.js

(function($) {
    $.getCreditCardType = function(val) {
      if(!val || !val.length) return undefined;

      switch(val.charAt(0)) {
        case '4': return 'VISA';
        case '5': return 'MC';
        case '3': return 'AMEX';
        case '6': return 'DISCOVER';
      };

      return undefined;
    };

    $.fn.creditCardType = function(options) {
      var settings = {
          target: '#credit_card_type',
      };

      if(options) {
          $.extend(settings, options);
      };

      var keyupHandler = function() {
        var background_position = '0 0';
        switch($.getCreditCardType($(this).val())) {
          case 'VISA':
            background_position = '0 -23px';
            break;
          case 'MC':
            background_position = '0 -46px';
            break;
          case 'AMEX':
            background_position = '0 -69px';
            break;
          case 'DISCOVER':
            background_position = '0 -92px';
            break;
        };
        $(settings.target).css('background-position', background_position);
      };

      return this.each(function() {
        $(this).bind('keyup',keyupHandler).trigger('keyup');
      });
    };

})(jQuery);