1.0.0-alpha.2 • Published 3 years ago

@talixo/credit-card v1.0.0-alpha.2

Weekly downloads
8
License
MIT
Repository
github
Last release
3 years ago

Talixo Credit Card

UI Component which represents Credit Card

How to install

Package is available as @talixo/credit-card in NPM registry, so you can use it in your project using npm install @talixo/credit-card --save or yarn add @talixo/credit-card.

Requirements

Your package should additionally have some extra dependencies:

  • @talixo/combo-box: ^0.1.0
  • @talixo/form-field: ^0.0.0
  • @talixo/form-handler: ^0.0.0
  • @talixo/icon: ^0.1.1
  • @talixo/shared: ^0.1.0
  • @talixo/text-input: ^0.2.0
  • prop-types: ^15.6.1
  • react: ^16.2.0
  • react-dom: ^16.2.0
  • react-text-mask: 5.4.1

These packages are required by @talixo/credit-card, but you have to install them manually, to avoid having different versions of these in your application.

Supported props

CreditCardInput

Property nameTypeDefaultDescription
cardHolderNameLabelstring'Name on card*'Label for card holder name input.
cardNumberLabelstring'Card number*'Label for card number input.
cardExpirationDateLabelstring'Expiration date*'Label for card expiration date input.
classNamestringn/aAdditional class name passed to wrapper.
cvcLabelstring'CVC*'Label for cvc input.
headernode'Payment'Form header.
onBlurfunctionn/aHandler for onBlur event.
onChangefunctionn/aHandler for onChange event.
onFocusfunctionn/aHandler for onFocus event.
valuesValuesShape''|nullValues to be displayed inside inputs.

CreditCardNumberInput

Property nameTypeDefaultDescription
classNamestringn/aAdditional class name passed to wrapper.
onBlurfunctionn/aHandler for onBlur event.
onChangefunctionn/aHandler for onChange event.
onFocusfunctionn/aHandler for onFocus event.
valuestringn/aValue to be displayed inside inputs.

ExpirationDateInput

Property nameTypeDefaultDescription
classNamestringn/aAdditional class name passed to wrapper.
onChangefunctionn/aHandler for onChange event.
valueExpirationShapen/aValue to be displayed inside inputs.

Property shapes

ValuesShape

Property nameTypeDefaultDescription
cardHolderNamestringn/aValue to be displayed in the card holder name input.
cardNumberstringn/aValue to be displayed in the card number input.
cardExpirationDateExpirationShapen/aDate to be displayed in the expiration date input.
cvcstringn/aValue to be displayed in the cvc input.

ExpirationShape

Property nameTypeDefaultDescription
monthnumbern/aMonth to be displayed in the month input.
yearnumbern/aYear to be displayed in the year input.

Changelog

  • 0.1.0 - initial version
1.0.0-alpha.35

3 years ago

1.0.0-alpha.31

3 years ago

1.0.0-alpha.30

3 years ago

1.0.0-alpha.27

3 years ago

1.0.0-alpha.24

3 years ago

1.0.0-alpha.20

4 years ago

1.0.0-alpha.19

4 years ago

1.0.0-alpha.17

4 years ago

1.0.0-alpha.16

4 years ago

1.0.0-alpha.12

4 years ago

1.0.0-alpha.7

4 years ago

1.0.0-alpha.6

4 years ago

1.0.0-alpha.5

4 years ago

1.0.0-alpha.4

4 years ago

1.0.0-alpha.3

4 years ago

1.0.0-alpha.2

4 years ago