Polymer Gold CC CVC Input

The polymer gold-cc-cvc input is a material design styled single line input which is used to verify the credit card while you enter the code.

Syntax:

Here CVC is a default label which is optional.

You can also use <gold-cc-input> along with <gold-cc-cvc-input> by binding the property cardType.

Validation

The CVC input accepts 3 digit long code for most of the valid cards, but for valid american express CVC is considered to be 4 digits.

You can manually validate it by using validate() method that returns true if it is valid or otherwise false, if it is not valid. You can use auto-validate and required attributes to make the input to be automatically validated.

Example

Run the following command to install gold-cc-cvc-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-cvc-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-cvc-input element in Polymer.js.

Output: