Plugins & SDKsReferencias APIAyudaForoReunión TécnicaFAQs
Referencias API

Tokenización de tarjeta

Tokeniza tarjetas de forma segura y sencilla con NetpayJS

NetpayJS es nuestra potente librería que te permite tokenizar los datos de tarjetas de tus clientes de manera rápida y segura, sin necesidad de manejar información sensible directamente en tu sitio web o aplicación.

Dos opciones de integración:

  1. CDN: Importa NetpayJS directamente desde nuestra red de entrega de contenido (CDN) para una implementación rápida y sin complicaciones.
  2. Descarga local: Descarga la librería y guárdala en tu proyecto para tener un mayor control y personalización.

¿Cómo funciona?

NetpayJS se encarga de encriptar los datos bancarios ingresados por tus clientes en tu formulario de pago y los envía de forma segura a nuestros servidores. Una vez procesada la información, Netpay te devuelve un token único que representa la tarjeta del cliente. Este token puede ser utilizado para iniciar transacciones a través de nuestras APIs, sin necesidad de exponer los datos originales de la tarjeta.

Flexibilidad para desarrolladores

Si prefieres crear tu propio formulario de pago personalizado, NetpayJS te ofrece la función NetPay.token.create(). Esta función te permite generar tokens de tarjeta de forma independiente, sin necesidad de utilizar el formulario predeterminado de la librería.

CDN: https://docs.netpay.mx/cdn/v1.3/netpay.min.js

🚧

¡Atención! Datos cruciales para 3DS 2.0 en la tokenización

Durante el proceso de tokenización, se generan tres datos esenciales para el correcto funcionamiento de 3D Secure 2.0:

  • deviceFingerPrint: Huella digital única del dispositivo del cliente.
  • deviceInformation: Información detallada sobre el dispositivo (sistema operativo, navegador, etc.).
  • sessionId: Este dato es exactamente el mismo que el deviceFingerPrint.

¡Importante! Asegúrate de guardar estos datos, ya que deberás incluirlos en la solicitud de pago que envíes a nuestro endpoint /v3.5/charge. Sin esta información, la autenticación 3DS 2.0 podría no funcionar correctamente.

Ejecutar pantalla de tokenizacion creada por Netpay

Utiliza este código de ejemplo para integrar fácilmente la librería NetpayJS en tu proyecto y empezar a tokenizar tarjetas de forma segura.

Copia y pega: Simplemente copia y pega el código en tu proyecto para implementar el formulario de tokenización de Netpay.

Visualiza el resultado: Para ver cómo se verá el formulario en tu sitio web, consulta la pestaña Result en la tabla de abajo.

Respuesta de la tokenizacion:

{  
    "token": "token_q8L5Bf-3yL1y0LQv4EUY7e1vV86WA",  
    "lastFourDigits": "0002",  
    "brand": "visa",  
    "bank": "ABC CAPITAL",  
    "type": "debit",  
    "country": "MX",  
    "scheme": "debit",  
    "cardPrefix": "400000"  
}

Al ejecutar esta pantalla con los datos de una tarjeta, se obtendrán tres datos clave para el correcto funcionamiento del 3DS 2.0.

Por ejemplo:

  1. deviceFingerPrint: 1721779181755
  2. sessionId: 1721779181755 (Es el mismo dato que el deviceFingerPrint)
  3. deviceInformation: 
{  
    "deviceChannel": "Browser",  
    "httpBrowserColorDepth": 24,  
    "httpBrowserJavaEnabled": "FALSE",  
    "httpBrowserJavaScriptEnabled": "TRUE",  
    "httpBrowserLanguage": "es",  
    "httpBrowserScreenHeight": 687,  
    "httpBrowserScreenWidth": 1718,  
    "httpBrowserTimeDifference": 360  
}


Personaliza y adapta el formulario de tokenizacion a tu gusto

🚧

Importante saber utilizar el atributo simpleUse en la tokenizacion

El atributo simpleUse en la tokenización te permite controlar cómo se utilizarán los tokens generados. Aquí te explicamos cómo usarlo de manera efectiva:

  • simpleUse: false: Utiliza esta opción cuando desees guardar los tokens de tarjeta para transacciones futuras. En este caso, deberás solicitar el CVV, CVC o CID nuevamente en cada nueva transacción para garantizar la seguridad.
  • simpleUse: true: Elige esta opción si el token solo se utilizará para una transacción única y no deseas guardarlo.

❗️

Comportamiento del atributo saveCard y simpleUse en transacciones con tokenización:

Al utilizar el atributo saveCard en una solicitud de pago (v3.5/charge), se activa la funcionalidad de guardado de la tarjeta. Para garantizar que el token generado incluya el CVV/CVC/CID en la primera transacción y así poder realizar una autorización completa, es obligatorio establecer el atributo simpleUse en true.

¿Qué sucede después de la primera transacción?

  • Almacenamiento del token: Una vez procesada la primera transacción, la tarjeta tokenizada se almacena en Netpay y se asocia a un cliente nuevo que se crea automáticamente utilizando los datos de facturación (billing) proporcionados en la solicitud.
  • Pagos subsiguientes: En todas las transacciones posteriores que utilicen este token, es indispensable incluir el atributo cvv en el objeto JSON de la solicitud, incluso si ya se ha tokenizado la tarjeta, favor de revisar en la seccion de pago.

NetPayJS te ofrece la flexibilidad de crear formularios de pago personalizados. Con la función NetPay.token.create(), puedes generar tokens de tarjeta sin necesidad de utilizar el formulario predeterminado de la librería.

¡Atención, desarrollador!

  • Seguridad ante todo: Al utilizar esta función, es fundamental que no almacenes información bancaria sin tokenizar en tu código fuente. Utiliza variables temporales para pasar los datos a la función y obtener el token de forma segura.
  • Certificación obligatoria: Tu implementación será validada en nuestro entorno Sandbox antes de pasar a producción.
  • Cambios en el código: Cualquier modificación que afecte el flujo de pago requerirá una nueva certificación con NetPay.
<html>

<head>
    <script type="text/javascript" src="https://docs.netpay.mx/cdn/v1.3/netpay.min.js"></script>
</head>

<body style="padding: 50px;">
    <script>
        let deviceFingerPrint;
        NetPay.setSandboxMode(true); // Esta línea se debe de llamar antes de la generación del device fingerprint

        //La generación del device fingerprint debe de estar al momento en que se visualiza el formulario de pago
        function generateDevice(callback) {
            deviceFingerPrint = NetPay.form.generateDeviceFingerPrint();
            callback();
        }
        
        generateDevice(function() { 
            console.log(deviceFingerPrint);
            let cardInformation = {
                cardNumber: "4000000000000002",
                expMonth: "04",     
                expYear: "25",
                cvv2: "999",
                vault: true,
                simpleUse:false,//true si no se va hacer guardado de tarjeta o false si se realizara guardado de tarjeta
                deviceFingerPrint : deviceFingerPrint
            };
            NetPay.setApiKey("pk_netpay_JGFtQNUFIENMlhkoBXdgiozmQ");

            var validateNumber = NetPay.card.validateNumber(cardInformation.cardNumber);
            var validateExpiry = NetPay.card.validateExpiry(cardInformation.expMonth, cardInformation.expYear);
            var validateCVV = NetPay.card.validateCVV(cardInformation.cvv2, cardInformation.cardNumber);
            var validateNumberLength = NetPay.card.validateNumberLength(cardInformation.cardNumber);

            if (!validateNumberLength || !validateNumber 
                || !validateExpiry || !validateCVV) {
                alert("Por favor, verifica los datos de tu tarjeta");
                return false;
            }
            NetPay.token.create(cardInformation, success, error);

            function success(e) {
                console.log("Token created successfully");
                console.log(e.message.data);
            }

            function error(e) {
                console.log("Something went wrong!");
                console.log(e);
            }
          
          	let deviceInformation = NetPay.form.deviceInformation();
            console.log(deviceInformation);
        });
    </script>
</body>
</html>