Skip to content

Instantly share code, notes, and snippets.

@drabiter

drabiter/register_card.html

Last active August 29, 2015 14:08
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 drabiter/090bfb1c3d426fc25e7d to your computer and use it in GitHub Desktop.
Save drabiter/090bfb1c3d426fc25e7d to your computer and use it in GitHub Desktop.
Download ZIP
Registering Card HTML & JS
Raw
register_card.html
<html>
<head>
<title>Register Travel Card</title>
</head>
<body>
<h1>Register Travel Card</h1>
<form action="register_card.php" method="POST" id="card-register-form">
<p>
<label>Card Number</label>
<input class="card-number" value="4111111111111111" size="20" type="text" autocomplete="off"/>
</p>
<p>
<label>Expiration (MM/YYYY)</label>
<input class="card-expiry-month" value="12" placeholder="MM" size="2" type="text" />
<span> / </span>
<input class="card-expiry-year" value="2020" placeholder="YYYY" size="4" type="text" />
</p>
<p>
<label>PIN</label>
<input class="card-pin" name="card-pin" value="123456" size="20" type="text" autocomplete="off"/>
</p>
<input id="saved-token-id" name="saved-token-id" type="hidden" />
<input id="masked-card" name="masked-card" type="hidden" />
<span id="message"></span>
<button class="submit-button" type="submit">Save</button>
</form>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://api.sandbox.veritrans.co.id/v2/assets/js/veritrans.js"></script>
<script type="text/javascript">
$(function(){
/* Change with Production API URL when you're ready to go live. */
Veritrans.url = "https://api.sandbox.veritrans.co.id/v2/card/register";
/* Use your own KEY from Merchant Administration Portal. */
Veritrans.client_key = "<YOUR_CLIENT_KEY>";
/* parameters are put inside a function */
var card = function(){
return {
'card_number' : $(".card-number").val(),
'card_exp_month' : $(".card-expiry-month").val(),
'card_exp_year' : $(".card-expiry-year").val()
}
};
/* Handler when user click the 'Pay' button. */
$('.submit-button').click(function(event){
event.preventDefault();
$(this).attr("disabled", "disabled");
Veritrans.token(card, callback);
return false;
});
/* Callback function to handle asynchronous event */
function callback(response) {
if (response.status_code == '200') {/* Normal transaction. */
// store token data in input #token_id and then submit form to merchant server
$("#saved-token-id").val(response.saved_token_id);
$("#masked-card").val(response.masked_card);
$("#card-register-form").submit();
} else {/* Fail to acquire token */
// Enable the submit button
$('.submit-button').removeAttr('disabled');
// Show status message.
$('#message').text(response.status_message);
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment