conekta-card-tokenizer
Version:
115 lines (93 loc) • 3.13 kB
HTML
<html lang="es">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Conekta - Primero Cargo</title>
<!-- Incluir jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Incluir Conekta.js -->
<script
type="text/javascript"
data-conekta-public-key="key_KJysdbf6PotS2ut2"
src="../dist/conekta.js"></script>
<script type="text/javascript">
jQuery(function($) {
var conektaSuccessResponseHandler = function(token) {
var $form = $('#payment-form');
var card_token = token.id;
// Insert the token_id into the form
$form.append($('<input type="hidden" name="card_token" />').val(card_token));
console.log("success");
// Submit the form data to the server
//$form.get(0).submit();
};
var conektaErrorResponseHandler = function(response) {
var $form = $('#payment-form');
console.log("error");
// Show the errors on the form
$form.find('.payment-errors').text(response.message);
$form.find('button').prop('disabled', false);
};
$('#payment-form').submit(function(event) {
var $form = $(this);
// Disable the submit button to prevent repeated clicks
$form.find('button').prop('disabled', true);
Conekta.Token.create($('#payment-form'));
// Prevent the form from submitting with the default action
return false;
});
});
</script>
</head>
<body>
<h1>Cargo de $100 MXN por Conekta</h1>
<form action="" method="POST" id="payment-form">
<span class="payment-errors"></span>
<div class="form-row hidden">
<label>
<span>Monto</span>
<input type="text" size="12" value="10000"/>
</label>
</div>
<div class="form-row hidden">
<label>
<span>Descripción</span>
<input type="text" size="40" value="Mi Primera Compra"/>
</label>
</div>
<div class="form-row hidden">
<label>
<span>Moneda</span>
<input type="text" size="3" value="MXN"/>
</label>
</div>
<div class="form-row">
<label>
<span>Tarjetahabiente</span>
<input type="text" size="20" data-conekta="card[name]" value="Julian Ceballos"/>
</label>
</div>
<div class="form-row">
<label>
<span>Número</span>
<input type="text" size="20" data-conekta="card[number]" value="4242424242424242"/>
</label>
</div>
<div class="form-row">
<label>
<span>CVC</span>
<input type="text" size="4" data-conekta="card[cvc]" value="123"/>
</label>
</div>
<div class="form-row">
<label>
<span>Expiración (MM/YYYY)</span>
<input type="text" size="2" data-conekta="card[exp_month]" value="10"/>
</label>
<span> / </span>
<input type="text" size="4" data-conekta="card[exp_year]" value="2019"/>
</div>
<button type="submit">Completar Pago</button>
</form>
</body>
</html>