Tokenización de clientes
  • 04 Nov 2021
  • 2 Minutes to read
  • Contributors
  • Dark
    Light

Tokenización de clientes

  • Dark
    Light

Article Summary

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:

EtiquetaInformació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

  1. Se crea un evento que captura el submit del formulario, donde event.preventDefault() detiene el evento por defecto del envío.
  2. Se captura el contenido del formulario en una variable $form para ser enviado al método de ePayco.
  3. 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.
  4. Se bloquea la acción del botón para que esté inhabilitado hasta que se reciba una respuesta.
  5.  El token viene contenido en token donde podrás usarlo para realizar sus cobros.
  6.  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.
  7.  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:

NombreTipoDescripción
card[number] StringNúmero de la tarjeta de crédito
card[exp_month] StringMes de expiración
card[exp_year] StringAño de expiración
card[cvc] StringCó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:


Was this article helpful?

What's Next