Polymer - Gold CC Input

<gold-cc-input> is a Material Design styled input text field for entering a credit card number. As the user types a number, a space will be added after every 4 digits.

Syntax

<gold-cc-input></gold-cc-input>

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

<gold-cc-input label = "CC"></gold-cc-input>

Validation

Using the Luhn checksum, the entered credit card number is detected whether it is valid or invalid along with the type of card.

To validate manually, you can use validate() method that returns true if it is valid or otherwise false, if it is not valid. The use of auto-validate and required attributes cause the input to be automatically validated.

A list of credit card types such as amex, diners_club, discover, jcb, laser, maestro, mastercard, visa, visa_electron are provided through cardTypes property.

styling

To style this element, see Polymer.PaperInputContainerfor a list of custom properties.

The custom property used to style this element is as follows −

----gold-cc-input-icon-container − Defines the mixin for customizing the icon container. The default value is {}.

Example

To use the gold-cc-input element, navigate to your project folder in the command prompt and use the following command.

bower install PolymerElements/gold-cc-input --save

The above command installs the gold-cc-input element in bower_components folder. Next, import the gold-cc-input file in your index.html using the following command

<link rel = "import" href = "/bower_components/gold-cc-input/gold-cc-input.html">

The following program demonstrates the use of gold-cc-input element.

<!DOCTYPE html>
<html>
   <head>
      <title>Gold CC Input</title>
      <meta charset = "utf-8">
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "bower_components/gold-cc-input/gold-cc-input.html">
   </head>

   <body>
      <h3>Pre-validated credit card numbers</h3>
      <gold-cc-input 
         label = "Visa" 
         auto-validate 
         value = "4111111111111111" 
         style = "width:40%; display:inline-block;">
      </gold-cc-input><br/>
	
      <gold-cc-input 
         label = "Invalid Visa" 
         auto-validate 
         value = "4111 1111 1111 0021" 
         style = "width:40%; display:inline-block;">
      </gold-cc-input>
	
      <h3>Displayes error message for wrong number</h3>
      <gold-cc-input 
         label = "Enter a credit card number" 
         auto-validate 
         error-message = "Please enter a valid credit card number" 
         style = "width:40%; display:inline-block;">
      </gold-cc-input>
   </body>
</html>

Output

To run the application, navigate to your project directory and run the following command.

polymer serve

Now open the browser and navigate to http://127.0.0.1:8081/. Following will be the output.

polymer_elements.htm