Código Javascript:
Ver original
<script> $(document).ready(function(){ $('.version').click(function(){ var callType = $(this).attr('id'); if(callType == "basic"){ $('.advanced').slideUp(350); $('#advanced').removeClass('active'); $(this).addClass('active'); } if(callType == "advanced"){ $('.advanced').slideDown({queue: false}, 350); $('#basic').removeClass('active'); $(this).addClass('active'); } }); // CVC Input security $("input[name='card_cvc']").focus(function(){$(this).attr('type','text');}); $("input[name='card_cvc']").blur(function(){$(this).attr('type','password');}); // Input formats // Cards $('input[name="card_number"]').formatter({ 'pattern': '{{9999}} {{9999}} {{9999}} {{9999}}' }); $('input[name="card_exp"]').formatter({ 'pattern': '{{99}} / {{9999}}' }); $('input[name="card_cvc"]').formatter({ 'pattern': '{{999}}' }); }); function validar(){ var numtarjeta=$('input[name="card_number"]').val(); var nombretarjeta=$('input[name="customer_name"]').val(); var cvc=$('input[name="card_cvc"]').val(); var card_exp=$('input[name="card_exp"]').val(); var resultado=card_exp.split(" "); var mes = $.trim(resultado[0]); var ano = $.trim(resultado[2]); var numtarjetaerror=Conekta.card.validateNumber(numtarjeta); var expiraerror=Conekta.card.validateExpirationDate(mes, ano); var cvcerror=Conekta.card.validateCVC(cvc); var guardarerror=" "; if(numtarjetaerror==false){ guardarerror+="La tarjeta introducida es incorrecta\n"; } if(expiraerror==false){ guardarerror+="La fecha de expiracion no es correcta\n"; } if(cvcerror==false){ guardarerror+="El codigo de verificacion no es correcto\n"; } if(numtarjetaerror==true && expiraerror==true && cvcerror==true){ enviartarjeta(nombretarjeta,numtarjeta,ano,mes,cvc); }else{ alert(guardarerror); } $("#enviarinfo").prop("disabled", true); } function enviartarjeta(nombretarjeta,numtarjeta,ano,mes,cvc){ Conekta.setPublishableKey("key_Cyt1btNDJrsZ5m2xjmKTekg"); Conekta.getPublishableKey(); /* Los parámetros pueden ser un objeto de javascript, una forma de HTML o una forma de JQuery */ var errorResponseHandler, successResponseHandler, tokenParams; tokenParams = { "card": { "number": numtarjeta, "name": nombretarjeta, "exp_year": ano, "exp_month": mes, "cvc": cvc } }; /* Después de tener una respuesta exitosa, envía la información al servidor */ successResponseHandler = function(token) { return $.post('cargotarjeta.php?token_id=' + token.id, function() { // return document.location = 'cargotarjeta.php'; }); }; /* Después de recibir un error */ errorResponseHandler = function(error) { $("#tarjeta-errors").text(response.message); // return console.log(error.message); }; /* Tokenizar una tarjeta en Conekta */ Conekta.token.create(tokenParams, successResponseHandler, errorResponseHandler); // window.location.assign("http://localhost/a/test/cargotarjeta.php"); } </script>
Este es el HTML
Código HTML:
Ver original
</head> <body> <form method="post"> <div class='input_box'> <div class="descripciones"> </div> <input name='customer_name' type='text' class="infofinanciera" size="30" data-conekta="card[name]"> </div> <div class='input_box'> <div class="descripciones"> </div> <input name='card_number' value="4242424242424242" placeholder='' type='text' class="infofinanciera" size="12" data-conekta="card[number]"> </div> <div class='input_box'> <div class="descripciones"> </div> <input name='card_exp' placeholder='' type='text' class="infofinanciera" size="3" > <br> </div> <div class='input_box'> <div class="descripciones"> </div> <input name='card_cvc' placeholder='' type='text' class="infofinanciera" size="1"data-conekta="card[cvc]"> <br> <input type="submit" value="validar" onClick="validar()" id="enviarinfo"> </form> </div>