react-fancy-visa-card
Version:
React js implementation for visa credit card - Payment Form
218 lines (171 loc) • 8.37 kB
JavaScript
import React from "react";
import "./styles/index.css";
import VisaCardLogo from "./svg/CreditCardVisaLogo.svg";
import _ from "lodash";
class VisaCreditCard extends React.Component {
constructor(props) {
super(props);
this.state = {
creditCardNumber: "",
creditCardHolderName: "",
creditCardExpMonth: "",
creditCardExpYear: "",
creditCardCvv: "",
creditCardYearRangeArr: [],
shouldFlipCreditCardOnCvv: false,
//Props
frontCardColor: props.frontCardColor || "",
backCardColor: props.backCardColor || "",
submitBtnColor: props.submitBtnColor || "",
submitBtnTxt : props.submitBtnTxt || "",
};
//event handlers
this.cardNumberOnChange = this.cardNumberOnChange.bind(this);
this.cardHolderNameOnChange = this.cardHolderNameOnChange.bind(this);
this.monthOnChange = this.monthOnChange.bind(this);
this.yearOnChange = this.yearOnChange.bind(this);
this.cvvOnChange = this.cvvOnChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit = (eventOfSubmission) => {
eventOfSubmission.stopPropagation();
eventOfSubmission.preventDefault();
let creditCardData = {
creditCardNumber: this.state.creditCardNumber,
creditCardHolderName: this.state.creditCardHolderName,
creditCardExpMonth: this.state.creditCardExpMonth,
creditCardExpYear: this.state.creditCardExpYear,
creditCardCvv: this.state.creditCardCvv,
};
_.invoke(this.props, 'onSubmit', eventOfSubmission, creditCardData);
};
componentWillMount = () => {
this.getExpYearRange();
};
/**
*get Exp Year Range : example: current year is 2018, so it will add 10 years as a range [2018,....,2028]
*/
getExpYearRange = () => {
let currentYear = new Date().getUTCFullYear();
let yearRangeArr = [];
yearRangeArr.push(currentYear);
for (let i = 1; i <= 10; i++) {
yearRangeArr[i] = currentYear + i;
}
this.setState({
creditCardYearRangeArr: yearRangeArr,
});
};
cardNumberOnChange = (eventCreditCardNumberChangeEvent) => {
let creditCardNumber = eventCreditCardNumberChangeEvent.target.value || "";
this.setState({creditCardNumber});
};
cardHolderNameOnChange = (eventCreditCardHolderNameChangeEvent) => {
let creditCardHolderName = eventCreditCardHolderNameChangeEvent.target.value || "";
this.setState({creditCardHolderName});
};
monthOnChange = (eventCreditCardMonthChangeEvent) => {
let creditCardExpMonth = eventCreditCardMonthChangeEvent.target.value || "";
this.setState({creditCardExpMonth});
};
yearOnChange = (eventCreditCardYearChangeEvent) => {
let creditCardExpYear = eventCreditCardYearChangeEvent.target.value || "";
this.setState({creditCardExpYear});
};
cvvOnChange = (eventCreditCardCvvChangeEvent) => {
let creditCardCvv = eventCreditCardCvvChangeEvent.target.value || "";
let shouldFlipCreditCardOnCvv = true;
this.setState({creditCardCvv, shouldFlipCreditCardOnCvv});
};
cvvOnBlur = (eventCreditCardCvvBlurEvent) => {
let shouldFlipCreditCardOnCvv = false;
this.setState({shouldFlipCreditCardOnCvv});
};
render() {
return (
<div className="checkout react-fancy-visa-card">
<div className={this.state.shouldFlipCreditCardOnCvv ? "credit-card-box hover" : "credit-card-box" }>
<div className="flip">
<div className="front" style={{background: this.state.frontCardColor}}>
<div className="chip"></div>
<div className="logo">
<VisaCardLogo />
</div>
<div className="number">
{this.state.creditCardNumber.replace(/(\d{4})/g, '$1 ').replace(/(^\s+|\s+$)/, '')}
</div>
<div className="card-holder">
<label>Card holder</label>
<div>
{this.state.creditCardHolderName}
</div>
</div>
<div className="card-expiration-date">
<label>Expires</label>
<div>
{this.state.creditCardExpMonth}/{this.state.creditCardExpYear.slice(-2)}
</div>
</div>
</div>
<div className="back" style={{background: this.state.backCardColor}}>
<div className="strip"></div>
<div className="logo">
<VisaCardLogo/>
</div>
<div className="ccv">
<label>CCV</label>
<div>
{this.state.creditCardCvv}
</div>
</div>
</div>
</div>
</div>
<form className="form" autoComplete="off" noValidate onSubmitCapture={this.handleSubmit}>
<fieldset>
<label htmlFor="card-number">Card Number</label>
<input onChange={this.cardNumberOnChange} type="text" id="card-number" className="input-cart-number" maxLength="16"/>
</fieldset>
<fieldset>
<label htmlFor="card-holder">Card holder</label>
<input onChange={this.cardHolderNameOnChange} type="text" id="card-holder"/>
</fieldset>
<fieldset className="fieldset-expiration">
<label className="expiration" htmlFor="card-expiration-month">Expiration Month / Year</label>
<div className="select">
<select onChange={this.monthOnChange} id="card-expiration-month">
<option></option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</div>
<div className="select">
<select onChange={this.yearOnChange} id="card-expiration-year">
<option key={0}></option>
{this.state.creditCardYearRangeArr.map((year, index) => {
return (<option key={index}>{year}</option>);
})}
</select>
</div>
</fieldset>
<fieldset className="fieldset-ccv">
<label htmlFor="card-ccv">CCV</label>
<input onChange={this.cvvOnChange} onBlur={this.cvvOnBlur} type="text" id="card-ccv" maxLength="3"/>
</fieldset>
<button className="btn" style={{background: this.state.submitBtnColor}}><i className="fa fa-lock"></i>{(this.state.submitBtnTxt!=="") ? this.state.submitBtnTxt : 'Pay now'}</button>
</form>
</div>
);
}
}
export {VisaCreditCard};