javascript - Credit cards types for jessepollak's JQuery.Card.js - Stack Overflow

admin管理员组

文章数量:1302379

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.

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.

• javascript
• jquery

Share Follow edited Mar 10, 2015 at 4:26 Tom asked Mar 10, 2015 at 3:41 TomTom 16.3k1515 gold badges7474 silver badges115115 bronze badges 2

• 2 I don't think it was a good idea to embed the actual answer into your question along with a note stating that the "accepted" answer doesn't really work. I think it would be much better to stick to the standard SO format and post the actual solution below as a answer (and accept it). The correct solution should be the one with the checkmark, or at the very least, posted below so the voting system can serve its role as arbiter. Thanks. – Sparky Commented Mar 10, 2015 at 4:41
• 3 Agreed - overwriting the setCardType function is a much cleaner way to do things and my hypothesis failed to be ratified! Nice work Tom and KyleMitt! – TMan Commented Mar 10, 2015 at 4:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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./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 ✓

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./jessepollak/card/blob/master/src/coffee/card.coffee

Or the following line in card.js:

https://github./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./jessepollak/card/blob/master/src/coffee/card.coffee#L36

本文标签： javascriptCredit cards types for jessepollak39s JQueryCardjsStack Overflow