Last active
August 29, 2015 14:14
-
-
Save pazguille/e506a121016a0e66e801 to your computer and use it in GitHub Desktop.
Mango: Obtener los datos de tarjeta y crear un token.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="es"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Mango</title> | |
| </head> | |
| <body> | |
| <form id="form" action="/your-server" method="POST"> | |
| <fieldset> | |
| <div> | |
| <label for="email">Email</label> | |
| <input type="email" id="email" name="email" required> | |
| </div> | |
| <div> | |
| <label for="amount">Monto a pagar</label> | |
| <input type="text" id="amount" name="amount" required> | |
| </div> | |
| <div> | |
| <label for="holdername">Nombre que figura en la tarjeta</label> | |
| <input type="text" id="holdername" required> | |
| </div> | |
| <div> | |
| <label for="card">Número de la tarjeta</label> | |
| <input type="number" id="card" maxlength="16" required> | |
| </div> | |
| <div> | |
| <label for="type">Tipo de tarjeta</label> | |
| <select id="type"> | |
| <option value="visa">Visa</option> | |
| <option value="amex">American Express</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="month">Mes de expiración</label> | |
| <input type="number" id="month" maxlength="2" required> | |
| </div> | |
| <div> | |
| <label for="year">Año de expiración</label> | |
| <input type="number" id="year" maxlength="4" required> | |
| </div> | |
| <div> | |
| <label for="ccv">Código de seguridad</label> | |
| <input type="text" id="ccv" required> | |
| </div> | |
| </fieldset> | |
| <input type="submit" value="Pagar ahora!"> | |
| </form> | |
| <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> | |
| <script src="https://js.getmango.com/v1/mango.js"></script> | |
| <script> | |
| // Se guarda la API Key pública de tu comercio | |
| var PUBLIC_API_KEY = 'API Key pública de tu comercio'; | |
| // Se configura la API Key en el JavaScript SDK | |
| Mango.setPublicKey(PUBLIC_API_KEY); | |
| // Creamos esta variable para revenir el envio multiple del formulario | |
| var submission = false; | |
| var $form = $('#form'); | |
| $form.on('submit', function(event) { | |
| // Se previene envíar el formulario multiples veces mientras se crea el token | |
| if (submission) { | |
| return false; | |
| } | |
| submission = true; | |
| // Se recolectan los datos de tarjeta | |
| var cardInfo = { | |
| 'number': $('#card').val(), | |
| 'type': $('#type').val(), | |
| 'holdername': $('#holdername').val(), | |
| 'exp_month': $('#month').val(), | |
| 'exp_year': $('#year').val(), | |
| 'ccv': $('#ccv').val() | |
| }; | |
| // Se genera el token de tarjeta | |
| Mango.token.create(cardInfo, handleResponse); | |
| // Se previene el envío de formulario | |
| return false; | |
| }); | |
| // Se define la función de callback | |
| function handleResponse(err, data) { | |
| submission = false; | |
| // Si hay un error, se muestra un mensaje | |
| if (err) { | |
| // mostrar un mensaje | |
| } | |
| // Se obtiene el token generado | |
| var token = data.uid; | |
| // Se crea un campo oculto | |
| var $hidden = $('<input type="hidden" name="token">'); | |
| // Se setea el valor del campo | |
| $hidden.val(token); | |
| // Se agrega el campo oculto al formulario | |
| $form.append($hidden); | |
| // Se envía el formulario a tus servidores | |
| $form[0].submit(); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment