Skip to content

Instantly share code, notes, and snippets.

@evo42

evo42/cash.htm

Created April 28, 2015 01:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save evo42/57dabc44cd0793a573a5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save evo42/57dabc44cd0793a573a5 to your computer and use it in GitHub Desktop.
Download ZIP
€cash
Raw
cash.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<title>SEPA.co &middot; cash</title>
<style>
.amount-currency {
font-size: 7em;
}
#transfer-euro, #transfer-cents {
display: inline;
width: 15%;
height: 125px;
font-size: 7em;
border: none;
}
#transfer-euro.active, #transfer-euro:focus, #transfer-cents.active, #transfer-cents:focus {
border: none;
box-shadow: none;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#transfer-cents {
display: none;
position: relative;
top: -0.5em;
font-size: 4em;
width: 1.1em;
}
</style>
<!-- CSS -->
<link href="css/paymentfont.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<div class="amount">
<span class="amount-currency">€</span>
<span class="amount-euro">
<input type="tel" id="transfer-euro" size="1" name="transfer-euro" placeholder="0" autocomplete="off" maxlength="4" value="0"></input>
</span>
<span class="amount-cents">
<input type="tel" id="transfer-cents" size="2" name="transfer-cents" placeholder="00" autocomplete="off" maxlength="2" value="00"></input>
</span>
</div>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
(function($) {
$(function() {
$('#transfer-cents').hide();
$('#transfer-euro').show().val('0').focus();
resizeInput($('#transfer-euro'));
$('#transfer-euro').on('keydown', function(event) {
if (parseInt($(this).val(), 10) == 0) {
$(this).val('').show().focus();
}
if (event.which == 188 || event.which == 190) {
// $(this).val($(this).val());
$('#transfer-cents').show().val('').focus();
event.preventDefault();
return false;
}
if (event.which == 39) {
if ($(this).getCursorPosition() == $(this).val().length) {
$('#transfer-cents').show().focus();
event.preventDefault();
return false;
}
}
if (!isNumber(event)) {
event.preventDefault();
return false;
}
});
$('#transfer-cents').on('keydown', function(event) {
if (event.which == 37 || event.which == 8) {
// console.log('cursor pos: ' + $(this).getCursorPosition());
if ($(this).getCursorPosition() == 0) {
$('#transfer-euro').show().focus().setCursorToTextEnd();
event.preventDefault();
// return false;
}
}
if (!isNumber(event)) {
event.preventDefault();
return false;
}
});
$('#transfer-euro').on('keyup', function(event) {
resizeInput(this);
var val = parseInt($(this).val(), 10);
if (val == 0 || isNaN(val)) {
val = 0;
}
var amount = val + ',' + $('#transfer-cents').val();
$('#amount-button').text(amount);
$('#amount').val(val + '' + $('#transfer-cents').val());
});
$('#transfer-cents').on('keyup', function(event) {
var euro = parseInt($('#transfer-euro').val(), 10);
if (!euro || isNaN(euro)) {
euro = 0;
}
var val1 = parseInt($(this).val().substr(0, 1));
var val2 = parseInt($(this).val().substr(1, 1));
if (!val1 || isNaN(val1)) {
val1 = 0;
}
if (!val2 || isNaN(val2)) {
val2 = 0;
}
var val = val1 + '' + val2;
var amount = euro + ',' + val;
$('#amount-button').text(amount);
$('#amount').val(euro + '' + val);
});
$('#transfer-cents').on('blur', function(event) {
$('#pay').removeClass('disabled');
var val1 = parseInt($(this).val().substr(0, 1), 10);
var val2 = parseInt($(this).val().substr(1, 1), 10);
var val = val1 + '' + val2;
if (val == '00' || (isNaN(val1) || isNaN(val1) && isNaN(val2))) {
// $(this).val('00');
$(this).val('00').hide();
}
/*if (val > 0 && val < 10) {
$(this).val(val + '0');
}*/
var amount = $('#transfer-euro').val() + ',' + $('#transfer-cents').val();
$('#amount-button').text(amount);
$('#amount').val($('#transfer-euro').val() + '' + $('#transfer-cents').val());
});
$('#number').on('blur', function(event) {
$('#pay').removeClass('disabled');
});
$('#number').on('keyup', function() {
// console.log($(this).val(), cardFromNumber($(this).val()));
var card = cardFromNumber($(this).val());
if (card && card.type) {
$('#card-type').removeClass().addClass('pf ' + card.icon);
if (card.type != 'sepa') {
$('.row-exp').show();
$('.row-cvc').show();
$('.row-sepa').hide();
$('#label-number').text('Credit Card Number');
} else if (card.type == 'sepa') {
$('.row-exp').hide();
$('.row-cvc').hide();
$('.row-sepa').show();
$('#label-number').text('IBAN');
} else {
$('.row-exp').hide();
$('.row-cvc').hide();
$('.row-sepa').hide();
$('#label-number').text('IBAN or Credit Card Number');
}
} else {
$('#card-type').removeClass().addClass('pf pf-card');
$('.row-exp').hide();
$('.row-cvc').hide();
$('.row-sepa').hide();
$('#label-number').text('IBAN or Credit Card Number');
}
});
}); // end of document ready
$.fn.getCursorPosition = function() {
var input = this.get(0);
if (!input) return; // No (input) element found
if ('selectionStart' in input) {
// Standard-compliant browsers
return input.selectionStart;
} else if (document.selection) {
// IE
input.focus();
var sel = document.selection.createRange();
var selLen = document.selection.createRange().text.length;
sel.moveStart('character', -input.value.length);
return sel.text.length - selLen;
}
}
$.fn.setCursorToTextEnd = function() {
var $initialVal = this.val();
this.val($initialVal);
};
})(jQuery); // end of jQuery name space
function resizeInput(input) {
// @todo make me better :-)
var l = 1;
if ($(input).val().length > 0) {
l = $(input).val().length;
}
$(input).attr('size', l);
$(input).css('width', (l * 59) + 'px');
}
defaultFormat = /(\d{1,4})/g;
cards = [
{
type: 'amex',
pattern: /^3[47]/,
format: /(\d{1,4})(\d{1,6})?(\d{1,5})?/,
length: [15],
cvcLength: [3, 4],
luhn: true,
icon: 'pf-credit-card'
}, {
type: 'dankort',
pattern: /^5019/,
format: defaultFormat,
length: [16],
cvcLength: [3],
luhn: true,
icon: 'pf-dankort'
}, {
type: 'dinersclub',
pattern: /^(36|38|30[0-5])/,
format: defaultFormat,
length: [14],
cvcLength: [3],
luhn: true,
icon: 'pf-diners'
}, {
type: 'discover',
pattern: /^(6011|65|64[4-9]|622)/,
format: defaultFormat,
length: [16],
cvcLength: [3],
luhn: true,
icon: 'pf-discover'
}, {
type: 'jcb',
pattern: /^35/,
format: defaultFormat,
length: [16],
cvcLength: [3],
luhn: true,
icon: 'pf-jcb'
}, {
type: 'laser',
pattern: /^(6706|6771|6709)/,
format: defaultFormat,
length: [16, 17, 18, 19],
cvcLength: [3],
luhn: true,
icon: 'pf-credit-card'
}, {
type: 'maestro',
pattern: /^(5018|5020|5038|6304|6759|676[1-3])/,
format: defaultFormat,
length: [12, 13, 14, 15, 16, 17, 18, 19],
cvcLength: [3],
luhn: true,
icon: 'pf-maestro'
}, {
type: 'mastercard',
pattern: /^5[1-5]/,
format: defaultFormat,
length: [16],
cvcLength: [3],
luhn: true,
icon: 'pf-mastercard'
}, {
type: 'sepa',
/*pattern: /^[a-zA-Z]{2}[0-9]{2}[a-zA-Z0-9]{4}[0-9]{7}([a-zA-Z0-9]?){0,16}$/,*/
pattern: /^[a-zA-Z]/,
format: defaultFormat,
length: [16, 17, 18, 19, 20, 21, 22, 23, 24],
cvcLength: [0],
luhn: false,
icon: 'pf-sepa'
}, {
type: 'unionpay',
pattern: /^62/,
format: defaultFormat,
length: [16, 17, 18, 19],
cvcLength: [3],
luhn: false,
icon: 'pf-unionpay'
}, {
type: 'visaelectron',
pattern: /^4(026|17500|405|508|844|91[37])/,
format: defaultFormat,
length: [16],
cvcLength: [3],
luhn: true,
icon: 'pf-visa-electron'
}, {
type: 'visa',
pattern: /^4/,
format: defaultFormat,
length: [13, 14, 15, 16],
cvcLength: [3],
luhn: true,
icon: 'pf-visa'
}
];
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;
}
}
};
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment