Tokenización

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:
1
<script src="https://static.directopago.com/directopago.min.js"></script>
Copied!
Paso 2: Crear una instancia de DirectoPago
Para generar una instancia de DirectoPago, necesitaras utilizar tu API Key.
1
const directoPago = new DirectoPago('API_key');
Copied!
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:
1
const directoPago = new DirectoPago('API_key_test', true);
Copied!
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.
1
responseHandler = function(response) {
2
	console.log(response);
3
	// Process response and send information to your server
4
}
5
      
6
const params = {
7
  cardholderData: {
8
    firstName: 'José',
9
    lastName: 'Perez',
10
    documentType: 'CURP',
11
    document: 'JPHJ280603MSPRRV09',
12
    email: '[email protected]'
13
  },
14
  country: 'MX',
15
  language: 'es'
16
};
17
directopago.createCardForm('CONTAINER_ID', params, responseHandler);
Copied!
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:
1
responseHandler = function(response) {
2
	console.log(response);
3
	// Process response and send information to your server
4
}
5
​
6
directopago.createCardForm('CONTAINER_ID', {}, responseHandler);
Copied!
Ejemplo en desktop
El formulario es 100% responsive, se adapta a la resolución del usuario:
Ejemplo en mobile
Ejemplo de respuesta
1
{
2
    "country": "MX",
3
    "cardholderFirstName": "José",
4
    "cardholderLastName": "Perez",
5
    "cardholderDocumentType": "CURP",
6
    "cardholderDocument": "JPHJ280603MSPRRV09",
7
    "cardholderEmail": "[email protected]",
8
    "brand": "VI",
9
    "last4": "1111",
10
    "expirationYear": "2023",
11
    "expirationMonth": "12",
12
    "cardToken": "CID-6051f971-1193-4f59-8aa3-f03bdba3adc6"
13
}
Copied!
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:
1
.DirectoPagoField {
2
  // Estilos para los campos de input y select
3
}
4
​
5
.DirectoPagoField:disabled {
6
  // Estilos para los campos de input y select
7
}
8
​
9
.DirectoPagoButton {
10
  // Estilos para el botón de enviar
11
}
Copied!
Ambiente de pruebas
Para utilizar la SDK en nuestro ambiente de pruebas, se debe instanciar de la siguiente forma:
1
const directoPago = new DirectoPago('API_key_test', true);
Copied!
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:
1
curl -X POST \
2
    -H 'Content-Type: application/json' \
3
    -H 'Authorization: Bearer PGickJNyZHrcNWZjZbewzLDtdoOrpuIM' \
4
    -d '{body}'
5
    https://checkout-api.directopago.com/v1/checkout
Copied!
Request Body:
1
{
2
    "amount": "100",
3
    "currency": "USD",
4
    "cardToken": "CID-6051f971-1193-4f59-8aa3-f03bdba3adc6"
5
}
Copied!
Response Body:
1
{
2
    "invoiceId": "126307563352994",
3
    "country": "MX",
4
    "amount": 100,
5
    "currency": "USD",
6
    "localAmount": 2000,
7
    "localCurrency": "MXN",
8
    "createdDate": "2021-07-08T17:36:44.191553",
9
    "status": "COMPLETED"
10
}
Copied!
También es posible eliminar las tarjetas guardadas utilizando nuestra API:
1
curl -X DELETE \
2
    -H 'Content-Type: application/json' \
3
    -H 'Authorization: Bearer PGickJNyZHrcNWZjZbewzLDtdoOrpuIM' \
4
    https://checkout-api.directopago.com/v1/cards/CID-6051f971-1193-4f59-8aa3-f03bdba3adc6
Copied!
¿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.
​