Ember-credit-cards

A credit card utility library and form elements. Influenced by the jquery.payment lib.

Checkout the demo.

Components

• Ember.js v3.4 or above
• Ember CLI v2.13 or above
• Node.js v8 or above

credit-card-form

Full credit card form with validations and formatting.

Attributes:

• number
• name
• month
• year
• cvc
• zipcode
• zipcodeRequired

Events:

• onValidate

Example:

//templates/credit-cards/new.hbs
 
  <div>
    {{ credit-card-form
       number=attrs.number
       name=attrs.name
       month=attrs.month
       year=attrs.year
       cvc=attrs.cvc
       onValidate=(mut disabled)
    }}
  </div>
 
  <button {{action "save"}} disabled={{disabled}}>
    Save
  </button>
 

input-credit-card-number

Formats credit card number on entry. Discards non-numeric and extra characters. Parses sets number attribute.

Attributes:

• number

input-credit-card-cvc

Formats cvc number on entry. Discards non-numeric and extra characters. Parses sets cvc attribute.

Attributes:

• cvc

input-credit-card-expiration

Validates and formats expiration date. Discards non-numeric and extra characters. Parses and sets month, year attributes.

Attributes:

• month
• year

input-credit-card-zipcode

Validates and formats zip code. Discards non-numeric and extra characters. Sets zipcode attribute.

Attributes:

• zipcode

Validations

validateNumber(number)

Validates a card number:

• Validates numbers
• Validates Luhn algorithm
• Validates length

Example:

import validations from 'ember-credit-cards/utils/validations';
 
validations.validateNumber('4242 4242 4242 4242'); //=> true

validateCVC(cvc, type)

Validates a card CVC:

• Validates number
• Validates length to 4

Example:

import validations from 'ember-credit-cards/utils/validations';
 
validations.validateCVC('123'); //=> true
validations.validateCVC('123', 'amex'); //=> true
validations.validateCVC('1234', 'amex'); //=> true
validations.validateCVC('12344'); //=> false

validateExpiration(month, year)

Validates a card expiration date:

• Validates numbers
• Validates in the future
• Supports year shorthand

Example:

import validations from 'ember-credit-cards/utils/validations';
 
validations.validateExpiration('05', '20'); //=> true
validations.validateExpiration('05', '2015'); //=> true
validations.validateExpiration('05', '05'); //=> false

validateZipcode(number)

Validates a zip code:

• Validates 5 digit optional + 4 zipcode

Example:

import validations from 'ember-credit-cards/utils/validations';
 
validations.validateZipcode('94611'); //=> true
validations.validateZipcode('946'); //=> false
validations.validateZipcode('94611-2544'); //=> true
validations.validateZipcode('946112544'); //=> true
validations.validateZipcode('94611-24'); //=> false
 

I18n

Custom Labels

You can provide custom labels for localization.

  <div>
    {{
      credit-card-form
      number=ccNumber
      name=ccName
      month=ccMonth
      year=ccYear
      cvc=ccCvc
      numberLabel=(t 'credit-card-form.number')
      securityCodeLabel=(t 'credit-card-form.security-code')
      nameOnCardLabel=(t 'credit-card-form.name-on-card')
      expirationLabel=(t 'credit-card-form.expiration')
      zipCodeLabel=(t 'credit-card-form.zip-code')
      on-validate='ccValidate'
    }}
  </div>