- 29 Jan 2025
- 2 Minutes to read
- Contributors
- Print
- DarkLight
Tokenización de clientes
- Updated on 29 Jan 2025
- 2 Minutes to read
- Contributors
- Print
- DarkLight
Esta funcionalidad permite guardar de manera segura los datos de las tarjetas de crédito de sus clientes, por medio de la creación de un token con el cuál podrás realizar cobros recurrentes o futuros pagos.
tokenización cliente
Including ePayco.js
<script src="https://checkout.epayco.co/epayco.min.js"></script>
Ejemplo
HTML
<form action="/pago" method="POST" id="customer-form">
<!-- div donde se imprimiran los errores (opcional) -->
<div class="card-errors"></div>
<!-- datos necesarios para tokenizar -->
<div class="form-group">
<label> Nombre del usuario de tarjeta </label>
<input type="text" data-epayco="card[name]">
</div>
<div class="form-group">
<label>Email</label>
<input type="text" data-epayco="card[email]">
</div>
<div class="form-group">
<label> Número de la tarjeta de crédito </label>
<input type="text" data-epayco="card[number]">
</div>
<div class="form-group">
<label>CVC</label>
<input type="text" size="4" data-epayco="card[cvc]">
</div>
<div class="form-group">
<label>Mes de expiración(MM)</label>
<input type="text" data-epayco="card[exp_month]">
<span>Año de expiración(AAAA)</span>
<input type="text" data-epayco="card[exp_year]">
</div>
<!-- botón con la acción para enviar el formulario -->
<button type="submit">¡Pay!</button>
</form>
JAVASCRIPT
// Autenticación con su public_key (Requerido)
ePayco.setPublicKey('YOU_PUBLIC_API_KEY');
$('#customer-form').submit(function(event) {
//detiene el evento automático del formulario
event.preventDefault();
//captura el contenido del formulario
var $form = $(this);
//deshabilita el botón para no acumular peticiones
$form.find("button").prop("disabled", true);
//hace el llamado al servicio de tokenización
ePayco.token.create($form, function(error, token) {
//habilita el botón al obtener una respuesta
$form.find("button").prop("disabled", false);
if(!error) {
//si la petición es correcta agrega un input "hidden" con el token como valor
$form.append($('<input type="hidden" name="epaycoToken">').val(token));
//envia el formulario para que sea procesado
$form.get(0).submit();
} else {
//muestra errores que hayan sucedido en la transacción
$('.customer-errors').text(error.data.description);
}
});
});
Html
Crea un formulario html con las siguientes etiquetas dentro de los inputs:
Etiqueta | Información tarjeta de crédito |
---|---|
data-epayco="card[name]" | Nombre titular |
data-epayco="card[email]" | Email para notificación |
data-epayco="card[number]" | Número |
data-epayco="card[cvc]" | Código de seguridad |
data-epayco="card[exp_month] | Mes de expiración (MM) |
data-epayco="card[exp_year]" | Año de expiración (YYYY) |
Javascript
Para su implementación es necesario el uso de jQuery.
Pasos
- Se crea un evento que captura el submit del formulario, donde event.preventDefault() detiene el evento por defecto del envío.
- Se captura el contenido del formulario en una variable $form para ser enviado al método de ePayco.
- En el método ePayco.token.create recibe como parámetro el contenido del formulario capturado en la variable $form en donde será enviado a nuestros servidores y creará el token devolviendolo en un callback que notificará si el proceso fue exitoso o contiene algún error.
- Se bloquea la acción del botón para que esté inhabilitado hasta que se reciba una respuesta.
- El token viene contenido en token donde podrás usarlo para realizar sus cobros.
- Se agrega al formulario un campo tipo hidden y se le da como valor el token, para que al momento de ser procesado quede accesible para su uso.
- Despues de agregar el token.id al form, se podrá enviar la información a su servidor. Esta información será enviada haciendo HTTP POST al Url que está en action dentro del formulario. Se recomienta ejecutar la llamada submit() dentro del formulario en lugar de usar el wrapper de jQuery para evitar un loop infinito.
tokenización SDK
Haciendo uso de nuestros SDK'S con los siguientes parámetros:
Nombre | Tipo | Descripción |
---|---|---|
card[number] | String | Número de la tarjeta de crédito |
card[exp_month] | String | Mes de expiración |
card[exp_year] | String | Año de expiración |
card[cvc] | String | Código de seguridad |
Puede emplear la librería que se adapte más a las necesidades de su negocio:
APIFY
Con los siguientes endpoints disponibles de APIFY puede realizar el procedimiento de tokenización de clientes: