Name: gold-cc-cvc-input
Owner: PolymerElements
Description: An input element that only allows cvc codes
Created: 2015-05-04 19:31:31.0
Updated: 2018-04-10 23:51:23.0
Pushed: 2018-05-23 02:25:09.0
Homepage: https://elements.polymer-project.org/elements/gold-cc-cvc-input?view=demo:demo/index.html
Size: 115
Language: HTML
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
gold-cc-cvc-input is a single-line text field with Material Design styling
for entering a credit card's CVC (Card Verification Code). It supports both
4-digit Amex CVCs and non-Amex 3-digit CVCs
d-cc-cvc-input></gold-cc-cvc-input>
d-cc-cvc-input card-type="amex"></gold-cc-cvc-input>
It may include an optional label, which by default is “CVC”.
d-cc-cvc-input label="Card Verification Value"></gold-cc-cvc-input>
It can be used together with a gold-cc-input by binding the cardType property:
d-cc-input card-type="{{cardType}}"></gold-cc-input>
d-cc-cvc-input card-type="[[cardType]]"></gold-cc-cvc-input>
The input considers a valid amex CVC to be 4 digits long, and 3 digits otherwise.
The amex attribute can also be bound to a gold-cc-input's card-type attribute.
The input can be automatically validated as the user is typing by using
the auto-validate and required attributes. For manual validation, the
element also has a validate() method, which returns the validity of the
input as well sets any appropriate error messages and styles.
See Polymer.PaperInputBehavior for more API docs.
See Polymer.PaperInputContainer for a list of custom properties used to
style this element.
| Custom property | Description | Default |
| — | — | — |
| --gold-cc-cvc-input-icon | Mixin applied to the icon | {} |