Geek Answers Handbook

Credit Card Types for jessepollak JQuery.Card.js

I am using jquery.card.js from jessepollak. This is amazing.

If anyone has experience, could you tell me if it is possible to choose which types of credit card you want to support?

eg.

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

Are there any such options? How do I achieve this?

Thank.

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

It turns out that only changing the types of cards proposed by TMan does not work. But this is not about fish, but about giving me the idea of ​​fishing. After hacking the TMan idea in a script, I found that 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 into the library source code, quickly and dirty, NOT a good idea, or do something to initialize the handlers in your own way in your own code.

.

+4
2

. . .

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 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>

, :

mastercard (55*) - ✓
(4*) - ✓
amex (37*) - ✓

+9

Coffeescript, , , , cardTypes, undefined.

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

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'];

, , cardTemplate, DOM, :

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

+2

More articles:


All Articles