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:
- 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.
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.
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>
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
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
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
- 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: '[email protected]'
},
country: 'MX',
language: 'es'
};
directopago.createCardForm('CONTAINER_ID', params, responseHandler);
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);
Ejemplo en desktop
El formulario es 100% responsive, se adapta a la resolución del usuario:
Ejemplo en mobile
{
"country": "MX",
"cardholderFirstName": "José",
"cardholderLastName": "Perez",
"cardholderDocumentType": "CURP",
"cardholderDocument": "JPHJ280603MSPRRV09",
"cardholderEmail": "[email protected]",
"brand": "VI",
"last4": "1111",
"expirationYear": "2023",
"expirationMonth": "12",
"cardToken": "CID-6051f971-1193-4f59-8aa3-f03bdba3adc6"
}
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
}
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
curl -X POST \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer PGickJNyZHrcNWZjZbewzLDtdoOrpuIM' \
-d '{body}'
https://checkout-api.directopago.com/v1/checkout
{
"amount": "100",
"currency": "USD",
"cardToken": "CID-6051f971-1193-4f59-8aa3-f03bdba3adc6"
}
{
"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
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.
Última actualización 11mo ago