Tokenización

¡Guarda de forma segura las tarjetas de tus clientes y realiza cobros recurrentes y cobros de suscripciones de manera sencilla!

Si aún no creaste tu cuenta en Directo Pago, visita primero el siguiente link: https://docs.directopago.com/primeros-pasos

Nuestra solución de Tokenización permite guardar los datos de tarjeta de tus clientes y realizar múltiples cobros a las mismas.

Esto te permite realizar:

  • Cobros recurrentes y suscripciones.

  • Asociar una tarjeta a la cuenta de un usuario de tu sistema una única vez y que la pueda utilizar en múltiples ocasiones.

  • Cobros directamente en tu sistema o página web sin la necesidad de realizar una redirección externa.

¿Cómo funciona?

Para poder utilizar nuestra solución de Tokenización se debe utilizar nuestra SDK Javascript para generar un formulario que se encargará de recolectar los datos de tarjeta de tus clientes de forma segura y guardarlos en nuestra plataforma. Luego de recibir dicha información de forma segura te otorgaremos un identificador que te permitirá, utilizando nuestra API, realizar cobros con la tarjeta guardada.

Paso 1: Importar la SDK Javascript de Directo Pago

El primer paso para generar un botón de pago es incluir la librería JS de la siguiente manera:

<script src="https://static.directopago.com/directopago.min.js"></script>

Paso 2: Crear una instancia de DirectoPago

Para generar una instancia de DirectoPago, necesitaras utilizar tu API Key.

const directoPago = new DirectoPago('API_key');

Para acceder a tu API Key deberás ingresar en el Panel y hacer click en la opción Integración de pago del menú: https://panel.directopago.com/payment-integration

Ambiente de pruebas

Para utilizar la SDK en nuestro ambiente de pruebas, se debe instanciar de la siguiente forma:

const directoPago = new DirectoPago('API_key_test', true);

En este caso, deberás utilizar la API key de tu cuenta de test. Si no sabes cómo obtener una visita: Ambiente de pruebas

Paso 3: Generar el formulario de guardado de tarjetas

Para poder generar un formulario de guardado de tarjetas, se deberá definir un objeto que se pasará por parámetro con los datos que ya se tienen previamente del cliente. Los datos del cliente que no se pasen por parámetro, serán solicitados al mismo cuando llene el formulario, ya que son todos obligatorios.

Los datos necesarios del titular de la tarjeta son:

  • Nombre

  • Apellido

  • Tipo de Documento (ver)

  • Documento

  • Email

Luego de definir el objeto de parámetros, el mismo debe ser utilizando al invocar la función createCardForm junto con el ID del elemento HTML del DOM donde se quiere desplegar el formulario y una función que será la encargada de procesar la respuesta. En esta función se deben guardar los datos recibidos, principalmente el cardToken, para luego realizar los cobros que se deseen.

responseHandler = function(response) {
	console.log(response);
	// Process response and send information to your server
}
      
const params = {
  cardholderData: {
    firstName: 'José',
    lastName: 'Perez',
    documentType: 'CURP',
    document: 'JPHJ280603MSPRRV09',
    email: 'jperez@dlocal.com'
  },
  country: 'MX',
  language: 'es'
};
directopago.createCardForm('CONTAINER_ID', params, responseHandler);

El parámetro country puede ser cualquiera de los países soportados.

El parámetro language puede ser en, es o pt. Mediante este parámetro es posible configurar el idioma en el cual se mostrarán las etiquetas de los diferentes campos y del botón.

También es posible no enviar ningún dato por parámetro, en este caso se le solicitarán todos los datos a tu cliente:

responseHandler = function(response) {
	console.log(response);
	// Process response and send information to your server
}

directopago.createCardForm('CONTAINER_ID', {}, responseHandler);

El formulario es 100% responsive, se adapta a la resolución del usuario:

Ejemplo de respuesta

{
    "country": "MX",
    "cardholderFirstName": "José",
    "cardholderLastName": "Perez",
    "cardholderDocumentType": "CURP",
    "cardholderDocument": "JPHJ280603MSPRRV09",
    "cardholderEmail": "jperez@dlocal.com",
    "brand": "VI",
    "last4": "1111",
    "expirationYear": "2023",
    "expirationMonth": "12",
    "cardToken": "CID-6051f971-1193-4f59-8aa3-f03bdba3adc6"
}

Paso 4 (opcional): Personalizar estilos

Es posible personalizar los estilos de los campos del formulario y del botón de confirmación utilizando las siguientes clases CSS:

.DirectoPagoField {
  // Estilos para los campos de input y select
}

.DirectoPagoField:disabled {
  // Estilos para los campos de input y select
}

.DirectoPagoButton {
  // Estilos para el botón de enviar
}

Ambiente de pruebas

Para utilizar la SDK en nuestro ambiente de pruebas, se debe instanciar de la siguiente forma:

const directoPago = new DirectoPago('API_key_test', true);

En este caso, deberás utilizar la API key de tu cuenta de test. Si no sabes cómo obtener una visita: Ambiente de pruebas

Cobros con cardToken

Para realizar un cobro con un cardToken, se debe utilizar nuestra API.

Ejemplo:

curl -X POST \
    -H 'Content-Type: application/json' \
    -H 'Authorization: Bearer PGickJNyZHrcNWZjZbewzLDtdoOrpuIM' \
    -d '{body}'
    https://checkout-api.directopago.com/v1/checkout

Request Body:

{
    "amount": "100",
    "currency": "USD",
    "cardToken": "CID-6051f971-1193-4f59-8aa3-f03bdba3adc6"
}

Response Body:

{
    "invoiceId": "126307563352994",
    "country": "MX",
    "amount": 100,
    "currency": "USD",
    "localAmount": 2000,
    "localCurrency": "MXN",
    "createdDate": "2021-07-08T17:36:44.191553",
    "status": "COMPLETED"
}

También es posible eliminar las tarjetas guardadas utilizando nuestra API:

curl -X DELETE \
    -H 'Content-Type: application/json' \
    -H 'Authorization: Bearer PGickJNyZHrcNWZjZbewzLDtdoOrpuIM' \
    https://checkout-api.directopago.com/v1/cards/CID-6051f971-1193-4f59-8aa3-f03bdba3adc6

Puedes consultar los posibles códigos de error de este servicio aquí.

¿Por qué es necesario?

Para ser elegible para el nivel más básico de cumplimiento de PCI (SAQ A), ciertos campos de pago en la página de pago deben estar alojados de forma segura. Esto requiere que se aloje la información en el dominio de una pasarela de pago externa y presente los campos a sus usuarios en un iframe o con un redireccionamiento.

La solución de Tokenización de Directo Pago logra cumplir con estos requerimientos al generar un iframe para manejar el ingreso de los campos Número de tarjeta, CVV y Fecha de vencimiento en tu página de pago.

Esto te brinda la capacidad de personalizar la apariencia de tu página web y, al mismo tiempo, garantizar que cumples con los requisitos de PCI de forma fácil y rápida!

Todos los envíos de información de pago mediante nuestra librería se realizan a través de una conexión HTTPS segura. Sin embargo, para protegerse de ciertas formas de ataques man-in-the-middle y para evitar que tus clientes vean advertencias de contenido mixto en sus navegadores, es necesario que la página que contenga el formulario sea también publicada a través de HTTPS.

Es recomendable enviar la documentación necesaria para subir la cuenta de nivel antes de comenzar a utilizar la integración, ya que de esta forma podrás acceder a límites mayores. Más información.

AnteriorBotón de pagoSiguienteShopify

Última actualización