0.0.43 • Published 6 years ago
react-credit-card-kit v0.0.43
React Credit Card Kit
A credit/debit card kit for React , based on react-credit-card-input
Support swipe card
Example
Click here for an interactive demo
Install
$ npm install --save react-credit-card-kit
Usage
One line
import CreditCardInput from 'react-credit-card-kit';
...
<CreditCardInput
cardNumberInputProps={{ value: cardNumber, onChange: this.handleCardNumberChange }}
cardExpiryInputProps={{ value: expiry, onChange: this.handleCardExpiryChange }}
cardCVCInputProps={{ value: cvc, onChange: this.handleCardCVCChange }}
fieldClassName="input"
/>
Full Form
import CreditCardFullForm from 'react-credit-card-kit';
...
<CreditCardForm
...
afterValidateCard={(formIsValid) => {}}
/>
Form and Pay via Email
import CreditCardFormNPayViaEmail from 'react-credit-card-kit';
...
<CreditCardFormNPayViaEmail
containerClassName="paypal-by"
controlClassName="checkpaypal-by"
enableZipInput={false}
/>
Available props
Input renderer props
Custom input renderer usage
Only for type CreditCardInput
<CreditCardInput
cardCVCInputRenderer={({ handleCardCVCChange, props }) => (
<input
{...props}
onChange={handleCardCVCChange(e => console.log('cvc change', e))}
/>
)}
cardExpiryInputRenderer={({ handleCardExpiryChange, props }) => (
<input
{...props}
onChange={handleCardExpiryChange(e =>
console.log('expiry change', e)
)}
/>
)}
cardNumberInputRenderer={({ handleCardNumberChange, props }) => (
<input
{...props}
onChange={handleCardNumberChange(e =>
console.log('number change', e)
)}
/>
)}
/>
Cheers :)
0.0.43
6 years ago
0.0.42
6 years ago
0.0.41
6 years ago
0.0.40
6 years ago
0.0.39
6 years ago
0.0.38
6 years ago
0.0.37
6 years ago
0.0.36
6 years ago
0.0.35
6 years ago
0.0.34
6 years ago
0.0.33
6 years ago
0.0.32
6 years ago
0.0.31
6 years ago
0.0.30
6 years ago
0.0.29
6 years ago
0.0.28
6 years ago
0.0.27
6 years ago
0.0.26
6 years ago
0.0.25
6 years ago
0.0.24
6 years ago
0.0.23
6 years ago
0.0.22
6 years ago
0.0.21
6 years ago
0.0.20
6 years ago
0.0.19
6 years ago
0.0.18
6 years ago
0.0.17
6 years ago
0.0.16
6 years ago
0.0.15
6 years ago
0.0.14
6 years ago
0.0.12
6 years ago
0.0.11
6 years ago
0.0.10
6 years ago
0.0.9
6 years ago
0.0.8
6 years ago
0.0.7
6 years ago
0.0.6
6 years ago
0.0.5
6 years ago
0.0.4
6 years ago
0.0.3
6 years ago
0.0.2
6 years ago
0.0.1
6 years ago