Credit Card

View code

Use

Try these:
  • 378734493671000
  • 6011000990139424
  • 3566002020360505
  • 5105105105105100

HTML 

<rg-credit-card-number></rg-credit-card-number>

JavaScript 

var tags = riot.mount('rg-credit-card-number', {
  placeholder: 'Long number on front',
  cardnumber: '4000 0000 0000 0002'
})

The control will produce a textbox that validates the card number (spaces are removed automatically) and if valid will turn the border green and apply a card CSS class name.

The following card types (CSS classes) are supported:

  • amex
  • diners_club_carte_blanche
  • diners_club_international
  • mastercard
  • discover
  • jcb
  • laser
  • maestro
  • visa
  • visa_electron

To display a card icon add a class with a background image for each of the supported card types.