Credit cards types for jessepollak's JQuery.Card.js

Question

I am using jquery.card.js from jessepollak. It is awesome.

If anyone has experience with it, could you please tell me if there is an option to choose what types of credit card you want to support?

e.g.

//This is how I would like it to be...
var card = new Card({
  supportedCardTypes: 'Visa, Master'; //I don't want DC or AMEX etc...
});

Is there any options like that? How do I achieve it?

Thank you.

Answer ------------------------------------------------------------

Turns out, only changing cardTypes as TMan suggested didn't work. But it is not about the fish, it is about giving me the idea of fishing. Following TMan's idea hacking into the script, I found adding this line would work:

Card.prototype.handlers = {
    setCardType: function($el, e) {
      //my modification here to support only Visa and Master!!
      var cardType = e.data === 'mastercard' || e.data === 'visa' ? e.data : 'unknown';
      //end of my modification!!
      if (!QJ.hasClass(this.$card, cardType)) {
        QJ.removeClass(this.$card, 'jp-card-unknown');
        QJ.removeClass(this.$card, this.cardTypes.join(' '));
        QJ.addClass(this.$card, "jp-card-" + cardType);
        QJ.toggleClass(this.$card, 'jp-card-identified', cardType !== 'unknown');
        return this.cardType = cardType;
      }
    },

You can just hack the library source code, quick and dirty NOT the best idea, or do something to initialise the handlers your way in your own code.

Thanks again.

Answer 1

Great ideas all around. Here's a way to take your addition to the handler and override it without having to hack at the library. This will persist future changes much better.

var setCardTypeOrig = Card.prototype.handlers.setCardType;

Card.prototype.handlers.setCardType = function($el, e) {
  var allowedCards = ['mastercard','visa'];
  if (allowedCards.indexOf(e.data) < 0) e.data = 'unknown';
  setCardTypeOrig.call(this, $el, e);
}

Demo in Stack Snippets

var setCardTypeOrig = Card.prototype.handlers.setCardType;

Card.prototype.handlers.setCardType = function($el, e) {
  var allowedCards = ['mastercard','visa'];
  if (allowedCards.indexOf(e.data) < 0) e.data = 'unknown';
  setCardTypeOrig.call(this, $el, e);
}

var card = new Card({ form: '.form-container form', container: '.card-wrapper' })

.form-container {
  margin-top: 20px;
}
.form-container input {
  font-family: 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
  float: left;
}
.form-container input.col-6 {
  width: 50%
}
.form-container input.col-3 {
  width: 25%
}

.form-container input[type="text"] {
  background-color: #fff;
  border: 1px solid #cccccc;

  font-size: 0.875rem;
  margin: 0 0 1rem 0;
  padding: 0.5rem;
  height: 2.3125rem;
  
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.form-container .button {
  cursor: pointer;

  position: relative;
  text-decoration: none;
  text-align: center;
  
  font-size: 0.875rem;
  margin: 0 0 1rem 0;
  padding: 0.5rem;
  height: 2.3125rem;
  
  color: #fff;
  background-color: #008CBA;
  border-width: 0;
}

.form-container .button:hover, 
.form-container .button:focus {
  background-color: #007295;
}

<script src="https://rawgit.com/jessepollak/card/master/lib/js/card.js"></script>

<div class="demo-container">

  <div class="card-wrapper"></div>

  <div class="form-container">
    <form action="">

      <input placeholder="Card number" type="text" name="number" class="col-6"/>
      <input placeholder="Full name" type="text" name="name" class="col-6"/>
      <input placeholder="MM/YY" type="text" name="expiry" class="col-3"/>
      <input placeholder="CVC" type="text" name="cvc" class="col-3"/>
      <input type="submit" value="Submit" class="button col-6"/>

    </form>
  </div>
</div>

To test it, you can look at the card payment definitions:

mastercard (55*) - works ✓
visa (4*) - works ✓
amex (37*) - doesn't ✓

Answer 2

Based on the Coffeescript file, I think your best bet would be to fork the library and then remove the cards you don't want to support from the cardTypes array so that all other numbers would show up as undefined.

https://github.com/jessepollak/card/blob/master/src/coffee/card.coffee

Or the following line in card.js:

https://github.com/jessepollak/card/blob/master/lib/js/card.js#L1134

Card.prototype.cardTypes = ['jp-card-amex', 'jp-card-dankort', 'jp-card-dinersclub', 
    'jp-card-discover', 'jp-card-jcb', 'jp-card-laser', 'jp-card-maestro', 
    'jp-card-mastercard', 'jp-card-unionpay', 'jp-card-visa', 'jp-card-visaelectron'];

You'll also probably want to modify the cardTemplate variable to remove the DOM nodes that no longer apply:

https://github.com/jessepollak/card/blob/master/src/coffee/card.coffee#L36