Input Credit Card

Sticker Sheet Storybook

Examples

<vega-form>
    <vega-input-credit-card
      data-vega-form="creditCard1"
      value="4111 1111 1111 1111"
      hide-card-number-on-blur = "true"
    />
    <vega-input-credit-card
      data-vega-form="creditCard2"
      value="5555 5555 5555 4444"
    />
    <vega-input-credit-card
      data-vega-form="creditCard3"
      value="6011 1111 1111 1117"
    />
    <vega-input-credit-card
      data-vega-form="creditCard4"
      value="3782 822463 10006"
    />
</vega-form>

Usage

The Input Credit Card component is a variant on the standard input component, designed to allow credit card information. Initially the image will be a generic placeholder until the user inputs a credit card number. It should then automatically prepopulate the correct credit card brand image, identifiable by the card number input.

Properties

Name Description Default
label The label of input credit card
text		 -
value The preset value for a input credit card
string
required Indicates whether the vega-input-credit-card is required.
boolean		 false
auto-validation Indicates whether to automatically validate the user’s input. true
validation-rules Custom validation rules you would like to attach to the input credit card
Array<{canEvaluate: (input: string, status: FormFieldStatusMeta, statusChanged: (keyof FormFieldStatusMeta)[]) => boolean, shouldShowError: (status: FormFieldStatusMeta, statusChanged: (keyof FormFieldStatusMeta)[]) => boolean, evaluate: (input: string) => EvaluateResult}>
placeholder A placeholder string indicating the input credit card format
string
disabled Indicating if the input credit card field is disabled.
boolean		 false
hint A prompt message to supplement the expected value of the input credit card field.
string
size The size of the input credit card field.
default small		 default
hide-card-number-on-blur Sets the card number to be X except the last part of the mask on blur for supported card types
boolean		 true

All Properties

<vega-form>
    <vega-input-credit-card
        data-vega-form="creditCard"
        label="credit-card-label"
        value="credit-card-value"
        required="true"
        auto-validation="true"
        validation-rules=object
        placeholder=""
        disabled=false
        hint=""
        size="default"
        hide-card-number-on-blur='true'
    >
    </vega-input-credit-card>
</vega-form>

validationRules Property

Note: If you wish to use the ValidationRules property, place the component into vega-form and set the data-vega-form property for the component.

Setting the validationRules property with element.setAttribute('validationRules', {...}) will not properly trigger validation. We recommend that you set it by using element.validationRules = {...}.

The following preset validation rules are controlled by their corresponding boolean properties:

  • default validation rule: the default validation rule to validate if it is a valid credit card number(No need to config).
  • required: the input value cannot be empty string ''.

Events

vegaChange

  • Dispatched when the value of vega-input-credit-card is changed.

React

<VegaInputCreditCard onVegaChange={ (e) => { console.log(e.currentTarget.value) } } ... ></VegaInputCreditCard>

Vue.js

<vega-input-credit-card @vegachange="method" ...></vega-input-credit-card>

JavaScript

document.getElementById("credit_card_id").addEventListener("vegaChange", (e) => {
console.log(e.currentTarget.value) })

vegaValidate

  • Dispatched when the validation fresult of vega-input-credit-card is changed.

React

<VegaInputCreditCard onVegaValidate={ (e) => { console.log(e.currentTarget.isValid) } } ... ></VegaInputCreditCard>

Vue.js

<vega-input-credit-card @vegavalidate="method" ...></vega-input-credit-card>

JavaScript

document.getElementById("credit_card_id").addEventListener("vegaValidate", (e) => {
console.log(e.currentTarget.isValid) })

vegaBlur

  • Dispatched when vega-input-credit-card loses focus.

React

<!-- React -->
<VegaInputCreditCard onVegaBlur={ (e) => { console.log(e.currentTarget.value) } } ... ></VegaInputCreditCard>

Vue.js

<vega-input-credit-card @vegablur="method" ...></vega-input-credit-card>

JavaScript

document.getElementById("credit_card_id").addEventListener("vegaBlur", (e) => {
console.log(e.currentTarget.value) })

vegaFocus

  • Dispatched when vega-input-credit-card is focused.

React

<VegaInputCreditCard onVegaFocus={ (e) => { console.log(e.currentTarget.value) } } ... ></VegaInputCreditCard>

Vue.js

<vega-input-credit-card @vegafocus="method" ...></vega-input-credit-card>

JavaScript

document.getElementById("credit_card_id").addEventListener("vegaFocus", (e) => {
console.log(e.currentTarget.value) })

Accessibility

  • Elements must only use allowed ARIA attributes
  • ARIA attributes must conform to valid values
  • ARIA attributes must conform to valid names
  • autocomplete attribute must be used correctly
  • Inline text spacing must be adjustable with custom stylesheets
  • Elements must have sufficient color contrast
  • id attribute value must be unique
  • Form field must not have multiple label elements
  • Form elements must have labels