react-credit-card-kit
Version:
A credit/debit card input / form field for React
1,180 lines (999 loc) • 106 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('payment'), require('credit-card-type'), require('is-valid-zip'), require('styled-components'), require('babel-polyfill')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'payment', 'credit-card-type', 'is-valid-zip', 'styled-components', 'babel-polyfill'], factory) :
(factory((global.CreditCardInput = {}),global.React,global.payment,global.creditCardType,global.isValidZip,global.styled));
}(this, (function (exports,React,payment,creditCardType,isValidZip,styled) { 'use strict';
var React__default = 'default' in React ? React['default'] : React;
payment = payment && payment.hasOwnProperty('default') ? payment['default'] : payment;
creditCardType = creditCardType && creditCardType.hasOwnProperty('default') ? creditCardType['default'] : creditCardType;
isValidZip = isValidZip && isValidZip.hasOwnProperty('default') ? isValidZip['default'] : isValidZip;
styled = styled && styled.hasOwnProperty('default') ? styled['default'] : styled;
var DEFAULT_CVC_LENGTH = 3;
var DEFAULT_ZIP_LENGTH = 5;
var DEFAULT_CARD_FORMAT = /(\d{1,4})/g;
var CARD_TYPES = [{
type: 'amex',
format: /(\d{1,4})(\d{1,6})?(\d{1,5})?/,
startPattern: /^3[47]/,
maxCardNumberLength: 15,
cvcLength: 4
}, {
type: 'dankort',
format: DEFAULT_CARD_FORMAT,
startPattern: /^5019/,
maxCardNumberLength: 16,
cvcLength: DEFAULT_CVC_LENGTH
}, {
type: 'hipercard',
format: DEFAULT_CARD_FORMAT,
startPattern: /^(384100|384140|384160|606282|637095|637568|60(?!11))/,
maxCardNumberLength: 19,
cvcLength: DEFAULT_CVC_LENGTH
}, {
type: 'dinersclub',
format: DEFAULT_CARD_FORMAT,
startPattern: /^(36|38|30[0-5])/,
maxCardNumberLength: 14,
cvcLength: DEFAULT_CVC_LENGTH
}, {
type: 'discover',
format: DEFAULT_CARD_FORMAT,
startPattern: /^(6011|65|64[4-9]|622)/,
maxCardNumberLength: 16,
cvcLength: DEFAULT_CVC_LENGTH
}, {
type: 'jcb',
format: DEFAULT_CARD_FORMAT,
startPattern: /^35/,
maxCardNumberLength: 16,
cvcLength: DEFAULT_CVC_LENGTH
}, {
type: 'laser',
format: DEFAULT_CARD_FORMAT,
startPattern: /^(6706|6771|6709)/,
maxCardNumberLength: 19,
cvcLength: DEFAULT_CVC_LENGTH
}, {
type: 'maestro',
format: DEFAULT_CARD_FORMAT,
startPattern: /^(5018|5020|5038|6304|6703|6708|6759|676[1-3])/,
maxCardNumberLength: 19,
cvcLength: DEFAULT_CVC_LENGTH
}, {
type: 'mastercard',
format: DEFAULT_CARD_FORMAT,
startPattern: /^(5[1-5]|677189)|^(222[1-9]|2[3-6]\d{2}|27[0-1]\d|2720)/,
maxCardNumberLength: 16,
cvcLength: DEFAULT_CVC_LENGTH
}, {
type: 'unionpay',
format: DEFAULT_CARD_FORMAT,
startPattern: /^62/,
maxCardNumberLength: 19,
cvcLength: DEFAULT_CVC_LENGTH,
luhn: false
}, {
type: 'visaelectron',
format: DEFAULT_CARD_FORMAT,
startPattern: /^4(026|17500|405|508|844|91[37])/,
maxCardNumberLength: 16,
cvcLength: DEFAULT_CVC_LENGTH
}, {
type: 'elo',
format: DEFAULT_CARD_FORMAT,
startPattern: /^(4011(78|79)|43(1274|8935)|45(1416|7393|763(1|2))|50(4175|6699|67[0-7][0-9]|9000)|627780|63(6297|6368)|650(03([^4])|04([0-9])|05(0|1)|4(0[5-9]|3[0-9]|8[5-9]|9[0-9])|5([0-2][0-9]|3[0-8])|9([2-6][0-9]|7[0-8])|541|700|720|901)|651652|655000|655021)/,
maxCardNumberLength: 16,
cvcLength: DEFAULT_CVC_LENGTH
}, {
type: 'visa',
format: DEFAULT_CARD_FORMAT,
startPattern: /^4/,
maxCardNumberLength: 19,
cvcLength: DEFAULT_CVC_LENGTH
}];
var getCardTypeByValue = function getCardTypeByValue(value) {
return CARD_TYPES.filter(function (cardType) {
return cardType.startPattern.test(value);
})[0];
};
var getCardTypeByType = function getCardTypeByType(type) {
return CARD_TYPES.filter(function (cardType) {
return cardType.type === type;
})[0];
};
var hasCardNumberReachedMaxLength = function hasCardNumberReachedMaxLength(currentValue, currentValueLength) {
var cardType = getCardTypeByValue(currentValue);
return cardType && currentValueLength >= cardType.maxCardNumberLength;
};
var hasCVCReachedMaxLength = function hasCVCReachedMaxLength(type, currentValueLength) {
var cardType = getCardTypeByType(type);
if (!cardType) {
return currentValueLength >= DEFAULT_CVC_LENGTH;
}
return currentValueLength >= cardType.cvcLength;
};
var hasZipReachedMaxLength = function hasZipReachedMaxLength(type, currentValueLength) {
return currentValueLength >= DEFAULT_ZIP_LENGTH;
};
var formatCardNumber = function formatCardNumber(cardNumber) {
var cardType = getCardTypeByValue(cardNumber);
if (!cardType) return cardNumber;
var format = cardType.format;
if (format.global) {
return cardNumber.match(format).join(' ');
}
var execResult = format.exec(cardNumber.split(' ').join(''));
if (execResult) {
return execResult.splice(1, 3).filter(function (x) {
return x;
}).join(' ');
}
return cardNumber;
};
var formatExpiry = function formatExpiry(prevExpiry) {
if (!prevExpiry) return null;
var expiry = prevExpiry;
if (/^[2-9]$/.test(expiry)) {
expiry = '0' + expiry;
}
expiry = expiry.match(/(\d{1,2})/g);
if (expiry.length === 1) {
if (prevExpiry.includes('/')) {
return expiry[0];
}
if (/\d{2}/.test(expiry)) {
return expiry[0] + ' / ';
}
}
return expiry.join(' / ');
};
var isHighlighted = function isHighlighted() {
return window.getSelection().type === 'Range';
};
var images = {
placeholder: 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTc2IDM3NyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5wbGFjZWhvbGRlcjwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9InBsYWNlaG9sZGVyIj4gICAgICAgICAgICA8cGF0aCBkPSJNNTI3LjkzMzc5MywzNzYuOTk4MjggTDQ4LjA2NjIwNjksMzc2Ljk5ODI4IEMzNS40MjM0ODAzLDM3Ny4xMDM5NjggMjMuMjU2NTg2NCwzNzIuMTg3ODkgMTQuMjQyMzI4MSwzNjMuMzMxNjE4IEM1LjIyODA2OTc1LDM1NC40NzUzNDYgMC4xMDQ5MTcxMDIsMzQyLjQwNDQwNyAwLDMyOS43NzQ0OTQgTDAsNDcuMjI1NDU1NCBDMC4xMDQ5MTcxMDIsMzQuNTk1NTQyNSA1LjIyODA2OTc1LDIyLjUyNDYwNCAxNC4yNDIzMjgxLDEzLjY2ODMzMTkgQzIzLjI1NjU4NjQsNC44MTIwNTk4NSAzNS40MjM0ODAzLC0wLjEwNDAxODI5NiA0OC4wNjYyMDY5LDAuMDAxNjY5NDg2NDYgTDUyNy45MzM3OTMsMC4wMDE2Njk0ODY0NiBDNTQwLjU3NjUyLC0wLjEwNDAxODI5NiA1NTIuNzQzNDE0LDQuODEyMDU5ODUgNTYxLjc1NzY3MiwxMy42NjgzMzE5IEM1NzAuNzcxOTMsMjIuNTI0NjA0IDU3NS44OTUwODMsMzQuNTk1NTQyNSA1NzYsNDcuMjI1NDU1NCBMNTc2LDMyOS45NzI5MTMgQzU3NS42NzI3ODYsMzU2LjE5NTY2MyA1NTQuMTg0MjczLDM3Ny4yMTg4NTcgNTI3LjkzMzc5MywzNzYuOTk4MjggWiIgaWQ9InNoYXBlIiBmaWxsPSIjRThFQkVFIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiM3NTc1NzUiIHN0cm9rZS13aWR0aD0iMjAiIHg9IjQxOCIgeT0iNTgiIHdpZHRoPSI5MSIgaGVpZ2h0PSI2MyIgcng9IjMwIj48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiBmaWxsPSIjNzU3NTc1IiB4PSI1MyIgeT0iMjA4IiB3aWR0aD0iMTA3IiBoZWlnaHQ9IjQwIiByeD0iOCI+PC9yZWN0PiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgZmlsbD0iIzc1NzU3NSIgeD0iNDEzIiB5PSIyMDgiIHdpZHRoPSIxMDciIGhlaWdodD0iNDAiIHJ4PSI4Ij48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiBmaWxsPSIjNzU3NTc1IiB4PSIyOTMiIHk9IjIwOCIgd2lkdGg9IjEwNyIgaGVpZ2h0PSI0MCIgcng9IjgiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIGZpbGw9IiM3NTc1NzUiIHg9IjE3MyIgeT0iMjA4IiB3aWR0aD0iMTA3IiBoZWlnaHQ9IjQwIiByeD0iOCI+PC9yZWN0PiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+',
visa: 'data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAyMSI+ICA8ZyBpZD0iUGFnZS0xIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICA8ZyBpZD0idmlzYSI+ICAgICAgPGcgaWQ9ImNhcmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMikiPiAgICAgICAgPHBhdGggaWQ9InNoYXBlIiBmaWxsPSIjRjZGOUZDIiBkPSJNMjYuNTggMTlIMi40MkEyLjQgMi40IDAgMCAxIDAgMTYuNjJWMi4zOEEyLjQgMi40IDAgMCAxIDIuNDIgMGgyNC4xNkEyLjQgMi40IDAgMCAxIDI5IDIuMzh2MTQuMjVBMi40IDIuNCAwIDAgMSAyNi41OCAxOXoiLz4gICAgICAgIDxwYXRoIGlkPSJzaGFwZSIgZmlsbD0iI0Y5OUYxQiIgZD0iTTAgMTZ2LjYzQTIuNCAyLjQgMCAwIDAgMi40MiAxOWgyNC4xNkEyLjQgMi40IDAgMCAwIDI5IDE2LjYyVjE2SDB6Ii8+ICAgICAgICA8cGF0aCBpZD0ic2hhcGUiIGZpbGw9IiMyRDQ5OTAiIGQ9Ik0wIDN2LS42M0EyLjQgMi40IDAgMCAxIDIuNDIgMGgyNC4xNkEyLjQgMi40IDAgMCAxIDI5IDIuMzhWM0gwem0xMy45IDMuMTJsLTEuNDggNi43N2gtMS43N2wxLjQ2LTYuNzdoMS43OHptNy40NyA0LjM4bC45NC0yLjU1LjU0IDIuNTVoLTEuNDh6bTEuOTkgMi40SDI1bC0xLjQ0LTYuNzhoLTEuNTFhLjguOCAwIDAgMC0uNzYuNWwtMi42NyA2LjI3aDEuODdsLjM3LTFoMi4yOGwuMjIgMXptLTQuNjQtMi4yMmMwLTEuNzgtMi41MS0xLjg4LTIuNS0yLjY4LjAxLS4yNC4yNS0uNS43Ni0uNTdhMy40IDMuNCAwIDAgMSAxLjc1LjNsLjMxLTEuNDNjLS40Mi0uMTUtLjk3LS4zLTEuNjYtLjMtMS43NiAwLTMgLjkyLTMgMi4yNC0uMDEuOTcuODggMS41MiAxLjU1IDEuODQuNy4zMy45My41NS45My44NC0uMDEuNDYtLjU2LjY2LTEuMDcuNjYtLjkuMDItMS40MS0uMjMtMS44Mi0uNDJsLS4zMyAxLjQ4Yy40Mi4xOSAxLjE5LjM1IDEuOTguMzYgMS44NyAwIDMuMDktLjkgMy4xLTIuMzJ6bS03LjM3LTQuNTZMOC40NyAxMi45SDYuNkw1LjE4IDcuNWMtLjA5LS4zMy0uMTctLjQ1LS40My0uNkE3LjUzIDcuNTMgMCAwIDAgMyA2LjMzbC4wNC0uMmgzLjAzYy4zOCAwIC43My4yNi44Mi43bC43NSAzLjkxIDEuODUtNC42aDEuODZ6Ii8+ICAgICAgPC9nPiAgICA8L2c+ICA8L2c+PC9zdmc+',
mastercard: 'data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAyMSI+ICA8ZyBpZD0iUGFnZS0xIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICA8ZyBpZD0ibWFzdGVyY2FyZCI+ICAgICAgPGcgaWQ9ImNhcmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMikiPiAgICAgICAgPHBhdGggaWQ9InNoYXBlIiBmaWxsPSIjMDAzNjYzIiBkPSJNMjYuNTggMTlIMi40MkEyLjQgMi40IDAgMCAxIDAgMTYuNjJWMi4zOEEyLjQgMi40IDAgMCAxIDIuNDIgMGgyNC4xNkEyLjQgMi40IDAgMCAxIDI5IDIuMzh2MTQuMjVBMi40IDIuNCAwIDAgMSAyNi41OCAxOXoiLz4gICAgICAgIDxjaXJjbGUgaWQ9InNoYXBlIiBjeD0iMTAuNSIgY3k9IjkuNSIgcj0iNi41IiBmaWxsPSIjRUIxQzI2Ii8+ICAgICAgICA8Y2lyY2xlIGlkPSJzaGFwZSIgY3g9IjE4LjUiIGN5PSI5LjUiIHI9IjYuNSIgZmlsbD0iI0Y5OUYxQiIvPiAgICAgICAgPHBhdGggaWQ9InNoYXBlIiBmaWxsPSIjRUY1RDIwIiBkPSJNMTQuNSA0LjM4YTYuNDkgNi40OSAwIDAgMCAwIDEwLjI0IDYuNDkgNi40OSAwIDAgMCAwLTEwLjI0eiIvPiAgICAgIDwvZz4gICAgPC9nPiAgPC9nPjwvc3ZnPg==',
amex: 'data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAyMSI+ICA8ZyBpZD0iUGFnZS0xIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICA8ZyBpZD0iYW1leCI+ICAgICAgPGcgaWQ9ImNhcmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xIDIpIj4gICAgICAgIDxwYXRoIGlkPSJzaGFwZSIgZmlsbD0iIzFEOTFDRSIgZD0iTTI3LjU4IDE5SDMuNDJBMi40IDIuNCAwIDAgMSAxIDE2LjYyVjIuMzhBMi40IDIuNCAwIDAgMSAzLjQyIDBoMjQuMTZBMi40IDIuNCAwIDAgMSAzMCAyLjM4djE0LjI1QTIuNCAyLjQgMCAwIDEgMjcuNTggMTl6Ii8+ICAgICAgICA8cG9seWxpbmUgaWQ9InNoYXBlIiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjUuMDYzIDExLjg5NiA0LjU5MSAxMyAuMzYgMTMgMy42OTkgNiAxMS42NzQgNiAxMi40NzkgNy41NDYgMTMuMjMxIDYgMTYuMDY0IDYgMTcuNDkyIDYgMjMuOTgzIDYgMjQuOTAyIDYuOTYxIDI1Ljg4OSA2IDMwLjg4MiA2IDI3LjMzNyA5LjQ5MiAzMC43MjkgMTMgMjUuODk3IDEzIDI0LjgxNiAxMS45NjkgMjMuNzQ0IDEzIDE3LjQ5MiAxMyAxNi4wNjQgMTMgNi40OTYgMTMgNS45NzcgMTEuODk2Ii8+ICAgICAgICA8cGF0aCBpZD0ic2hhcGUiIGZpbGw9IiMxRDkxQ0UiIGQ9Ik01Ljk4IDExLjk3aC0uOTIuOTJ6TTE2LjIgN2gtMi4xbC0xLjU4IDMuMzVMMTAuODIgN2gtMi4xdjQuODVMNi41NSA3SDQuNThsLTIuMzIgNWgxLjQybC40Ny0xLjE0aDIuN0w3LjM5IDEySDEwVjcuOTNMMTEuODUgMTJoMS4yMmwxLjg0LTR2NGgxLjI5Vjd6bTguNjcgMS42MkwyMy4zNyA3aC02LjAydjVIMjMuMTdsMS42NS0xLjY0TDI2LjQ4IDEyaDEuNTVsLTIuMzctMi41M0wyOC4xIDdoLTEuNjJsLTEuNjEgMS42MnpNMjEuNyAxMWgtMy4wNlY5LjloMy4wNlY4LjloLTMuMDZWOGgzLjA2di0uODVsMi4yNyAyLjI3LTIuMjcgMi4yOFYxMXpNNS41MyA3LjgybC44OCAyLjAzSDQuNThsLjk1LTIuMDN6Ii8+ICAgICAgPC9nPiAgICA8L2c+ICA8L2c+PC9zdmc+'
};
var ERROR_TEXT__INVALID_EXPIRY_DATE = 'Please enter a valid expiration date';
var ERROR_TEXT__YEAR_OUT_OF_RANGE = 'Your card is expired';
var EXPIRY_DATE_REGEX = /^(\d{2})\/(\d{4}|\d{2})$/;
var MONTH_REGEX = /(0[1-9]|1[0-2])/;
var isExpiryInvalid = (function (expiryDate) {
var splitDate = expiryDate.split('/');
if (!EXPIRY_DATE_REGEX.test(expiryDate)) {
return ERROR_TEXT__INVALID_EXPIRY_DATE;
}
var expiryMonth = splitDate[0];
if (!MONTH_REGEX.test(expiryMonth)) {
// BA want
return ERROR_TEXT__INVALID_EXPIRY_DATE;
// return ERROR_TEXT__MONTH_OUT_OF_RANGE;
}
var expiryYear = splitDate[1];
var current = new Date();
var currentYear = current.getFullYear();
currentYear = parseInt(expiryYear.length === 4 ? currentYear : currentYear.toString().substr(-2), 10);
var isSameYear = currentYear === parseInt(expiryYear, 10);
if (currentYear > parseInt(expiryYear, 10) || isSameYear && parseInt(expiryMonth, 10) < current.getMonth() + 1) {
return ERROR_TEXT__YEAR_OUT_OF_RANGE;
}
return false;
});
var asyncToGenerator = function (fn) {
return function () {
var gen = fn.apply(this, arguments);
return new Promise(function (resolve, reject) {
function step(key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
return Promise.resolve(value).then(function (value) {
step("next", value);
}, function (err) {
step("throw", err);
});
}
}
return step("next");
});
};
};
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
var defineProperty = function (obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
};
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
var inherits = function (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 possibleConstructorReturn = function (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;
};
var taggedTemplateLiteral = function (strings, raw) {
return Object.freeze(Object.defineProperties(strings, {
raw: {
value: Object.freeze(raw)
}
}));
};
var toConsumableArray = function (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);
}
};
var _templateObject = taggedTemplateLiteral(['\n display: inline-block;\n ', ';\n'], ['\n display: inline-block;\n ', ';\n']);
var _templateObject2 = taggedTemplateLiteral(['\n display: flex;\n align-items: center;\n position: relative;\n background-color: white;\n padding: 10px;\n border-radius: 3px;\n overflow: hidden;\n ', ';\n\n &.is-invalid {\n border: 1px solid #ff3860;\n ', ';\n }\n\n span {\n width: 33%;\n }\n'], ['\n display: flex;\n align-items: center;\n position: relative;\n background-color: white;\n padding: 10px;\n border-radius: 3px;\n overflow: hidden;\n ', ';\n\n &.is-invalid {\n border: 1px solid #ff3860;\n ', ';\n }\n\n span {\n width: 33%;\n }\n']);
var _templateObject3 = taggedTemplateLiteral(['\n display: flex;\n align-items: center;\n position: relative;\n background-color: transparent;\n padding: 0;\n border-radius: 3px;\n overflow: hidden;\n ', ';\n\n &.is-invalid {\n border: 1px solid #ff3860;\n ', ';\n }\n\n span {\n width: 33%;\n }\n'], ['\n display: flex;\n align-items: center;\n position: relative;\n background-color: transparent;\n padding: 0;\n border-radius: 3px;\n overflow: hidden;\n ', ';\n\n &.is-invalid {\n border: 1px solid #ff3860;\n ', ';\n }\n\n span {\n width: 33%;\n }\n']);
var _templateObject4 = taggedTemplateLiteral(['\n padding: 0 10px;\n'], ['\n padding: 0 10px;\n']);
var _templateObject5 = taggedTemplateLiteral(['\n height: 1em;\n ', ';\n'], ['\n height: 1em;\n ', ';\n']);
var _templateObject6 = taggedTemplateLiteral(['\n position: relative;\n margin-left: 0.5em;\n display: flex;\n align-items: center;\n transition: transform 0.5s;\n transform: translateX(\n ', '\n );\n\n &::after {\n content: attr(data-max);\n visibility: hidden;\n height: 0;\n }\n\n & .credit-card-input {\n border: 0px;\n position: absolute;\n width: 100%;\n font-size: 1em;\n ', ';\n\n &:focus {\n outline: 0px;\n }\n }\n\n & .zip-input {\n display: ', ';\n }\n'], ['\n position: relative;\n margin-left: 0.5em;\n display: flex;\n align-items: center;\n transition: transform 0.5s;\n transform: translateX(\n ', '\n );\n\n &::after {\n content: attr(data-max);\n visibility: hidden;\n height: 0;\n }\n\n & .credit-card-input {\n border: 0px;\n position: absolute;\n width: 100%;\n font-size: 1em;\n ', ';\n\n &:focus {\n outline: 0px;\n }\n }\n\n & .zip-input {\n display: ', ';\n }\n']);
var _templateObject7 = taggedTemplateLiteral(['\n position: relative;\n display: block;\n padding: 10px;\n background-color: white;\n width: 67%;\n align-items: center;\n transition: transform 0.5s;\n transform: translateX(\n ', '\n );\n\n &::after {\n content: attr(data-max);\n visibility: hidden;\n height: 0;\n }\n\n & .credit-card-input {\n border: 0px;\n position: absolute;\n width: 94%;\n font-size: 1em;\n ', ';\n\n &:focus {\n outline: 0px;\n }\n }\n\n & .zip-input {\n display: ', ';\n }\n'], ['\n position: relative;\n display: block;\n padding: 10px;\n background-color: white;\n width: 67%;\n align-items: center;\n transition: transform 0.5s;\n transform: translateX(\n ', '\n );\n\n &::after {\n content: attr(data-max);\n visibility: hidden;\n height: 0;\n }\n\n & .credit-card-input {\n border: 0px;\n position: absolute;\n width: 94%;\n font-size: 1em;\n ', ';\n\n &:focus {\n outline: 0px;\n }\n }\n\n & .zip-input {\n display: ', ';\n }\n']);
var _templateObject8 = taggedTemplateLiteral(['\n font-size: 0.8rem;\n margin: 2.5px 10px;\n color: #ff3860;\n ', ';\n'], ['\n font-size: 0.8rem;\n margin: 2.5px 10px;\n color: #ff3860;\n ', ';\n']);
var _templateObject9 = taggedTemplateLiteral(['\n position: relative;\n\n & > input {\n text-align: right;\n }\n\n & #ccNumberdMasked {\n width: 70%;\n border-radius: 0;\n background-color: #ffffff;\n color: #797979;\n border-width: 0 0 1px;\n border-bottom: solid 1px #d9d9d9;\n padding: 0 11px;\n cursor: pointer;\n line-height: 22px;\n padding-top: 1px;\n padding-bottom: 6px;\n padding-left: 0;\n }\n\n & > #ccNumberdUnmasked {\n width: 30%;\n text-align: left;\n border-radius: 0;\n background-color: #ffffff;\n color: #797979;\n border-width: 0 0 1px;\n border-bottom: solid 1px #d9d9d9;\n padding: 0 11px;\n cursor: pointer;\n line-height: 22px;\n padding-top: 1px;\n padding-bottom: 6px;\n padding-left: 0;\n }\n\n & #ccNumber {\n caret-color: transparent;\n position: absolute;\n left: 0;\n opacity: 0;\n width: 100%;\n }\n'], ['\n position: relative;\n\n & > input {\n text-align: right;\n }\n\n & #ccNumberdMasked {\n width: 70%;\n border-radius: 0;\n background-color: #ffffff;\n color: #797979;\n border-width: 0 0 1px;\n border-bottom: solid 1px #d9d9d9;\n padding: 0 11px;\n cursor: pointer;\n line-height: 22px;\n padding-top: 1px;\n padding-bottom: 6px;\n padding-left: 0;\n }\n\n & > #ccNumberdUnmasked {\n width: 30%;\n text-align: left;\n border-radius: 0;\n background-color: #ffffff;\n color: #797979;\n border-width: 0 0 1px;\n border-bottom: solid 1px #d9d9d9;\n padding: 0 11px;\n cursor: pointer;\n line-height: 22px;\n padding-top: 1px;\n padding-bottom: 6px;\n padding-left: 0;\n }\n\n & #ccNumber {\n caret-color: transparent;\n position: absolute;\n left: 0;\n opacity: 0;\n width: 100%;\n }\n']);
var _templateObject10 = taggedTemplateLiteral(['\n position: relative;\n\n & #ccCID {\n caret-color: transparent;\n position: absolute;\n left: 0;\n opacity: 0;\n }\n'], ['\n position: relative;\n\n & #ccCID {\n caret-color: transparent;\n position: absolute;\n left: 0;\n opacity: 0;\n }\n']);
var _templateObject11 = taggedTemplateLiteral(['\n cursor: pointer;\n'], ['\n cursor: pointer;\n']);
var Container = styled.div(_templateObject, function (_ref) {
var styled$$1 = _ref.styled;
return _extends({}, styled$$1);
});
var FieldWrapper = styled.div(_templateObject2, function (_ref2) {
var styled$$1 = _ref2.styled;
return _extends({}, styled$$1);
}, function (_ref3) {
var invalidStyled = _ref3.invalidStyled;
return _extends({}, invalidStyled);
});
var FormFieldWrapper = styled.div(_templateObject3, function (_ref4) {
var styled$$1 = _ref4.styled;
return _extends({}, styled$$1);
}, function (_ref5) {
var invalidStyled = _ref5.invalidStyled;
return _extends({}, invalidStyled);
});
var FormFieldLabel = styled.span(_templateObject4);
var CardImage = styled.img(_templateObject5, function (_ref6) {
var styled$$1 = _ref6.styled;
return _extends({}, styled$$1);
});
var InputWrapper = styled.label(_templateObject6, function (_ref7) {
var translateXForZip = _ref7.translateXForZip;
return translateXForZip ? '0' : '4rem';
}, function (_ref8) {
var inputStyled = _ref8.inputStyled;
return _extends({}, inputStyled);
}, function (_ref9) {
var translateXForZip = _ref9.translateXForZip;
return translateXForZip ? 'flex' : 'none';
});
var FormInputWrapper = styled.label(_templateObject7, function (_ref10) {
var translateXForZip = _ref10.translateXForZip;
return translateXForZip ? '0' : '4rem';
}, function (_ref11) {
var inputStyled = _ref11.inputStyled;
return _extends({}, inputStyled);
}, function (_ref12) {
var translateXForZip = _ref12.translateXForZip;
return translateXForZip ? 'flex' : 'none';
});
var DangerText = styled.p(_templateObject8, function (_ref13) {
var styled$$1 = _ref13.styled;
return _extends({}, styled$$1);
});
var ErrorValidationElement = function ErrorValidationElement(_ref14) {
var field = _ref14.field,
context = _ref14.context;
return context.props.showPopoverError ? React__default.createElement(
'div',
{ className: 'validation-advice' },
React__default.createElement('a', {
className: 'dropdown-toggle',
onClick: function onClick() {
return context.showDetailError && context.showDetailError(field);
},
onMouseEnter: function onMouseEnter() {
return context.showDetailError && context.showDetailError(field);
},
onMouseLeave: function onMouseLeave() {
return context.showDetailError && context.showDetailError(field);
},
style: {
display: context.state[field + 'ErrorText'] ? 'block' : 'none'
}
}),
React__default.createElement(
'div',
{
className: 'popover',
style: {
top: '40px',
left: '13px',
display: context.state.showDetailError[field] ? 'block' : 'none'
}
},
React__default.createElement(
'div',
{ className: 'popover-content' },
context.state[field + 'ErrorText']
)
)
) : '';
};
var HiddenNumberStyle = {
width: '1px',
height: '1px',
border: 'none',
background: 'transparent',
caretColor: 'transparent',
position: 'absolute',
outline: 'none',
top: 0,
left: 0
};
var NumberWrapper = styled.div(_templateObject9);
var CIDWrapper = styled.div(_templateObject10);
var Label = styled.label(_templateObject11);
var BACKSPACE_KEY_CODE = 8;
var CARD_TYPES$1 = {
mastercard: 'MASTERCARD',
visa: 'VISA',
amex: 'AMERICAN_EXPRESS'
};
var inputRenderer = function inputRenderer(_ref) {
var props = _ref.props;
return React__default.createElement('input', props);
};
var CreditCardInput = function (_Component) {
inherits(CreditCardInput, _Component);
function CreditCardInput(props) {
classCallCheck(this, CreditCardInput);
var _this = possibleConstructorReturn(this, (CreditCardInput.__proto__ || Object.getPrototypeOf(CreditCardInput)).call(this, props));
_this.componentDidMount = function () {
_this.setState({ cardNumber: _this.cardNumberField.value }, function () {
var cardType = payment.fns.cardType(_this.state.cardNumber);
_this.setState({
cardImage: images[cardType] || images.placeholder
});
});
};
_this.checkIsNumeric = function (e) {
if (!/^\d*$/.test(e.key)) {
e.preventDefault();
}
};
_this.handleCardNumberBlur = function () {
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { onBlur: null },
onBlur = _ref2.onBlur;
return function (e) {
var value = e.target.value;
var cardType = payment.fns.cardType(_this.cardNumberField.value);
if (!payment.fns.validateCardNumber(value)) {
var message = value.length ? 'Please enter a valid card number' : 'This is a required field';
_this.setFieldInvalid(message, {
state: 'ccNumberErrorText'
});
}
if (cardType && _this.props.allowCardTypes.length && _this.props.allowCardTypes.indexOf(cardType.toUpperCase()) === -1) {
_this.setFieldInvalid('This type card is not supported', {
state: 'ccNumberErrorText'
});
}
var _this$props = _this.props,
cardNumberInputProps = _this$props.cardNumberInputProps,
autoFocus = _this$props.autoFocus;
cardNumberInputProps.onBlur && cardNumberInputProps.onBlur(e);
onBlur && onBlur(e);
if (!cardType) {
return;
}
_this.updateNumberUnmasked();
/** check cvc again */
if (!autoFocus && _this.cvcField.value) {
_this.handleCardCVCBlur()({ target: { value: _this.cvcField.value } });
}
/** show last 4 digit */
var cardTypeInfo = creditCardType.getTypeInfo(creditCardType.types[CARD_TYPES$1[cardType]]) || {};
var cardTypeLengths = cardTypeInfo.lengths || [16];
var ccNumber = value.split(' ').join('');
if (ccNumber.length < cardTypeLengths[0]) {
return;
}
var fourDigit = (' ' + ccNumber.substring(Math.max(ccNumber.length - 4, 0))).substring(Math.min(ccNumber.length, 4));
_this.cardNumberdUnmaskedField && (_this.cardNumberdUnmaskedField.value = fourDigit);
};
};
_this.handleCardNumberChange = function () {
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { onChange: null },
onChange = _ref3.onChange;
return function (e) {
var cardNumber = e.target.value;
var cardNumberLength = cardNumber.split(' ').join('').length;
var cardType = payment.fns.cardType(cardNumber);
var cardTypeInfo = creditCardType.getTypeInfo(creditCardType.types[CARD_TYPES$1[cardType]]) || {};
var cardTypeLengths = cardTypeInfo.lengths || [16];
if (!_this.props.autoFocus && cardNumberLength > Math.max.apply(Math, toConsumableArray(cardTypeLengths))) {
cardNumber = cardNumber.substring(0, cardNumber.length - 1);
cardNumberLength--;
}
_this.cardNumberField.value = formatCardNumber(cardNumber).replace(/[^0-9]+/, '');
_this.setState({
cardImage: images[cardType] || images.placeholder,
cardNumber: cardNumber
});
_this.setState({ showZip: cardNumberLength >= 6 });
_this.setFieldValid({ state: 'ccNumberErrorText' });
if (cardTypeLengths) {
var lastCardTypeLength = cardTypeLengths[cardTypeLengths.length - 1];
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = cardTypeLengths[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var length = _step.value;
if (length === cardNumberLength && payment.fns.validateCardNumber(cardNumber)) {
_this.props.autoFocus && _this.cardExpiryField.focus();
break;
}
if (_this.props.autoFocus && cardNumberLength === lastCardTypeLength) {
_this.setFieldInvalid('Please enter a valid card number', {
state: 'ccNumberErrorText'
});
}
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}
if (cardType && _this.props.autoFocus && _this.props.allowCardTypes.length && _this.props.allowCardTypes.indexOf(cardType.toUpperCase()) === -1) {
_this.setFieldInvalid('This type card is not supported', {
state: 'ccNumberErrorText'
});
}
var cardNumberInputProps = _this.props.cardNumberInputProps;
cardNumberInputProps.onChange && cardNumberInputProps.onChange(e);
onChange && onChange(e);
_this.updateNumberUnmasked();
};
};
_this.handleCardNumberKeyPress = function (e) {
var value = e.target.value;
_this.checkIsNumeric(e);
if (value && !isHighlighted()) {
var valueLength = value.split(' ').join('').length;
if (hasCardNumberReachedMaxLength(value, valueLength)) {
e.preventDefault();
}
}
};
_this.updateNumberUnmasked = function () {
var formattedCcNumber = _this.cardNumberField.value;
var ccNumber = formattedCcNumber.split(' ').join('');
var numberUnmasked = (' ' + ccNumber.substring(Math.max(ccNumber.length - 4, 0))).substring(Math.min(ccNumber.length, 4));
numberUnmasked = numberUnmasked.replace(/[0-9]/g, '*');
_this.cardNumberdUnmaskedField && (_this.cardNumberdUnmaskedField.value = numberUnmasked);
_this.cardNumberdMaskedField && (_this.cardNumberdMaskedField.value = formattedCcNumber.substring(4).replace(/[0-9]/g, '*'));
};
_this.handleCardExpiryBlur = function () {
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { onBlur: null },
onBlur = _ref4.onBlur;
return function (e) {
var cardExpiry = e.target.value.split(' / ').join('/');
var expiryError = isExpiryInvalid(cardExpiry);
if (expiryError) {
if (!cardExpiry.length) {
expiryError = 'This is a required filed';
}
_this.setFieldInvalid(expiryError, { state: 'ccExpDateErrorText' });
}
var cardExpiryInputProps = _this.props.cardExpiryInputProps;
cardExpiryInputProps.onBlur && cardExpiryInputProps.onBlur(e);
onBlur && onBlur(e);
};
};
_this.handleCardExpiryChange = function () {
var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { onChange: null },
onChange = _ref5.onChange;
return function (e) {
var cardExpiry = e.target.value.split(' / ').join('/');
if (!_this.props.autoFocus && cardExpiry.length > 5) {
cardExpiry = cardExpiry.substring(0, cardExpiry.length - 1);
}
_this.cardExpiryField.value = formatExpiry(cardExpiry);
_this.setFieldValid({ state: 'ccExpDateErrorText' });
var expiryError = isExpiryInvalid(cardExpiry);
if (expiryError && _this.props.autoFocus) {
_this.setFieldInvalid(expiryError, {
state: 'ccExpDateErrorText'
});
} else {
_this.props.autoFocus && _this.cvcField.focus();
}
var cardExpiryInputProps = _this.props.cardExpiryInputProps;
cardExpiryInputProps.onChange && cardExpiryInputProps.onChange(e);
onChange && onChange(e);
};
};
_this.handleCardExpiryKeyPress = function (e) {
var value = e.target.value;
_this.checkIsNumeric(e);
if (value && !isHighlighted()) {
var valueLength = value.split(' / ').join('').length;
if (valueLength >= 4) {
e.preventDefault();
}
}
};
_this.handleCardCVCBlur = function () {
var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { onBlur: null },
onBlur = _ref6.onBlur;
return function (e) {
var cardType = payment.fns.cardType(_this.cardNumberField.value);
var cvcIsValid = cardType ? payment.fns.validateCardCVC(e.target.value, cardType) : payment.fns.validateCardCVC(e.target.value);
if (!cvcIsValid) {
var message = e.target.value.length ? 'Please enter a valid CSC' : 'This is a required filed';
_this.setFieldInvalid(message, {
state: 'ccCIDErrorText'
});
}
var cardCVCInputProps = _this.props.cardCVCInputProps;
cardCVCInputProps.onBlur && cardCVCInputProps.onBlur(e);
onBlur && onBlur(e);
_this.updateCIDMasked();
};
};
_this.handleCardCVCChange = function () {
var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { onChange: null },
onChange = _ref7.onChange;
return function (e) {
var CVC = e.target.value;
var CVCLength = CVC.length;
var isZipFieldAvailable = _this.props.enableZipInput && _this.state.showZip;
var cardType = payment.fns.cardType(_this.cardNumberField.value);
var cardTypeInfo = creditCardType.getTypeInfo(creditCardType.types[CARD_TYPES$1[cardType]]) || {};
if (Object.keys(cardTypeInfo).length && !_this.props.autoFocus && CVCLength > cardTypeInfo.code.size) {
CVC = CVC.substring(0, CVC.length - 1);
CVCLength--;
}
if (CVCLength) {
CVC = CVC.replace(/[^0-9]+/, '');
}
_this.cvcField && (_this.cvcField.value = CVC);
_this.setFieldValid({
state: 'ccCIDErrorText'
});
if (!payment.fns.validateCardCVC(CVC, cardType) && _this.props.autoFocus) {
_this.setFieldInvalid('Please enter a valid CSC', {
state: 'ccCIDErrorText'
});
}
if (isZipFieldAvailable && hasCVCReachedMaxLength(cardType, CVCLength)) {
_this.props.autoFocus && _this.zipField.focus();
}
var cardCVCInputProps = _this.props.cardCVCInputProps;
cardCVCInputProps.onChange && cardCVCInputProps.onChange(e);
onChange && onChange(e);
_this.updateCIDMasked();
};
};
_this.handleCardCVCKeyPress = function (e) {
var cardType = payment.fns.cardType(_this.state.cardNumber);
var value = e.target.value;
_this.checkIsNumeric(e);
if (value && !isHighlighted()) {
var valueLength = value.split(' / ').join('').length;
if (hasCVCReachedMaxLength(cardType, valueLength)) {
e.preventDefault();
}
}
};
_this.updateCIDMasked = function () {
_this.cvcMaskedField && (_this.cvcMaskedField.value = _this.cvcField.value.replace(/[0-9]/g, '*'));
};
_this.handleCardZipBlur = function () {
var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { onBlur: null },
onBlur = _ref8.onBlur;
return function (e) {
if (!isValidZip(e.target.value)) {
_this.setFieldInvalid('Zip code is invalid', {
state: 'ccZipErrorText'
});
}
var cardZipInputProps = _this.props.cardZipInputProps;
cardZipInputProps.onBlur && cardZipInputProps.onBlur(e);
onBlur && onBlur(e);
};
};
_this.handleCardZipChange = function () {
var _ref9 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { onChange: null },
onChange = _ref9.onChange;
return function (e) {
var zip = e.target.value;
var zipLength = zip.length;
_this.setFieldValid({
state: 'ccZipErrorText'
});
if (zipLength >= 5 && !isValidZip(zip)) {
_this.setFieldInvalid('Zip code is invalid', {
state: 'ccZipErrorText'
});
}
var cardZipInputProps = _this.props.cardZipInputProps;
cardZipInputProps.onChange && cardZipInputProps.onChange(e);
onChange && onChange(e);
};
};
_this.handleCardZipKeyPress = function (e) {
var cardType = payment.fns.cardType(_this.state.cardNumber);
var value = e.target.value;
_this.checkIsNumeric(e);
if (value && !isHighlighted()) {
var valueLength = value.split(' / ').join('').length;
if (hasZipReachedMaxLength(cardType, valueLength)) {
e.preventDefault();
}
}
};
_this.handleKeyDown = function (ref) {
return function (e) {
if (e.keyCode === BACKSPACE_KEY_CODE && !e.target.value) {
_this.props.autoFocus && ref.focus();
}
};
};
_this.setFieldInvalid = function (errorText, mapState) {
var _this$props2 = _this.props,
invalidClassName = _this$props2.invalidClassName,
afterValidateCard = _this$props2.afterValidateCard;
var mainWrapper = document.getElementById('field-wrapper');
mainWrapper && mainWrapper.classList.add(invalidClassName);
var fieldWrapper = document.getElementById(mapState['state'].replace('ErrorText', ''));
fieldWrapper && fieldWrapper.classList.add(invalidClassName);
_this.setState(defineProperty({
errorText: _this.translate(errorText)
}, mapState['state'], _this.translate(errorText)));
afterValidateCard && afterValidateCard(false);
};
_this.setFieldValid = function (mapState) {
var _this$props3 = _this.props,
invalidClassName = _this$props3.invalidClassName,
afterValidateCard = _this$props3.afterValidateCard;
var mainWrapper = document.getElementById('field-wrapper');
mainWrapper && mainWrapper.classList.remove(invalidClassName);
var fieldWrapper = document.getElementById(mapState['state'].replace('ErrorText', ''));
fieldWrapper && fieldWrapper.classList.remove(invalidClassName);
_this.setState(defineProperty({ errorText: null }, mapState['state'], null));
afterValidateCard && afterValidateCard(_this.formIsValid(mapState['state']));
};
_this.formIsValid = function (ignore) {
var errorList = {};
var requiredFieldValueList = [];
if (_this.state.isCardMode) {
errorList = {
ccNumberErrorText: _this.state.ccNumberErrorText,
ccExpDateErrorText: _this.state.ccExpDateErrorText,
ccCIDErrorText: _this.state.ccCIDErrorText,
ccZipErrorText: _this.state.ccZipErrorText
};
requiredFieldValueList = [_this.cardNumberField.value, _this.cardExpiryField.value, _this.cvcField.value];
} else {
errorList = {
ccEmailErrorText: _this.state.ccEmailErrorText
};
requiredFieldValueList = [_this.emailField.value];
}
ignore && delete errorList[ignore];
var isValid = true;
Object.values(errorList).forEach(function (errorText) {
isValid &= !errorText;
});
requiredFieldValueList.forEach(function (value) {
isValid &= !!value;
});
return isValid;
};
_this.getType = function () {
var cardType = payment.fns.cardType(_this.state.cardNumber);
return cardType && cardType.charAt(0).toUpperCase() + cardType.slice(1);
};
_this.translate = function (word) {
return _this.props.translator[word] || word;
};
_this.render = function () {
var _this$state = _this.state,
cardImage = _this$state.cardImage,
errorText = _this$state.errorText,
showZip = _this$state.showZip;
var _this$props4 = _this.props,
cardImageClassName = _this$props4.cardImageClassName,
cardImageStyle = _this$props4.cardImageStyle,
cardCVCInputProps = _this$props4.cardCVCInputProps,
cardZipInputProps = _this$props4.cardZipInputProps,
cardExpiryInputProps = _this$props4.cardExpiryInputProps,
cardNumberInputProps = _this$props4.cardNumberInputProps,
cardCVCInputRenderer = _this$props4.cardCVCInputRenderer,
cardExpiryInputRenderer = _this$props4.cardExpiryInputRenderer,
cardNumberInputRenderer = _this$props4.cardNumberInputRenderer,
cardZipInputRenderer = _this$props4.cardZipInputRenderer,
containerClassName = _this$props4.containerClassName,
containerStyle = _this$props4.containerStyle,
showError = _this$props4.showError,
dangerTextClassName = _this$props4.dangerTextClassName,
dangerTextStyle = _this$props4.dangerTextStyle,
enableZipInput = _this$props4.enableZipInput,
fieldClassName = _this$props4.fieldClassName,
fieldStyle = _this$props4.fieldStyle,
inputClassName = _this$props4.inputClassName,
inputStyle = _this$props4.inputStyle,
invalidStyle = _this$props4.invalidStyle;
var isZipEnabled = enableZipInput && showZip;
return React__default.createElement(
Container,
{ className: containerClassName, styled: containerStyle },
React__default.createElement(
FieldWrapper,
{
id: 'field-wrapper',
className: fieldClassName,
styled: fieldStyle,
invalidStyled: invalidStyle
},
React__default.createElement(CardImage, {
className: cardImageClassName,
styled: cardImageStyle,
src: cardImage
}),
React__default.createElement(
InputWrapper,
{
inputStyled: inputStyle,
'data-max': '9999 9999 9999 9999 9999',
translateXForZip: true
},
cardNumberInputRenderer({
handleCardNumberChange: function handleCardNumberChange(onChange) {
return _this.handleCardNumberChange({ onChange: onChange });
},
handleCardNumberBlur: function handleCardNumberBlur(onBlur) {
return _this.handleCardNumberBlur({ onBlur: onBlur });
},
props: _extends({
id: 'card-number',
ref: function ref(cardNumberField) {
_this.cardNumberField = cardNumberField;
},
autoComplete: 'cc-number',
className: 'credit-card-input ' + inputClassName,
pattern: '[0-9]*',
placeholder: 'Card number',
type: 'text'
}, cardNumberInputProps, {
onBlur: _this.handleCardNumberBlur(),
onChange: _this.handleCardNumberChange(),
onKeyPress: _this.handleCardNumberKeyPress
})
})
),
React__default.createElement(
InputWrapper,
{
inputStyled: inputStyle,
'data-max': 'MM / YY 9',
translateXForZip: isZipEnabled
},
cardExpiryInputRenderer({
handleCardExpiryChange: function handleCardExpiryChange(onChange) {
return _this.handleCardExpiryChange({ onChange: onChange });
},
handleCardExpiryBlur: function handleCardExpiryBlur(onBlur) {
return _this.handleCardExpiryBlur({ onBlur: onBlur });
},
props: _extends({
id: 'card-expiry',
ref: function ref(cardExpiryField) {
_this.cardExpiryField = cardExpiryField;
},
autoComplete: 'cc-exp',
className: 'credit-card-input ' + inputClassName,
pattern: '[0-9]*',
placeholder: 'MM/YY',
type: 'text'
}, cardExpiryInputProps, {
onBlur: _this.handleCardExpiryBlur(),
onChange: _this.handleCardExpiryChange(),
onKeyDown: _this.handleKeyDown(_this.cardNumberField),
onKeyPress: _this.handleCardExpiryKeyPress
})
})
),
React__default.createElement(
InputWrapper,
{
inputStyled: inputStyle,
'data-max': '99999',
translateXForZip: isZipEnabled
},
cardCVCInputRenderer({
handleCardCVCChange: function handleCardCVCChange(onChange) {
return _this.handleCardCVCChange({ onChange: onChange });
},
handleCardCVCBlur: function handleCardCVCBlur(onBlur) {
return _this.handleCardCVCBlur({ onBlur: onBlur });
},
props: _extends({
id: 'cvc',
ref: function ref(cvcField) {
_this.cvcField = cvcField;
},
autoComplete: 'off',
className: 'credit-card-input ' + inputClassName,
pattern: '[0-9]*',
placeholder: 'CVC',
type: 'text'
}, cardCVCInputProps, {
onBlur: _this.handleCardCVCBlur(),
onChange: _this.handleCardCVCChange(),
onKeyDown: _this.handleKeyDown(_this.cardExpiryField),
onKeyPress: _this.handleCardCVCKeyPress
})
})
),
React__default.createElement(
InputWrapper,
{ 'data-max': '999999', translateXForZip: isZipEnabled },
cardZipInputRenderer({
handleCardZipChange: function handleCardZipChange(onChange) {
return _this.handleCardZipChange({ onChange: onChange });
},
handleCardZipBlur: function handleCardZipBlur(onBlur) {
return _this.handleCardZipBlur({ onBlur: onBlur });
},
props: _extends({
id: 'zip',
ref: function ref(zipField) {
_this.zipField = zipField;
},
className: 'credit-card-input zip-input ' + inputClassName,
pattern: '[0-9]*',
placeholder: 'Zip',
type: 'text'
}, cardZipInputProps, {
onBlur: _this.handleCardZipBlur(),
onChange: _this.handleCardZipChange(),
onKeyDown: _this.handleKeyDown(_this.cvcField),
onKeyPress: _this.handleCardZipKeyPress
})
})
)
),
showError && errorText && React__default.createElement(
DangerText,
{
className: dangerTextClassName,
styled: dangerTextStyle
},
errorText
)
);
};
_this.state = {
cardImage: images.placeholder,
cardNumberLength: 0,
cardNumber: null,
errorText: null,
showZip: false,
ccNumberErrorText: null,
ccExpDateErrorText: null,
ccCIDErrorText: null,
ccZipErrorText: null,
ccEmailErrorText: null,
isCardMode: true
};
_this.inputRenderer = inputRenderer;
return _this;
}
return CreditCardInput;
}(React.Component);
CreditCardInput.defaultProps = {
cardCVCInputRenderer: inputRenderer,
cardExpiryInputRenderer: inputRenderer,
cardNumberInputRenderer: inputRenderer,
cardZipInputRenderer: inputRenderer,
afterValidateCard: function afterValidateCard() {},
cardExpiryInputProps: {},
cardNumberInputProps: {},
cardCVCInputProps: {},
cardZipInputProps: {},
cardNameInputProps: {},
emailInputProps: {},
cardImageClassName: '',
cardImageStyle: {},
containerClassName: '',
containerStyle: {},
controlClassName: '',
showError: true,
showPopoverError: false,
dangerTextClassName: '',
dangerTextStyle: {},
enableZipInput: false,
fieldClassName: '',
fieldStyle: {},
inputComponent: 'input',
inputClassName: '',
inputStyle: {},
invalidClassName: 'is-invalid',
invalidStyle: {},
translator: {},
autoFocus: true,
allowCardTypes: []
};
var Cardswipe = function Cardswipe() {
var _this = this;
classCallCheck(this, Cardswipe);
this.parseSwiperData = function (value) {
if (value.charAt(0) !== '%') {
return -1;
}
var p = _this.swipeParserObj(value);
var result = {};
if (p.hasTrack1) {
if (p.account_name != null) result['name'] = p.account_name;else