react-creditcard
Version:
An awesome react credit card component.
248 lines (202 loc) • 9.11 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Card = undefined;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _payment = require('payment');
var _payment2 = _interopRequireDefault(_payment);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _padEnd = require('lodash/padEnd');
var _padEnd2 = _interopRequireDefault(_padEnd);
var _times = require('lodash/times');
var _times2 = _interopRequireDefault(_times);
var _cardImages = require('./card-images');
var _cardImages2 = _interopRequireDefault(_cardImages);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var cardType = _payment2.default.fns.cardType;
var Card = exports.Card = function (_Component) {
_inherits(Card, _Component);
function Card() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, Card);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Card.__proto__ || Object.getPrototypeOf(Card)).call.apply(_ref, [this].concat(args))), _this), _this.state = { type: 'unknown', length: 16 }, _this.componentDidMount = function () {
_this.updateType(_this.props);
}, _this.componentWillReceiveProps = function (nextProps) {
_this.updateType(nextProps);
}, _this.displayClassName = function (base) {
var focused = _this.props.focused;
var classNames = ['react-credit-card__' + base, 'react-credit-card__display'];
if (focused === base) {
classNames = [].concat(_toConsumableArray(classNames), ['react-credit-card--focused']);
}
return classNames.join(' ');
}, _this.formatCVC = function (cvc) {
var type = _this.state.type;
if (type === 'amex') {
return (0, _padEnd2.default)(cvc, 4, '•');
}
return (0, _padEnd2.default)(cvc, 3, '•');
}, _this.formatExpiry = function (expiry) {
var formattedExpiry = expiry;
if (!formattedExpiry) {
return '••/••';
}
var maxLength = 6;
if (formattedExpiry.match(/\//)) {
formattedExpiry = formattedExpiry.replace('/', '');
}
if (!formattedExpiry.match(/^[0-9]*$/)) {
return '••/••';
}
formattedExpiry = (0, _padEnd2.default)(formattedExpiry, 4, '•');
formattedExpiry = expiry.slice(0, 2) + '/' + expiry.slice(2, maxLength);
return formattedExpiry;
}, _this.formatName = function (name) {
var namePlaceholder = _this.props.namePlaceholder;
if (namePlaceholder && !name) {
return namePlaceholder;
}
return name;
}, _this.formatNumber = function (number) {
var _this$state = _this.state,
maxLength = _this$state.length,
type = _this$state.type;
var formattedNumber = number;
if (number && number.length > maxLength) {
formattedNumber = number.slice(0, maxLength);
}
formattedNumber = (0, _padEnd2.default)(formattedNumber, maxLength, '•');
if (type === 'amex') {
formattedNumber = formattedNumber.substring(0, 4) + ' ' + formattedNumber.substring(4, 10) + ' ' + formattedNumber.substring(10);
} else {
var amountOfSpaces = Math.ceil(maxLength / 4);
(0, _times2.default)(amountOfSpaces, function (i) {
var spaceIndex = i * 4 + i;
formattedNumber = formattedNumber.slice(0, spaceIndex) + ' ' + formattedNumber.slice(spaceIndex);
});
}
return formattedNumber;
}, _this.updateType = function (props) {
var type = props.type || cardType(props.number);
if (!props.number) {
_this.setState({ type: 'unknown' });
}
if (type) {
if (type === 'amex') {
return _this.setState({ type: type, length: 15 });
}
return _this.setState({ type: type, length: 16 });
}
return _this.setState({ type: 'unknown', length: 16 });
}, _this.render = function () {
var _this$props = _this.props,
hideName = _this$props.hideName,
backDescriptionText = _this$props.backDescriptionText,
expiry = _this$props.expiry,
expiryBeforeText = _this$props.expiryBeforeText,
expiryAfterText = _this$props.expiryAfterText,
focused = _this$props.focused,
cvc = _this$props.cvc,
name = _this$props.name,
number = _this$props.number;
var type = _this.state.type;
var isAmex = type === 'amex';
return _react2.default.createElement(
'div',
{ className: 'react-credit-card__container' },
_react2.default.createElement(
'div',
{ className: (0, _classnames2.default)('react-credit-card', type ? 'react-credit-card--' + type : '', focused === 'cvc' && !isAmex ? 'react-credit-card--flipped' : '') },
_react2.default.createElement(
'div',
{ className: 'react-credit-card__front' },
_react2.default.createElement(
'div',
{ className: 'react-credit-card__lower' },
_react2.default.createElement('div', { className: 'react-credit-card__shiny' }),
_react2.default.createElement('img', {
src: _cardImages2.default[type],
className: (0, _classnames2.default)('react-credit-card__logo', 'react-credit-card--' + type)
}),
isAmex && _react2.default.createElement(
'div',
{ className: _this.displayClassName('cvc_front') },
_this.formatCVC(cvc)
),
_react2.default.createElement(
'div',
{ className: _this.displayClassName('number') },
_this.formatNumber(number)
),
!hideName && _react2.default.createElement(
'div',
{ className: _this.displayClassName('name') },
_this.formatName(name)
),
_react2.default.createElement(
'div',
{
className: _this.displayClassName('expiry'),
'data-before': expiryBeforeText,
'data-after': expiryAfterText
},
_this.formatExpiry(expiry)
)
)
),
_react2.default.createElement(
'div',
{ className: 'react-credit-card__back' },
_react2.default.createElement('div', { className: 'react-credit-card__bar' }),
_react2.default.createElement(
'div',
{ className: _this.displayClassName('cvc') },
_this.formatCVC(cvc)
),
_react2.default.createElement('div', { className: 'react-credit-card__shiny', 'data-after': backDescriptionText })
)
)
);
}, _temp), _possibleConstructorReturn(_this, _ret);
}
return Card;
}(_react.Component);
Card.propTypes = {
hideName: _propTypes2.default.bool,
number: _propTypes2.default.string,
cvc: _propTypes2.default.string,
name: _propTypes2.default.string,
expiry: _propTypes2.default.string,
focused: _propTypes2.default.string,
namePlaceholder: _propTypes2.default.string,
expiryBeforeText: _propTypes2.default.string,
expiryAfterText: _propTypes2.default.string,
backDescriptionText: _propTypes2.default.string
};
Card.defaultProps = {
hideName: false,
number: null,
cvc: null,
name: null,
expiry: null,
focused: null,
namePlaceholder: 'FULL NAME',
expiryBeforeText: 'month/year',
expiryAfterText: 'valid thru',
backDescriptionText: null,
type: null
};
exports.default = Card;