Polymer Gold CC Input

The Polymer Gold CC Input is a material designed style input text field. It is used for entering credit card number. As the user type the code, it adds a space after every 4 digits.

Syntax:

This element has an optional label, which is the "card number" by default as shown below -

Validation

We can validate the entered credit card number whether it is valid or invalid along with the type of card by using the Luhn checksum.

If you want to validate manually, you can use validate() method that returns true if it is valid otherwise false, if it is not valid. You can also use auto-validate and required attributes to make the input automatically validated.

It includes different types of credit cards such as amex, diners_club, discover, jcb, laser, maestro, mastercard, visa, visa_electron etc. These are provided through cardTypes property.

Example

Run the following command to install gold-cc-input element in your project directory. After that you can use this element in your application:

It will install all the related elements of polymer-gold-cc-input under the bower_components folder.

Create an index.html file and add the following code in it to see the usage of gold-cc-input element in Polymer.js.

Output: