<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.card.js"></script>
<script src="app.js"></script>
</head>
<body style="text-align:center">
<h1>Hello Card!</h1>
<div class='card-wrapper'></div>
<form style="padding-top:20px">
<input type="text" name="number" placeholder="card number" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
<input type="text" name="name" placeholder="name">
<input type="hidden" name="expiry" placeholder="expiry" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" style="cursor:not-allowed" value="••/••" readonly >
<input type="number" pattern="[0-9]*" min="0" name="cvc" placeholder="cvc">
<div style="padding:20px 0">
<label>Expiry:</label>
<select name="myexpirymonth">
<option selected disabled>month</option>
<option value="01">January - 01</option>
<option value="02">February - 02</option>
<option value="03">March - 03</option>
<option value="04">April - 04</option>
<option value="05">May - 05</option>
<option value="06">June - 06</option>
<option value="07">July - 07</option>
<option value="08">August - 08</option>
<option value="09">Septembre - 09</option>
<option value="10">Octobre - 10</option>
<option value="11">Novembre - 11</option>
<option value="12">Decembre - 12</option>
</select>
<select name="myexpiryyear">
<option selected disabled>year</option>
</select>
</div>
<div style="padding:20px 0">
<input type="number" pattern="[0-9]*" min="0">
</div>
</form>
</body>
</html>
// Code goes here
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
module.exports = require('./lib/extend');
},{"./lib/extend":2}],2:[function(require,module,exports){
/*!
* node.extend
* Copyright 2011, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* @fileoverview
* Port of jQuery.extend that actually works on node.js
*/
var is = require('is');
function extend() {
var target = arguments[0] || {};
var i = 1;
var length = arguments.length;
var deep = false;
var options, name, src, copy, copy_is_array, clone;
// Handle a deep copy situation
if (typeof target === 'boolean') {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}
// Handle case when target is a string or something (possible in deep copy)
if (typeof target !== 'object' && !is.fn(target)) {
target = {};
}
for (; i < length; i++) {
// Only deal with non-null/undefined values
options = arguments[i]
if (options != null) {
if (typeof options === 'string') {
options = options.split('');
}
// Extend the base object
for (name in options) {
src = target[name];
copy = options[name];
// Prevent never-ending loop
if (target === copy) {
continue;
}
// Recurse if we're merging plain objects or arrays
if (deep && copy && (is.hash(copy) || (copy_is_array = is.array(copy)))) {
if (copy_is_array) {
copy_is_array = false;
clone = src && is.array(src) ? src : [];
} else {
clone = src && is.hash(src) ? src : {};
}
// Never move original objects, clone them
target[name] = extend(deep, clone, copy);
// Don't bring in undefined values
} else if (typeof copy !== 'undefined') {
target[name] = copy;
}
}
}
}
// Return the modified object
return target;
};
/**
* @public
*/
extend.version = '1.1.3';
/**
* Exports module.
*/
module.exports = extend;
},{"is":3}],3:[function(require,module,exports){
/**!
* is
* the definitive JavaScript type testing library
*
* @copyright 2013-2014 Enrico Marino / Jordan Harband
* @license MIT
*/
var objProto = Object.prototype;
var owns = objProto.hasOwnProperty;
var toStr = objProto.toString;
var symbolValueOf;
if (typeof Symbol === 'function') {
symbolValueOf = Symbol.prototype.valueOf;
}
var isActualNaN = function (value) {
return value !== value;
};
var NON_HOST_TYPES = {
boolean: 1,
number: 1,
string: 1,
undefined: 1
};
var base64Regex = /^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)$/;
var hexRegex = /^[A-Fa-f0-9]+$/;
/**
* Expose `is`
*/
var is = module.exports = {};
/**
* Test general.
*/
/**
* is.type
* Test if `value` is a type of `type`.
*
* @param {Mixed} value value to test
* @param {String} type type
* @return {Boolean} true if `value` is a type of `type`, false otherwise
* @api public
*/
is.a = is.type = function (value, type) {
return typeof value === type;
};
/**
* is.defined
* Test if `value` is defined.
*
* @param {Mixed} value value to test
* @return {Boolean} true if 'value' is defined, false otherwise
* @api public
*/
is.defined = function (value) {
return typeof value !== 'undefined';
};
/**
* is.empty
* Test if `value` is empty.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is empty, false otherwise
* @api public
*/
is.empty = function (value) {
var type = toStr.call(value);
var key;
if ('[object Array]' === type || '[object Arguments]' === type || '[object String]' === type) {
return value.length === 0;
}
if ('[object Object]' === type) {
for (key in value) {
if (owns.call(value, key)) { return false; }
}
return true;
}
return !value;
};
/**
* is.equal
* Test if `value` is equal to `other`.
*
* @param {Mixed} value value to test
* @param {Mixed} other value to compare with
* @return {Boolean} true if `value` is equal to `other`, false otherwise
*/
is.equal = function (value, other) {
var strictlyEqual = value === other;
if (strictlyEqual) {
return true;
}
var type = toStr.call(value);
var key;
if (type !== toStr.call(other)) {
return false;
}
if ('[object Object]' === type) {
for (key in value) {
if (!is.equal(value[key], other[key]) || !(key in other)) {
return false;
}
}
for (key in other) {
if (!is.equal(value[key], other[key]) || !(key in value)) {
return false;
}
}
return true;
}
if ('[object Array]' === type) {
key = value.length;
if (key !== other.length) {
return false;
}
while (--key) {
if (!is.equal(value[key], other[key])) {
return false;
}
}
return true;
}
if ('[object Function]' === type) {
return value.prototype === other.prototype;
}
if ('[object Date]' === type) {
return value.getTime() === other.getTime();
}
return strictlyEqual;
};
/**
* is.hosted
* Test if `value` is hosted by `host`.
*
* @param {Mixed} value to test
* @param {Mixed} host host to test with
* @return {Boolean} true if `value` is hosted by `host`, false otherwise
* @api public
*/
is.hosted = function (value, host) {
var type = typeof host[value];
return type === 'object' ? !!host[value] : !NON_HOST_TYPES[type];
};
/**
* is.instance
* Test if `value` is an instance of `constructor`.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is an instance of `constructor`
* @api public
*/
is.instance = is['instanceof'] = function (value, constructor) {
return value instanceof constructor;
};
/**
* is.nil / is.null
* Test if `value` is null.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is null, false otherwise
* @api public
*/
is.nil = is['null'] = function (value) {
return value === null;
};
/**
* is.undef / is.undefined
* Test if `value` is undefined.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is undefined, false otherwise
* @api public
*/
is.undef = is.undefined = function (value) {
return typeof value === 'undefined';
};
/**
* Test arguments.
*/
/**
* is.args
* Test if `value` is an arguments object.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is an arguments object, false otherwise
* @api public
*/
is.args = is.arguments = function (value) {
var isStandardArguments = '[object Arguments]' === toStr.call(value);
var isOldArguments = !is.array(value) && is.arraylike(value) && is.object(value) && is.fn(value.callee);
return isStandardArguments || isOldArguments;
};
/**
* Test array.
*/
/**
* is.array
* Test if 'value' is an array.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is an array, false otherwise
* @api public
*/
is.array = function (value) {
return '[object Array]' === toStr.call(value);
};
/**
* is.arguments.empty
* Test if `value` is an empty arguments object.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is an empty arguments object, false otherwise
* @api public
*/
is.args.empty = function (value) {
return is.args(value) && value.length === 0;
};
/**
* is.array.empty
* Test if `value` is an empty array.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is an empty array, false otherwise
* @api public
*/
is.array.empty = function (value) {
return is.array(value) && value.length === 0;
};
/**
* is.arraylike
* Test if `value` is an arraylike object.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is an arguments object, false otherwise
* @api public
*/
is.arraylike = function (value) {
return !!value && !is.boolean(value)
&& owns.call(value, 'length')
&& isFinite(value.length)
&& is.number(value.length)
&& value.length >= 0;
};
/**
* Test boolean.
*/
/**
* is.boolean
* Test if `value` is a boolean.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is a boolean, false otherwise
* @api public
*/
is.boolean = function (value) {
return '[object Boolean]' === toStr.call(value);
};
/**
* is.false
* Test if `value` is false.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is false, false otherwise
* @api public
*/
is['false'] = function (value) {
return is.boolean(value) && Boolean(Number(value)) === false;
};
/**
* is.true
* Test if `value` is true.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is true, false otherwise
* @api public
*/
is['true'] = function (value) {
return is.boolean(value) && Boolean(Number(value)) === true;
};
/**
* Test date.
*/
/**
* is.date
* Test if `value` is a date.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is a date, false otherwise
* @api public
*/
is.date = function (value) {
return '[object Date]' === toStr.call(value);
};
/**
* Test element.
*/
/**
* is.element
* Test if `value` is an html element.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is an HTML Element, false otherwise
* @api public
*/
is.element = function (value) {
return value !== undefined
&& typeof HTMLElement !== 'undefined'
&& value instanceof HTMLElement
&& value.nodeType === 1;
};
/**
* Test error.
*/
/**
* is.error
* Test if `value` is an error object.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is an error object, false otherwise
* @api public
*/
is.error = function (value) {
return '[object Error]' === toStr.call(value);
};
/**
* Test function.
*/
/**
* is.fn / is.function (deprecated)
* Test if `value` is a function.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is a function, false otherwise
* @api public
*/
is.fn = is['function'] = function (value) {
var isAlert = typeof window !== 'undefined' && value === window.alert;
return isAlert || '[object Function]' === toStr.call(value);
};
/**
* Test number.
*/
/**
* is.number
* Test if `value` is a number.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is a number, false otherwise
* @api public
*/
is.number = function (value) {
return '[object Number]' === toStr.call(value);
};
/**
* is.infinite
* Test if `value` is positive or negative infinity.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is positive or negative Infinity, false otherwise
* @api public
*/
is.infinite = function (value) {
return value === Infinity || value === -Infinity;
};
/**
* is.decimal
* Test if `value` is a decimal number.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is a decimal number, false otherwise
* @api public
*/
is.decimal = function (value) {
return is.number(value) && !isActualNaN(value) && !is.infinite(value) && value % 1 !== 0;
};
/**
* is.divisibleBy
* Test if `value` is divisible by `n`.
*
* @param {Number} value value to test
* @param {Number} n dividend
* @return {Boolean} true if `value` is divisible by `n`, false otherwise
* @api public
*/
is.divisibleBy = function (value, n) {
var isDividendInfinite = is.infinite(value);
var isDivisorInfinite = is.infinite(n);
var isNonZeroNumber = is.number(value) && !isActualNaN(value) && is.number(n) && !isActualNaN(n) && n !== 0;
return isDividendInfinite || isDivisorInfinite || (isNonZeroNumber && value % n === 0);
};
/**
* is.int
* Test if `value` is an integer.
*
* @param value to test
* @return {Boolean} true if `value` is an integer, false otherwise
* @api public
*/
is.int = function (value) {
return is.number(value) && !isActualNaN(value) && value % 1 === 0;
};
/**
* is.maximum
* Test if `value` is greater than 'others' values.
*
* @param {Number} value value to test
* @param {Array} others values to compare with
* @return {Boolean} true if `value` is greater than `others` values
* @api public
*/
is.maximum = function (value, others) {
if (isActualNaN(value)) {
throw new TypeError('NaN is not a valid value');
} else if (!is.arraylike(others)) {
throw new TypeError('second argument must be array-like');
}
var len = others.length;
while (--len >= 0) {
if (value < others[len]) {
return false;
}
}
return true;
};
/**
* is.minimum
* Test if `value` is less than `others` values.
*
* @param {Number} value value to test
* @param {Array} others values to compare with
* @return {Boolean} true if `value` is less than `others` values
* @api public
*/
is.minimum = function (value, others) {
if (isActualNaN(value)) {
throw new TypeError('NaN is not a valid value');
} else if (!is.arraylike(others)) {
throw new TypeError('second argument must be array-like');
}
var len = others.length;
while (--len >= 0) {
if (value > others[len]) {
return false;
}
}
return true;
};
/**
* is.nan
* Test if `value` is not a number.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is not a number, false otherwise
* @api public
*/
is.nan = function (value) {
return !is.number(value) || value !== value;
};
/**
* is.even
* Test if `value` is an even number.
*
* @param {Number} value value to test
* @return {Boolean} true if `value` is an even number, false otherwise
* @api public
*/
is.even = function (value) {
return is.infinite(value) || (is.number(value) && value === value && value % 2 === 0);
};
/**
* is.odd
* Test if `value` is an odd number.
*
* @param {Number} value value to test
* @return {Boolean} true if `value` is an odd number, false otherwise
* @api public
*/
is.odd = function (value) {
return is.infinite(value) || (is.number(value) && value === value && value % 2 !== 0);
};
/**
* is.ge
* Test if `value` is greater than or equal to `other`.
*
* @param {Number} value value to test
* @param {Number} other value to compare with
* @return {Boolean}
* @api public
*/
is.ge = function (value, other) {
if (isActualNaN(value) || isActualNaN(other)) {
throw new TypeError('NaN is not a valid value');
}
return !is.infinite(value) && !is.infinite(other) && value >= other;
};
/**
* is.gt
* Test if `value` is greater than `other`.
*
* @param {Number} value value to test
* @param {Number} other value to compare with
* @return {Boolean}
* @api public
*/
is.gt = function (value, other) {
if (isActualNaN(value) || isActualNaN(other)) {
throw new TypeError('NaN is not a valid value');
}
return !is.infinite(value) && !is.infinite(other) && value > other;
};
/**
* is.le
* Test if `value` is less than or equal to `other`.
*
* @param {Number} value value to test
* @param {Number} other value to compare with
* @return {Boolean} if 'value' is less than or equal to 'other'
* @api public
*/
is.le = function (value, other) {
if (isActualNaN(value) || isActualNaN(other)) {
throw new TypeError('NaN is not a valid value');
}
return !is.infinite(value) && !is.infinite(other) && value <= other;
};
/**
* is.lt
* Test if `value` is less than `other`.
*
* @param {Number} value value to test
* @param {Number} other value to compare with
* @return {Boolean} if `value` is less than `other`
* @api public
*/
is.lt = function (value, other) {
if (isActualNaN(value) || isActualNaN(other)) {
throw new TypeError('NaN is not a valid value');
}
return !is.infinite(value) && !is.infinite(other) && value < other;
};
/**
* is.within
* Test if `value` is within `start` and `finish`.
*
* @param {Number} value value to test
* @param {Number} start lower bound
* @param {Number} finish upper bound
* @return {Boolean} true if 'value' is is within 'start' and 'finish'
* @api public
*/
is.within = function (value, start, finish) {
if (isActualNaN(value) || isActualNaN(start) || isActualNaN(finish)) {
throw new TypeError('NaN is not a valid value');
} else if (!is.number(value) || !is.number(start) || !is.number(finish)) {
throw new TypeError('all arguments must be numbers');
}
var isAnyInfinite = is.infinite(value) || is.infinite(start) || is.infinite(finish);
return isAnyInfinite || (value >= start && value <= finish);
};
/**
* Test object.
*/
/**
* is.object
* Test if `value` is an object.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is an object, false otherwise
* @api public
*/
is.object = function (value) {
return '[object Object]' === toStr.call(value);
};
/**
* is.hash
* Test if `value` is a hash - a plain object literal.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is a hash, false otherwise
* @api public
*/
is.hash = function (value) {
return is.object(value) && value.constructor === Object && !value.nodeType && !value.setInterval;
};
/**
* Test regexp.
*/
/**
* is.regexp
* Test if `value` is a regular expression.
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is a regexp, false otherwise
* @api public
*/
is.regexp = function (value) {
return '[object RegExp]' === toStr.call(value);
};
/**
* Test string.
*/
/**
* is.string
* Test if `value` is a string.
*
* @param {Mixed} value value to test
* @return {Boolean} true if 'value' is a string, false otherwise
* @api public
*/
is.string = function (value) {
return '[object String]' === toStr.call(value);
};
/**
* Test base64 string.
*/
/**
* is.base64
* Test if `value` is a valid base64 encoded string.
*
* @param {Mixed} value value to test
* @return {Boolean} true if 'value' is a base64 encoded string, false otherwise
* @api public
*/
is.base64 = function (value) {
return is.string(value) && (!value.length || base64Regex.test(value));
};
/**
* Test base64 string.
*/
/**
* is.hex
* Test if `value` is a valid hex encoded string.
*
* @param {Mixed} value value to test
* @return {Boolean} true if 'value' is a hex encoded string, false otherwise
* @api public
*/
is.hex = function (value) {
return is.string(value) && (!value.length || hexRegex.test(value));
};
/**
* is.symbol
* Test if `value` is an ES6 Symbol
*
* @param {Mixed} value value to test
* @return {Boolean} true if `value` is a Symbol, false otherise
* @api public
*/
is.symbol = function (value) {
return typeof Symbol === 'function' && toStr.call(value) === '[object Symbol]' && typeof symbolValueOf.call(value) === 'symbol';
};
},{}],4:[function(require,module,exports){
(function (global){
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),(f.qj||(f.qj={})).js=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
var QJ, rreturn, rtrim;
QJ = function(selector) {
if (QJ.isDOMElement(selector)) {
return selector;
}
return document.querySelectorAll(selector);
};
QJ.isDOMElement = function(el) {
return el && (el.nodeName != null);
};
rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
QJ.trim = function(text) {
if (text === null) {
return "";
} else {
return (text + "").replace(rtrim, "");
}
};
rreturn = /\r/g;
QJ.val = function(el, val) {
var ret;
if (arguments.length > 1) {
return el.value = val;
} else {
ret = el.value;
if (typeof ret === "string") {
return ret.replace(rreturn, "");
} else {
if (ret === null) {
return "";
} else {
return ret;
}
}
}
};
QJ.preventDefault = function(eventObject) {
if (typeof eventObject.preventDefault === "function") {
eventObject.preventDefault();
return;
}
eventObject.returnValue = false;
return false;
};
QJ.normalizeEvent = function(e) {
var original;
original = e;
e = {
which: original.which != null ? original.which : void 0,
target: original.target || original.srcElement,
preventDefault: function() {
return QJ.preventDefault(original);
},
originalEvent: original,
data: original.data || original.detail
};
if (e.which == null) {
e.which = original.charCode != null ? original.charCode : original.keyCode;
}
return e;
};
QJ.on = function(element, eventName, callback) {
var el, multEventName, originalCallback, _i, _j, _len, _len1, _ref;
if (element.length) {
for (_i = 0, _len = element.length; _i < _len; _i++) {
el = element[_i];
QJ.on(el, eventName, callback);
}
return;
}
if (eventName.match(" ")) {
_ref = eventName.split(" ");
for (_j = 0, _len1 = _ref.length; _j < _len1; _j++) {
multEventName = _ref[_j];
QJ.on(element, multEventName, callback);
}
return;
}
originalCallback = callback;
callback = function(e) {
e = QJ.normalizeEvent(e);
return originalCallback(e);
};
if (element.addEventListener) {
return element.addEventListener(eventName, callback, false);
}
if (element.attachEvent) {
eventName = "on" + eventName;
return element.attachEvent(eventName, callback);
}
element['on' + eventName] = callback;
};
QJ.addClass = function(el, className) {
var e;
if (el.length) {
return (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = el.length; _i < _len; _i++) {
e = el[_i];
_results.push(QJ.addClass(e, className));
}
return _results;
})();
}
if (el.classList) {
return el.classList.add(className);
} else {
return el.className += ' ' + className;
}
};
QJ.hasClass = function(el, className) {
var e, hasClass, _i, _len;
if (el.length) {
hasClass = true;
for (_i = 0, _len = el.length; _i < _len; _i++) {
e = el[_i];
hasClass = hasClass && QJ.hasClass(e, className);
}
return hasClass;
}
if (el.classList) {
return el.classList.contains(className);
} else {
return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
}
};
QJ.removeClass = function(el, className) {
var cls, e, _i, _len, _ref, _results;
if (el.length) {
return (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = el.length; _i < _len; _i++) {
e = el[_i];
_results.push(QJ.removeClass(e, className));
}
return _results;
})();
}
if (el.classList) {
_ref = className.split(' ');
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
cls = _ref[_i];
_results.push(el.classList.remove(cls));
}
return _results;
} else {
return el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
};
QJ.toggleClass = function(el, className, bool) {
var e;
if (el.length) {
return (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = el.length; _i < _len; _i++) {
e = el[_i];
_results.push(QJ.toggleClass(e, className, bool));
}
return _results;
})();
}
if (bool) {
if (!QJ.hasClass(el, className)) {
return QJ.addClass(el, className);
}
} else {
return QJ.removeClass(el, className);
}
};
QJ.append = function(el, toAppend) {
var e;
if (el.length) {
return (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = el.length; _i < _len; _i++) {
e = el[_i];
_results.push(QJ.append(e, toAppend));
}
return _results;
})();
}
return el.insertAdjacentHTML('beforeend', toAppend);
};
QJ.find = function(el, selector) {
if (el instanceof NodeList || el instanceof Array) {
el = el[0];
}
return el.querySelectorAll(selector);
};
QJ.trigger = function(el, name, data) {
var e, ev;
try {
ev = new CustomEvent(name, {
detail: data
});
} catch (_error) {
e = _error;
ev = document.createEvent('CustomEvent');
if (ev.initCustomEvent) {
ev.initCustomEvent(name, true, true, data);
} else {
ev.initEvent(name, true, true, data);
}
}
return el.dispatchEvent(ev);
};
module.exports = QJ;
},{}]},{},[1])
(1)
});
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{}],5:[function(require,module,exports){
module.exports = require('cssify');
},{"cssify":6}],6:[function(require,module,exports){
module.exports = function (css, customDocument) {
var doc = customDocument || document;
if (doc.createStyleSheet) {
var sheet = doc.createStyleSheet()
sheet.cssText = css;
return sheet.ownerNode;
} else {
var head = doc.getElementsByTagName('head')[0],
style = doc.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(doc.createTextNode(css));
}
head.appendChild(style);
return style;
}
};
module.exports.byUrl = function(url) {
if (document.createStyleSheet) {
return document.createStyleSheet(url).ownerNode;
} else {
var head = document.getElementsByTagName('head')[0],
link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
head.appendChild(link);
return link;
}
};
},{}],7:[function(require,module,exports){
(function (global){
var Card, QJ, extend, payment;
require('../scss/card.scss');
QJ = require('qj');
payment = require('./payment/src/payment.coffee');
extend = require('node.extend');
Card = (function() {
var bindVal;
Card.prototype.cardTemplate = '' + '<div class="jp-card-container">' + '<div class="jp-card">' + '<div class="jp-card-front">' + '<div class="jp-card-logo jp-card-visa">visa</div>' + '<div class="jp-card-logo jp-card-mastercard">MasterCard</div>' + '<div class="jp-card-logo jp-card-maestro">Maestro</div>' + '<div class="jp-card-logo jp-card-amex"></div>' + '<div class="jp-card-logo jp-card-discover">discover</div>' + '<div class="jp-card-logo jp-card-dankort"><div class="dk"><div class="d"></div><div class="k"></div></div></div>' + '<div class="jp-card-lower">' + '<div class="jp-card-shiny"></div>' + '<div class="jp-card-cvc jp-card-display">{{cvc}}</div>' + '<div class="jp-card-number jp-card-display">{{number}}</div>' + '<div class="jp-card-name jp-card-display">{{name}}</div>' + '<div class="jp-card-expiry jp-card-display" data-before="{{monthYear}}" data-after="{{validDate}}">{{expiry}}</div>' + '</div>' + '</div>' + '<div class="jp-card-back">' + '<div class="jp-card-bar"></div>' + '<div class="jp-card-cvc jp-card-display">{{cvc}}</div>' + '<div class="jp-card-shiny"></div>' + '</div>' + '</div>' + '</div>';
Card.prototype.template = function(tpl, data) {
return tpl.replace(/\{\{(.*?)\}\}/g, function(match, key, str) {
return data[key];
});
};
Card.prototype.cardTypes = ['jp-card-amex', 'jp-card-dankort', 'jp-card-dinersclub', 'jp-card-discover', 'jp-card-jcb', 'jp-card-laser', 'jp-card-maestro', 'jp-card-mastercard', 'jp-card-unionpay', 'jp-card-visa', 'jp-card-visaelectron'];
Card.prototype.defaults = {
formatting: true,
formSelectors: {
numberInput: 'input[name="number"]',
expiryInput: 'input[name="expiry"]',
cvcInput: 'input[name="cvc"]',
nameInput: 'input[name="name"]'
},
cardSelectors: {
cardContainer: '.jp-card-container',
card: '.jp-card',
numberDisplay: '.jp-card-number',
expiryDisplay: '.jp-card-expiry',
cvcDisplay: '.jp-card-cvc',
nameDisplay: '.jp-card-name'
},
messages: {
validDate: 'valid\nthru',
monthYear: 'month/year'
},
placeholders: {
number: '•••• •••• •••• ••••',
cvc: '•••',
expiry: '••/••',
name: 'Full Name'
},
classes: {
valid: 'jp-card-valid',
invalid: 'jp-card-invalid'
},
debug: false
};
function Card(opts) {
this.options = extend(true, this.defaults, opts);
if (!this.options.form) {
console.log("Please provide a form");
return;
}
this.$el = QJ(this.options.form);
if (!this.options.container) {
console.log("Please provide a container");
return;
}
this.$container = QJ(this.options.container);
this.render();
this.attachHandlers();
this.handleInitialPlaceholders();
}
Card.prototype.render = function() {
var $cardContainer, baseWidth, name, obj, selector, ua, _ref, _ref1;
QJ.append(this.$container, this.template(this.cardTemplate, extend({}, this.options.messages, this.options.placeholders)));
_ref = this.options.cardSelectors;
for (name in _ref) {
selector = _ref[name];
this["$" + name] = QJ.find(this.$container, selector);
}
_ref1 = this.options.formSelectors;
for (name in _ref1) {
selector = _ref1[name];
selector = this.options[name] ? this.options[name] : selector;
obj = QJ.find(this.$el, selector);
if (!obj.length && this.options.debug) {
console.error("Card can't find a " + name + " in your form.");
}
this["$" + name] = obj;
}
if (this.options.formatting) {
Payment.formatCardNumber(this.$numberInput);
Payment.formatCardCVC(this.$cvcInput);
if (this.$expiryInput.length === 1) {
Payment.formatCardExpiry(this.$expiryInput);
}
}
if (this.options.width) {
$cardContainer = QJ(this.options.cardSelectors.cardContainer)[0];
baseWidth = parseInt($cardContainer.clientWidth);
$cardContainer.style.transform = "scale(" + (this.options.width / baseWidth) + ")";
}
if (typeof navigator !== "undefined" && navigator !== null ? navigator.userAgent : void 0) {
ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1) {
QJ.addClass(this.$card, 'jp-card-safari');
}
}
if (/MSIE 10\./i.test(navigator.userAgent)) {
QJ.addClass(this.$card, 'jp-card-ie-10');
}
if (/rv:11.0/i.test(navigator.userAgent)) {
return QJ.addClass(this.$card, 'jp-card-ie-11');
}
};
Card.prototype.attachHandlers = function() {
var expiryFilters;
bindVal(this.$numberInput, this.$numberDisplay, {
fill: false,
filters: this.validToggler('cardNumber')
});
QJ.on(this.$numberInput, 'payment.cardType', this.handle('setCardType'));
expiryFilters = [
function(val) {
return val.replace(/(\s+)/g, '');
}
];
if (this.$expiryInput.length === 1) {
expiryFilters.push(this.validToggler('cardExpiry'));
}
bindVal(this.$expiryInput, this.$expiryDisplay, {
join: function(text) {
if (text[0].length === 2 || text[1]) {
return "/";
} else {
return "";
}
},
filters: expiryFilters
});
bindVal(this.$cvcInput, this.$cvcDisplay, {
filters: this.validToggler('cardCVC')
});
QJ.on(this.$cvcInput, 'focus', this.handle('flipCard'));
QJ.on(this.$cvcInput, 'blur', this.handle('unflipCard'));
return bindVal(this.$nameInput, this.$nameDisplay, {
fill: false,
filters: this.validToggler('cardHolderName'),
join: ' '
});
};
Card.prototype.handleInitialPlaceholders = function() {
var el, name, selector, _ref, _results;
_ref = this.options.formSelectors;
_results = [];
for (name in _ref) {
selector = _ref[name];
el = this["$" + name];
if (QJ.val(el)) {
QJ.trigger(el, 'paste');
_results.push(setTimeout(function() {
return QJ.trigger(el, 'keyup');
}));
} else {
_results.push(void 0);
}
}
return _results;
};
Card.prototype.handle = function(fn) {
return (function(_this) {
return function(e) {
var args;
args = Array.prototype.slice.call(arguments);
args.unshift(e.target);
return _this.handlers[fn].apply(_this, args);
};
})(this);
};
Card.prototype.validToggler = function(validatorName) {
var isValid;
if (validatorName === "cardExpiry") {
isValid = function(val) {
var objVal;
objVal = Payment.fns.cardExpiryVal(val);
return Payment.fns.validateCardExpiry(objVal.month, objVal.year);
};
} else if (validatorName === "cardCVC") {
isValid = (function(_this) {
return function(val) {
return Payment.fns.validateCardCVC(val, _this.cardType);
};
})(this);
} else if (validatorName === "cardNumber") {
isValid = function(val) {
return Payment.fns.validateCardNumber(val);
};
} else if (validatorName === "cardHolderName") {
isValid = function(val) {
return val !== "";
};
}
return (function(_this) {
return function(val, $in, $out) {
var result;
result = isValid(val);
_this.toggleValidClass($in, result);
_this.toggleValidClass($out, result);
return val;
};
})(this);
};
Card.prototype.toggleValidClass = function(el, test) {
QJ.toggleClass(el, this.options.classes.valid, test);
return QJ.toggleClass(el, this.options.classes.invalid, !test);
};
Card.prototype.handlers = {
setCardType: function($el, e) {
var cardType;
cardType = e.data;
if (!QJ.hasClass(this.$card, cardType)) {
QJ.removeClass(this.$card, 'jp-card-unknown');
QJ.removeClass(this.$card, this.cardTypes.join(' '));
QJ.addClass(this.$card, "jp-card-" + cardType);
QJ.toggleClass(this.$card, 'jp-card-identified', cardType !== 'unknown');
return this.cardType = cardType;
}
},
flipCard: function() {
return QJ.addClass(this.$card, 'jp-card-flipped');
},
unflipCard: function() {
return QJ.removeClass(this.$card, 'jp-card-flipped');
}
};
bindVal = function(el, out, opts) {
var joiner, o, outDefaults;
if (opts == null) {
opts = {};
}
opts.fill = opts.fill || false;
opts.filters = opts.filters || [];
if (!(opts.filters instanceof Array)) {
opts.filters = [opts.filters];
}
opts.join = opts.join || "";
if (!(typeof opts.join === "function")) {
joiner = opts.join;
opts.join = function() {
return joiner;
};
}
outDefaults = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = out.length; _i < _len; _i++) {
o = out[_i];
_results.push(o.textContent);
}
return _results;
})();
QJ.on(el, 'focus', function() {
return QJ.addClass(out, 'jp-card-focused');
});
QJ.on(el, 'blur', function() {
return QJ.removeClass(out, 'jp-card-focused');
});
QJ.on(el, 'keyup change paste', function(e) {
var elem, filter, i, join, outEl, outVal, val, _i, _j, _len, _len1, _ref, _results;
val = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = el.length; _i < _len; _i++) {
elem = el[_i];
_results.push(QJ.val(elem));
}
return _results;
})();
join = opts.join(val);
val = val.join(join);
if (val === join) {
val = "";
}
_ref = opts.filters;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
filter = _ref[_i];
val = filter(val, el, out);
}
_results = [];
for (i = _j = 0, _len1 = out.length; _j < _len1; i = ++_j) {
outEl = out[i];
if (opts.fill) {
outVal = val + outDefaults[i].substring(val.length);
} else {
outVal = val || outDefaults[i];
}
_results.push(outEl.textContent = outVal);
}
return _results;
});
return el;
};
return Card;
})();
module.exports = Card;
global.Card = Card;
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"../scss/card.scss":10,"./payment/src/payment.coffee":9,"node.extend":1,"qj":4}],8:[function(require,module,exports){
var $, Card,
__slice = [].slice;
Card = require('./card');
$ = jQuery;
$.card = {};
$.card.fn = {};
$.fn.card = function(opts) {
return $.card.fn.construct.apply(this, opts);
};
$.fn.extend({
card: function() {
var args, option;
option = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
return this.each(function() {
var $this, data;
$this = $(this);
data = $this.data('card');
if (!data) {
$.each(option, (function(_this) {
return function(key, value) {
if (value instanceof jQuery) {
return option[key] = value[0];
}
};
})(this));
option['form'] = this;
$this.data('card', (data = new Card(option)));
}
if (typeof option === 'string') {
return data[option].apply(data, args);
}
});
}
});
},{"./card":7}],9:[function(require,module,exports){
(function (global){
var Payment, QJ, cardFromNumber, cardFromType, cards, defaultFormat, formatBackCardNumber, formatBackExpiry, formatCardNumber, formatExpiry, formatForwardExpiry, formatForwardSlash, hasTextSelected, luhnCheck, reFormatCardNumber, restrictCVC, restrictCardNumber, restrictExpiry, restrictNumeric, setCardType,
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
QJ = require('qj');
defaultFormat = /(\d{1,4})/g;
cards = [
{
type: 'amex',
pattern: /^3[47]/,
format: /(\d{1,4})(\d{1,6})?(\d{1,5})?/,
length: [15],
cvcLength: [4],
luhn: true
}, {
type: 'dankort',
pattern: /^5019/,
format: defaultFormat,
length: [16],
cvcLength: [3],
luhn: true
}, {
type: 'dinersclub',
pattern: /^(36|38|30[0-5])/,
format: defaultFormat,
length: [14],
cvcLength: [3],
luhn: true
}, {
type: 'discover',
pattern: /^(6011|65|64[4-9]|622)/,
format: defaultFormat,
length: [16],
cvcLength: [3],
luhn: true
}, {
type: 'jcb',
pattern: /^35/,
format: defaultFormat,
length: [16],
cvcLength: [3],
luhn: true
}, {
type: 'laser',
pattern: /^(6706|6771|6709)/,
format: defaultFormat,
length: [16, 17, 18, 19],
cvcLength: [3],
luhn: true
}, {
type: 'maestro',
pattern: /^(5018|5020|5038|6304|6703|6759|676[1-3])/,
format: defaultFormat,
length: [12, 13, 14, 15, 16, 17, 18, 19],
cvcLength: [3],
luhn: true
}, {
type: 'mastercard',
pattern: /^5[1-5]/,
format: defaultFormat,
length: [16],
cvcLength: [3],
luhn: true
}, {
type: 'unionpay',
pattern: /^62/,
format: defaultFormat,
length: [16, 17, 18, 19],
cvcLength: [3],
luhn: false
}, {
type: 'visaelectron',
pattern: /^4(026|17500|405|508|844|91[37])/,
format: defaultFormat,
length: [16],
cvcLength: [3],
luhn: true
}, {
type: 'visa',
pattern: /^4/,
format: defaultFormat,
length: [13, 14, 15, 16],
cvcLength: [3],
luhn: true
}
];
cardFromNumber = function(num) {
var card, _i, _len;
num = (num + '').replace(/\D/g, '');
for (_i = 0, _len = cards.length; _i < _len; _i++) {
card = cards[_i];
if (card.pattern.test(num)) {
return card;
}
}
};
cardFromType = function(type) {
var card, _i, _len;
for (_i = 0, _len = cards.length; _i < _len; _i++) {
card = cards[_i];
if (card.type === type) {
return card;
}
}
};
luhnCheck = function(num) {
var digit, digits, odd, sum, _i, _len;
odd = true;
sum = 0;
digits = (num + '').split('').reverse();
for (_i = 0, _len = digits.length; _i < _len; _i++) {
digit = digits[_i];
digit = parseInt(digit, 10);
if ((odd = !odd)) {
digit *= 2;
}
if (digit > 9) {
digit -= 9;
}
sum += digit;
}
return sum % 10 === 0;
};
hasTextSelected = function(target) {
var _ref;
if ((target.selectionStart != null) && target.selectionStart !== target.selectionEnd) {
return true;
}
if ((typeof document !== "undefined" && document !== null ? (_ref = document.selection) != null ? _ref.createRange : void 0 : void 0) != null) {
if (document.selection.createRange().text) {
return true;
}
}
return false;
};
reFormatCardNumber = function(e) {
return setTimeout((function(_this) {
return function() {
var target, value;
target = e.target;
value = QJ.val(target);
value = Payment.fns.formatCardNumber(value);
return QJ.val(target, value);
};
})(this));
};
formatCardNumber = function(e) {
var card, digit, length, re, target, upperLength, value;
digit = String.fromCharCode(e.which);
if (!/^\d+$/.test(digit)) {
return;
}
target = e.target;
value = QJ.val(target);
card = cardFromNumber(value + digit);
length = (value.replace(/\D/g, '') + digit).length;
upperLength = 16;
if (card) {
upperLength = card.length[card.length.length - 1];
}
if (length >= upperLength) {
return;
}
if ((target.selectionStart != null) && target.selectionStart !== value.length) {
return;
}
if (card && card.type === 'amex') {
re = /^(\d{4}|\d{4}\s\d{6})$/;
} else {
re = /(?:^|\s)(\d{4})$/;
}
if (re.test(value)) {
e.preventDefault();
return QJ.val(target, value + ' ' + digit);
} else if (re.test(value + digit)) {
e.preventDefault();
return QJ.val(target, value + digit + ' ');
}
};
formatBackCardNumber = function(e) {
var target, value;
target = e.target;
value = QJ.val(target);
if (e.meta) {
return;
}
if (e.which !== 8) {
return;
}
if ((target.selectionStart != null) && target.selectionStart !== value.length) {
return;
}
if (/\d\s$/.test(value)) {
e.preventDefault();
return QJ.val(target, value.replace(/\d\s$/, ''));
} else if (/\s\d?$/.test(value)) {
e.preventDefault();
return QJ.val(target, value.replace(/\s\d?$/, ''));
}
};
formatExpiry = function(e) {
var digit, target, val;
digit = String.fromCharCode(e.which);
if (!/^\d+$/.test(digit)) {
return;
}
target = e.target;
val = QJ.val(target) + digit;
if (/^\d$/.test(val) && (val !== '0' && val !== '1')) {
e.preventDefault();
return QJ.val(target, "0" + val + " / ");
} else if (/^\d\d$/.test(val)) {
e.preventDefault();
return QJ.val(target, "" + val + " / ");
}
};
formatForwardExpiry = function(e) {
var digit, target, val;
digit = String.fromCharCode(e.which);
if (!/^\d+$/.test(digit)) {
return;
}
target = e.target;
val = QJ.val(target);
if (/^\d\d$/.test(val)) {
return QJ.val(target, "" + val + " / ");
}
};
formatForwardSlash = function(e) {
var slash, target, val;
slash = String.fromCharCode(e.which);
if (slash !== '/') {
return;
}
target = e.target;
val = QJ.val(target);
if (/^\d$/.test(val) && val !== '0') {
return QJ.val(target, "0" + val + " / ");
}
};
formatBackExpiry = function(e) {
var target, value;
if (e.metaKey) {
return;
}
target = e.target;
value = QJ.val(target);
if (e.which !== 8) {
return;
}
if ((target.selectionStart != null) && target.selectionStart !== value.length) {
return;
}
if (/\d(\s|\/)+$/.test(value)) {
e.preventDefault();
return QJ.val(target, value.replace(/\d(\s|\/)*$/, ''));
} else if (/\s\/\s?\d?$/.test(value)) {
e.preventDefault();
return QJ.val(target, value.replace(/\s\/\s?\d?$/, ''));
}
};
restrictNumeric = function(e) {
var input;
//alert("restricNumeric");
if (e.metaKey || e.ctrlKey) {
return true;
}
if (e.which === 32) {
return e.preventDefault();
}
if (e.which === 0) {
return true;
}
if (e.which < 33) {
return true;
}
input = String.fromCharCode(e.which);
if (!/[\d\s]/.test(input)) {
return e.preventDefault();
}
};
restrictCardNumber = function(e) {
var card, digit, target, value;
target = e.target;
digit = String.fromCharCode(e.which);
if (!/^\d+$/.test(digit)) {
return;
}
if (hasTextSelected(target)) {
return;
}
value = (QJ.val(target) + digit).replace(/\D/g, '');
card = cardFromNumber(value);
if (card) {
if (!(value.length <= card.length[card.length.length - 1])) {
return e.preventDefault();
}
} else {
if (!(value.length <= 16)) {
return e.preventDefault();
}
}
};
restrictExpiry = function(e) {
var digit, target, value;
target = e.target;
digit = String.fromCharCode(e.which);
if (!/^\d+$/.test(digit)) {
return;
}
if (hasTextSelected(target)) {
return;
}
value = QJ.val(target) + digit;
value = value.replace(/\D/g, '');
if (value.length > 6) {
return e.preventDefault();
}
};
restrictCVC = function(e) {
var digit, target, val;
target = e.target;
digit = String.fromCharCode(e.which);
if (!/^\d+$/.test(digit)) {
return;
}
val = QJ.val(target) + digit;
if (!(val.length <= 4)) {
return e.preventDefault();
}
};
setCardType = function(e) {
var allTypes, card, cardType, target, val;
target = e.target;
val = QJ.val(target);
cardType = Payment.fns.cardType(val) || 'unknown';
if (!QJ.hasClass(target, cardType)) {
allTypes = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = cards.length; _i < _len; _i++) {
card = cards[_i];
_results.push(card.type);
}
return _results;
})();
QJ.removeClass(target, 'unknown');
QJ.removeClass(target, allTypes.join(' '));
QJ.addClass(target, cardType);
QJ.toggleClass(target, 'identified', cardType !== 'unknown');
return QJ.trigger(target, 'payment.cardType', cardType);
}
};
Payment = (function() {
function Payment() {}
Payment.fns = {
cardExpiryVal: function(value) {
var month, prefix, year, _ref;
value = value.replace(/\s/g, '');
_ref = value.split('/', 2), month = _ref[0], year = _ref[1];
if ((year != null ? year.length : void 0) === 2 && /^\d+$/.test(year)) {
prefix = (new Date).getFullYear();
prefix = prefix.toString().slice(0, 2);
year = prefix + year;
}
month = parseInt(month, 10);
year = parseInt(year, 10);
return {
month: month,
year: year
};
},
validateCardNumber: function(num) {
var card, _ref;
num = (num + '').replace(/\s+|-/g, '');
if (!/^\d+$/.test(num)) {
return false;
}
card = cardFromNumber(num);
if (!card) {
return false;
}
return (_ref = num.length, __indexOf.call(card.length, _ref) >= 0) && (card.luhn === false || luhnCheck(num));
},
validateCardExpiry: function(month, year) {
var currentTime, expiry, prefix, _ref;
if (typeof month === 'object' && 'month' in month) {
_ref = month, month = _ref.month, year = _ref.year;
}
if (!(month && year)) {
return false;
}
month = QJ.trim(month);
year = QJ.trim(year);
if (!/^\d+$/.test(month)) {
return false;
}
if (!/^\d+$/.test(year)) {
return false;
}
if (!(parseInt(month, 10) <= 12)) {
return false;
}
if (year.length === 2) {
prefix = (new Date).getFullYear();
prefix = prefix.toString().slice(0, 2);
year = prefix + year;
}
expiry = new Date(year, month);
currentTime = new Date;
expiry.setMonth(expiry.getMonth() - 1);
expiry.setMonth(expiry.getMonth() + 1, 1);
return expiry > currentTime;
},
validateCardCVC: function(cvc, type) {
var _ref, _ref1;
cvc = QJ.trim(cvc);
if (!/^\d+$/.test(cvc)) {
return false;
}
if (type && cardFromType(type)) {
return _ref = cvc.length, __indexOf.call((_ref1 = cardFromType(type)) != null ? _ref1.cvcLength : void 0, _ref) >= 0;
} else {
return cvc.length >= 3 && cvc.length <= 4;
}
},
cardType: function(num) {
var _ref;
if (!num) {
return null;
}
return ((_ref = cardFromNumber(num)) != null ? _ref.type : void 0) || null;
},
formatCardNumber: function(num) {
var card, groups, upperLength, _ref;
card = cardFromNumber(num);
if (!card) {
return num;
}
upperLength = card.length[card.length.length - 1];
num = num.replace(/\D/g, '');
num = num.slice(0, +upperLength + 1 || 9e9);
if (card.format.global) {
return (_ref = num.match(card.format)) != null ? _ref.join(' ') : void 0;
} else {
groups = card.format.exec(num);
if (groups != null) {
groups.shift();
}
return groups != null ? groups.join(' ') : void 0;
}
}
};
Payment.restrictNumeric = function(el) {
return QJ.on(el, 'keypress', restrictNumeric);
};
Payment.cardExpiryVal = function(el) {
return Payment.fns.cardExpiryVal(QJ.val(el));
};
Payment.formatCardCVC = function(el) {
Payment.restrictNumeric(el);
QJ.on(el, 'keypress', restrictCVC);
return el;
};
Payment.formatCardExpiry = function(el) {
Payment.restrictNumeric(el);
QJ.on(el, 'keypress', restrictExpiry);
QJ.on(el, 'keypress', formatExpiry);
QJ.on(el, 'keypress', formatForwardSlash);
QJ.on(el, 'keypress', formatForwardExpiry);
QJ.on(el, 'keydown', formatBackExpiry);
return el;
};
Payment.formatCardNumber = function(el) {
Payment.restrictNumeric(el);
QJ.on(el, 'keypress', restrictCardNumber);
QJ.on(el, 'keypress', formatCardNumber);
QJ.on(el, 'keydown', formatBackCardNumber);
QJ.on(el, 'keyup', setCardType);
QJ.on(el, 'paste', reFormatCardNumber);
return el;
};
Payment.getCardArray = function() {
return cards;
};
Payment.setCardArray = function(cardArray) {
cards = cardArray;
return true;
};
Payment.addToCardArray = function(cardObject) {
return cards.push(cardObject);
};
Payment.removeFromCardArray = function(type) {
var key, value;
for (key in cards) {
value = cards[key];
if (value.type === type) {
cards.splice(key, 1);
}
}
return true;
};
return Payment;
})();
module.exports = Payment;
global.Payment = Payment;
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"qj":4}],10:[function(require,module,exports){
module.exports = require('sassify')('.jp-card.jp-card-safari.jp-card-identified .jp-card-front:before, .jp-card.jp-card-safari.jp-card-identified .jp-card-back:before { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%); background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), linear-gradient(-25deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%); } .jp-card.jp-card-ie-10.jp-card-flipped, .jp-card.jp-card-ie-11.jp-card-flipped { -webkit-transform: 0deg; -moz-transform: 0deg; -ms-transform: 0deg; -o-transform: 0deg; transform: 0deg; } .jp-card.jp-card-ie-10.jp-card-flipped .jp-card-front, .jp-card.jp-card-ie-11.jp-card-flipped .jp-card-front { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } .jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back, .jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } .jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back:after, .jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back:after { left: 18%; } .jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back .jp-card-cvc, .jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back .jp-card-cvc { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); left: 5%; } .jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back .jp-card-shiny, .jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back .jp-card-shiny { left: 84%; } .jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back .jp-card-shiny:after, .jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back .jp-card-shiny:after { left: -480%; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .jp-card.jp-card-ie-10.jp-card-amex .jp-card-back, .jp-card.jp-card-ie-11.jp-card-amex .jp-card-back { display: none; } .jp-card-logo { height: 36px; width: 60px; font-style: italic; } .jp-card-logo, .jp-card-logo:before, .jp-card-logo:after { box-sizing: border-box; } .jp-card-logo.jp-card-amex { text-transform: uppercase; font-size: 4px; font-weight: bold; color: white; background-image: repeating-radial-gradient(circle at center, #FFF 1px, #999 2px); background-image: repeating-radial-gradient(circle at center, #FFF 1px, #999 2px); border: 1px solid #EEE; } .jp-card-logo.jp-card-amex:before, .jp-card-logo.jp-card-amex:after { width: 28px; display: block; position: absolute; left: 16px; } .jp-card-logo.jp-card-amex:before { height: 28px; content: "american"; top: 3px; text-align: left; padding-left: 2px; padding-top: 11px; background: #267AC3; } .jp-card-logo.jp-card-amex:after { content: "express"; bottom: 11px; text-align: right; padding-right: 2px; } .jp-card.jp-card-amex.jp-card-flipped { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .jp-card.jp-card-amex.jp-card-identified .jp-card-front:before, .jp-card.jp-card-amex.jp-card-identified .jp-card-back:before { background-color: #108168; } .jp-card.jp-card-amex.jp-card-identified .jp-card-front .jp-card-logo.jp-card-amex { opacity: 1; } .jp-card.jp-card-amex.jp-card-identified .jp-card-front .jp-card-cvc { visibility: visible; } .jp-card.jp-card-amex.jp-card-identified .jp-card-front:after { opacity: 1; } .jp-card-logo.jp-card-discover { background: #FF6600; color: #111; text-transform: uppercase; font-style: normal; font-weight: bold; font-size: 10px; text-align: center; overflow: hidden; z-index: 1; padding-top: 9px; letter-spacing: .03em; border: 1px solid #EEE; } .jp-card-logo.jp-card-discover:before, .jp-card-logo.jp-card-discover:after { content: " "; display: block; position: absolute; } .jp-card-logo.jp-card-discover:before { background: white; width: 200px; height: 200px; border-radius: 200px; bottom: -5%; right: -80%; z-index: -1; } .jp-card-logo.jp-card-discover:after { width: 8px; height: 8px; border-radius: 4px; top: 10px; left: 27px; background-color: #FF6600; background-image: -webkit-radial-gradient(#FF6600, #fff, , , , , , , , ); background-image: radial-gradient( #FF6600, #fff, , , , , , , , ); content: "network"; font-size: 4px; line-height: 24px; text-indent: -7px; } .jp-card .jp-card-front .jp-card-logo.jp-card-discover { right: 12%; top: 18%; } .jp-card.jp-card-discover.jp-card-identified .jp-card-front:before, .jp-card.jp-card-discover.jp-card-identified .jp-card-back:before { background-color: #86B8CF; } .jp-card.jp-card-discover.jp-card-identified .jp-card-logo.jp-card-discover { opacity: 1; } .jp-card.jp-card-discover.jp-card-identified .jp-card-front:after { -webkit-transition: 400ms; -moz-transition: 400ms; transition: 400ms; content: " "; display: block; background-color: #FF6600; background-image: -webkit-linear-gradient(#FF6600, #ffa366, #FF6600); background-image: linear-gradient(#FF6600, #ffa366, #FF6600, , , , , , , ); height: 50px; width: 50px; border-radius: 25px; position: absolute; left: 100%; top: 15%; margin-left: -25px; box-shadow: inset 1px 1px 3px 1px rgba(0, 0, 0, 0.5); } .jp-card-logo.jp-card-visa { background: white; text-transform: uppercase; color: #1A1876; text-align: center; font-weight: bold; font-size: 15px; line-height: 18px; } .jp-card-logo.jp-card-visa:before, .jp-card-logo.jp-card-visa:after { content: " "; display: block; width: 100%; height: 25%; } .jp-card-logo.jp-card-visa:before { background: #1A1876; } .jp-card-logo.jp-card-visa:after { background: #E79800; } .jp-card.jp-card-visa.jp-card-identified .jp-card-front:before, .jp-card.jp-card-visa.jp-card-identified .jp-card-back:before { background-color: #191278; } .jp-card.jp-card-visa.jp-card-identified .jp-card-logo.jp-card-visa { opacity: 1; } .jp-card-logo.jp-card-mastercard { color: white; font-weight: bold; text-align: center; font-size: 9px; line-height: 36px; z-index: 1; text-shadow: 1px 1px rgba(0, 0, 0, 0.6); } .jp-card-logo.jp-card-mastercard:before, .jp-card-logo.jp-card-mastercard:after { content: " "; display: block; width: 36px; top: 0; position: absolute; height: 36px; border-radius: 18px; } .jp-card-logo.jp-card-mastercard:before { left: 0; background: #FF0000; z-index: -1; } .jp-card-logo.jp-card-mastercard:after { right: 0; background: #FFAB00; z-index: -2; } .jp-card.jp-card-mastercard.jp-card-identified .jp-card-front .jp-card-logo.jp-card-mastercard, .jp-card.jp-card-mastercard.jp-card-identified .jp-card-back .jp-card-logo.jp-card-mastercard { box-shadow: none; } .jp-card.jp-card-mastercard.jp-card-identified .jp-card-front:before, .jp-card.jp-card-mastercard.jp-card-identified .jp-card-back:before { background-color: #0061A8; } .jp-card.jp-card-mastercard.jp-card-identified .jp-card-logo.jp-card-mastercard { opacity: 1; } .jp-card-logo.jp-card-maestro { color: white; font-weight: bold; text-align: center; font-size: 14px; line-height: 36px; z-index: 1; text-shadow: 1px 1px rgba(0, 0, 0, 0.6); } .jp-card-logo.jp-card-maestro:before, .jp-card-logo.jp-card-maestro:after { content: " "; display: block; width: 36px; top: 0; position: absolute; height: 36px; border-radius: 18px; } .jp-card-logo.jp-card-maestro:before { left: 0; background: #0064CB; z-index: -1; } .jp-card-logo.jp-card-maestro:after { right: 0; background: #CC0000; z-index: -2; } .jp-card.jp-card-maestro.jp-card-identified .jp-card-front .jp-card-logo.jp-card-maestro, .jp-card.jp-card-maestro.jp-card-identified .jp-card-back .jp-card-logo.jp-card-maestro { box-shadow: none; } .jp-card.jp-card-maestro.jp-card-identified .jp-card-front:before, .jp-card.jp-card-maestro.jp-card-identified .jp-card-back:before { background-color: #0B2C5F; } .jp-card.jp-card-maestro.jp-card-identified .jp-card-logo.jp-card-maestro { opacity: 1; } .jp-card-logo.jp-card-dankort { width: 60px; height: 36px; padding: 3px; border-radius: 8px; border: #000000 1px solid; background-color: #FFFFFF; } .jp-card-logo.jp-card-dankort .dk { position: relative; width: 100%; height: 100%; overflow: hidden; } .jp-card-logo.jp-card-dankort .dk:before { background-color: #ED1C24; content: \'\'; position: absolute; width: 100%; height: 100%; display: block; border-radius: 6px; } .jp-card-logo.jp-card-dankort .dk:after { content: \'\'; position: absolute; top: 50%; margin-top: -7.7px; right: 0; width: 0; height: 0; border-style: solid; border-width: 7px 7px 10px 0; border-color: transparent #ED1C24 transparent transparent; z-index: 1; } .jp-card-logo.jp-card-dankort .d, .jp-card-logo.jp-card-dankort .k { position: absolute; top: 50%; width: 50%; display: block; height: 15.4px; margin-top: -7.7px; background: white; } .jp-card-logo.jp-card-dankort .d { left: 0; border-radius: 0 8px 10px 0; } .jp-card-logo.jp-card-dankort .d:before { content: \'\'; position: absolute; top: 50%; left: 50%; display: block; background: #ED1C24; border-radius: 2px 4px 6px 0px; height: 5px; width: 7px; margin: -3px 0 0 -4px; } .jp-card-logo.jp-card-dankort .k { right: 0; } .jp-card-logo.jp-card-dankort .k:before, .jp-card-logo.jp-card-dankort .k:after { content: \'\'; position: absolute; right: 50%; width: 0; height: 0; border-style: solid; margin-right: -1px; } .jp-card-logo.jp-card-dankort .k:before { top: 0; border-width: 8px 5px 0 0; border-color: #ED1C24 transparent transparent transparent; } .jp-card-logo.jp-card-dankort .k:after { bottom: 0; border-width: 0 5px 8px 0; border-color: transparent transparent #ED1C24 transparent; } .jp-card.jp-card-dankort.jp-card-identified .jp-card-front:before, .jp-card.jp-card-dankort.jp-card-identified .jp-card-back:before { background-color: #0055C7; } .jp-card.jp-card-dankort.jp-card-identified .jp-card-logo.jp-card-dankort { opacity: 1; } .jp-card-container { -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; width: 350px; max-width: 100%; height: 200px; margin: auto; z-index: 1; position: relative; } .jp-card { font-family: "Helvetica Neue"; line-height: 1; position: relative; width: 100%; height: 100%; min-width: 315px; border-radius: 10px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; transition: all 400ms linear; } .jp-card > *, .jp-card > *:before, .jp-card > *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: inherit; } .jp-card.jp-card-flipped { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .jp-card .jp-card-front, .jp-card .jp-card-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; transition: all 400ms linear; width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; border-radius: 10px; background: #DDD; } .jp-card .jp-card-front:before, .jp-card .jp-card-back:before { content: " "; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; border-radius: 10px; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; transition: all 400ms ease; } .jp-card .jp-card-front:after, .jp-card .jp-card-back:after { content: " "; display: block; } .jp-card .jp-card-front .jp-card-display, .jp-card .jp-card-back .jp-card-display { color: white; font-weight: normal; opacity: 0.5; -webkit-transition: opacity 400ms linear; -moz-transition: opacity 400ms linear; transition: opacity 400ms linear; } .jp-card .jp-card-front .jp-card-display.jp-card-focused, .jp-card .jp-card-back .jp-card-display.jp-card-focused { opacity: 1; font-weight: 700; } .jp-card .jp-card-front .jp-card-cvc, .jp-card .jp-card-back .jp-card-cvc { font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; font-size: 14px; } .jp-card .jp-card-front .jp-card-shiny, .jp-card .jp-card-back .jp-card-shiny { width: 50px; height: 35px; border-radius: 5px; background: #CCC; position: relative; } .jp-card .jp-card-front .jp-card-shiny:before, .jp-card .jp-card-back .jp-card-shiny:before { content: " "; display: block; width: 70%; height: 60%; border-top-right-radius: 5px; border-bottom-right-radius: 5px; background: #d9d9d9; position: absolute; top: 20%; } .jp-card .jp-card-front .jp-card-logo { position: absolute; opacity: 0; right: 5%; top: 8%; -webkit-transition: 400ms; -moz-transition: 400ms; transition: 400ms; } .jp-card .jp-card-front .jp-card-lower { width: 80%; position: absolute; left: 10%; bottom: 30px; } @media only screen and (max-width: 480px) { .jp-card .jp-card-front .jp-card-lower { width: 90%; left: 5%; } } .jp-card .jp-card-front .jp-card-lower .jp-card-cvc { visibility: hidden; float: right; position: relative; bottom: 5px; } .jp-card .jp-card-front .jp-card-lower .jp-card-number { font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; font-size: 24px; clear: both; margin-bottom: 30px; } .jp-card .jp-card-front .jp-card-lower .jp-card-expiry { font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; letter-spacing: 0em; position: relative; float: right; width: 25%; } .jp-card .jp-card-front .jp-card-lower .jp-card-expiry:before, .jp-card .jp-card-front .jp-card-lower .jp-card-expiry:after { font-family: "Helvetica Neue"; font-weight: bold; font-size: 7px; white-space: pre; display: block; opacity: .5; } .jp-card .jp-card-front .jp-card-lower .jp-card-expiry:before { content: attr(data-before); margin-bottom: 2px; font-size: 7px; text-transform: uppercase; } .jp-card .jp-card-front .jp-card-lower .jp-card-expiry:after { position: absolute; content: attr(data-after); text-align: right; right: 100%; margin-right: 5px; margin-top: 2px; bottom: 0; } .jp-card .jp-card-front .jp-card-lower .jp-card-name { text-transform: uppercase; font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; font-size: 20px; max-height: 45px; position: absolute; bottom: 0; width: 190px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: horizontal; overflow: hidden; text-overflow: ellipsis; } .jp-card .jp-card-back { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .jp-card .jp-card-back .jp-card-bar { background-color: #444; background-image: -webkit-linear-gradient(#444, #333); background-image: linear-gradient(#444, #333, , , , , , , , ); width: 100%; height: 20%; position: absolute; top: 10%; } .jp-card .jp-card-back:after { content: " "; display: block; background-color: #FFF; background-image: -webkit-linear-gradient(#FFF, #FFF); background-image: linear-gradient(#FFF, #FFF, , , , , , , , ); width: 80%; height: 16%; position: absolute; top: 40%; left: 2%; } .jp-card .jp-card-back .jp-card-cvc { position: absolute; top: 40%; left: 85%; -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; transition-delay: 600ms; } .jp-card .jp-card-back .jp-card-shiny { position: absolute; top: 66%; left: 2%; } .jp-card .jp-card-back .jp-card-shiny:after { content: "This card has been issued by Jesse Pollak and is licensed for anyone to use anywhere for free.\AIt comes with no warranty.\A For support issues, please visit: github.com/jessepollak/card."; position: absolute; left: 120%; top: 5%; color: white; font-size: 7px; width: 230px; opacity: .5; } .jp-card.jp-card-identified { box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); } .jp-card.jp-card-identified .jp-card-front, .jp-card.jp-card-identified .jp-card-back { background-color: #000; background-color: rgba(0, 0, 0, 0.5); } .jp-card.jp-card-identified .jp-card-front:before, .jp-card.jp-card-identified .jp-card-back:before { -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; transition: all 400ms ease; background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 15% 80%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%); background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 15% 80%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), linear-gradient(-25deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%); opacity: 1; } .jp-card.jp-card-identified .jp-card-front .jp-card-logo, .jp-card.jp-card-identified .jp-card-back .jp-card-logo { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); } .jp-card.jp-card-identified.no-radial-gradient .jp-card-front:before, .jp-card.jp-card-identified.no-radial-gradient .jp-card-back:before { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%); background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), linear-gradient(-25deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%); } ');;
},{"sassify":5}]},{},[8]);
/*Payment.formatCardNumber=function($el, e){
//$($el).on('keypress',function(){console.log("keypress");});
//$($el).on('keypress', Payment.restrictCardNumber);
//formatCardNumber
//$($el).on('keypress', Payment.formatCardNumber);
//formatCardNumberOrig.call(this, $el, e);
};*/
/*Payment.formatCardNumber=function($el, e){
};*/
$(document).ready(function () {
var today = new Date();
var fullYear = today.getFullYear().toString();
//console.log("fullYear",fullYear);
var shortYear=+fullYear.slice(-2);
//console.log($('select[name=myexpiryyear]').html();
//console.log("shortYear",shortYear);
var init=$('select[name=myexpiryyear]').html(),
modified=init,
i=0;
for (i;i<20;i++){
modified+='<option value="'+(shortYear+i)+'">'+(shortYear+i)+'</option>'
}
$('select[name=myexpiryyear]').html(modified);
$('form').card({
// a selector or DOM element for the container
// where you want the card to appear
container: '.card-wrapper', // *required*
formatting:true
// all of the other options from above
});
var setExpiry=function(dateIndex){
console.log("year chosen:",this.value);
var expiry=$('input[name=expiry]').val();
console.log("expiry",expiry);
var expArray=expiry.split("/");
expArray[dateIndex]=this.value;
console.log("expArray",expArray);
expiry=expArray[0]+"/"+expArray[1];
$('input[name=expiry]').val(expiry);
$('.jp-card-expiry').html(expiry);
}
$('select[name=myexpiryyear]').on('change', function(){
console.log("year chosen:",this.value);
var expiry=$('input[name=expiry]').val();
console.log("expiry",expiry);
var expArray=expiry.split("/");
expArray[1]=this.value;
console.log("expArray",expArray);
expiry=expArray[0]+"/"+expArray[1];
$('input[name=expiry]').val(expiry);
$('.jp-card-expiry').html(expiry);
});
$('select[name=myexpirymonth]').on('change', function(){
console.log("month chosen:",this.value);
var expiry=$('input[name=expiry]').val();
console.log("expiry",expiry);
var expArray=expiry.split("/");
expArray[0]=this.value;
console.log("expArray",expArray);
expiry=expArray[0]+"/"+expArray[1];
$('input[name=expiry]').val(expiry);
$('.jp-card-expiry').html(expiry);
});
//Payment.restrictNumeric(el);//force digits only
//QJ.on(el, 'keypress', restrictCardNumber);//gets the type of card; prevents too many digits
//QJ.on(el, 'keypress', formatCardNumber);//places blanks when needed
//QJ.on(el, 'keydown', formatBackCardNumber);//not sure
//QJ.on(el, 'keyup', setCardType);//displays nice card colours
//QJ.on(el, 'paste', reFormatCardNumber);//formatCardNumber when paste
//goals below:
//prevent too many digits
//places blanks when needed
//displays nice card colours
//formatCardNumber when paste
});