ReactCardPayment

Awesome credit card payment form

Vuejs version

Installation

npm install --save react-card-payment

Usage

with Webpack or Rollup

import ReactCardPayment from 'react-card-payment';

then, place this one in a place you want payment form to appear

  <ReactCardPayment/>

Properties

Labels

Prop	Data type	Default
labelCardnumber	string	Card number
labelMonth	string	Month
labelYear	string	Year
labelCardHolder	string	Cardholder name
button	string	Pay

Placeholders

Prop	Data type	Default
placeholderCardnumber	string	0000 0000 0000 0000
placeholderMonth	string	00
placeholderYear	string	00
placeholderCardHolder	string	JOHN DOE
placeholderCvv	string	000

Events

Event	Description
onSubmit	fires when form is submitted

Example with settings

  <ReactCardPayment {...{
    labelCardNumber: "Card number",
    labelMonth: "Month",
    labelYear: "Year",
    labelCardHolder: "Cardholder name",
    button: "Pay",
 
    placeholderCardnumber: "0000 0000 0000 0000",
    placeholderMonth: "00",
    placeholderYear: "00",
    placeholderCardHolder: "JOHN DOE",
    placeholderCvv: "000"
  }} onSubmit={alert('it was submitted')}/>

Thanks

iserdmi for card-info plugin, this plugin is primary-based on it braintree for card-validator plugin, this one used here for validation needs

License

MIT