Skip to content

Instantly share code, notes, and snippets.

@devfaysal

devfaysal/credit_card_input_field.php

Created May 11, 2017 04:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save devfaysal/1e5477c0e5ba888b718f4e1a9ad1c7b6 to your computer and use it in GitHub Desktop.
Save devfaysal/1e5477c0e5ba888b718f4e1a9ad1c7b6 to your computer and use it in GitHub Desktop.
Download ZIP
Format Credit card number while typing in an input field, store, view only last 4 digit and mask the rest.
Raw
credit_card_input_field.php
<?php
//storing the card number in session just for testing, in real, it will be saved in database.
session_start();
if(isset($_POST['submit'])){
$string = str_replace(' ', '', $_POST['card']);
$_SESSION['card'] = $string;
}
echo $_SESSION['card'];
?>
<html>
<head>
<title>Your Website Title</title>
</head>
<body>
<form action="" method="POST">
<input class="cc-num" id="cc-num" name="card"/>
<input type="submit" name="submit" />
</form>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!--Download from https://github.com/stripe/jquery.payment/blob/master/lib/jquery.payment.js-->
<script type="text/javascript" src="jquery.payment.js"></script>
<script type="text/javascript">
$('#cc-num').on('keyup', function(){
$('input.cc-num').payment('formatCardNumber');
});
var changed = document.getElementById('cc-num');
num_value = '<?php echo $_SESSION['card'];?>';
changed.value = new Array(num_value.length-3).join('x') + num_value.substr(num_value.length-4, 4);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment