Manejo de información sensible
Muestra información sensible, activa tarjetas y cambia el PIN cumpliendo con los requisitos PCI-DSS.
Introducción
Para operar en el mercado de medios pagos es necesario cumplir con los requisitos de PCI-DSS (Payment Card Industry Data Security Standard), un estándar de seguridad en medios de pago y una normativa global obligatoria establecida por las principales marcas de tarjetas de crédito y débito. PCI-DSS tiene como objetivo garantizar la integridad y confidencialidad de los datos.
A continuación, te contaremos sobre nuestra solución web de data segura que te permitirá mostrar la información sensible, activar las tarjetas y realizar cambios de PIN cumpliendo con los requisitos PCI-DSS.
Web de data segura
La web de data segura te permite mostrar la información sensible y activar una tarjeta. Para ambos casos, deberás embeber una página web mediante un iFrame HTML o un WebView enviando los parámetros necesarios.
La web de data segura te permite mostrar la información sensible sobre una tarjeta.
- El flujo comienza cuando tu cliente solicita ver los datos de su tarjeta en tu app.
- Entonces desde tu app, inicias el pedido solicitando los datos de la tarjeta.
- Con tu client token podrás solicitar un token de usuario final usando este endpoint.
- Nosotros te devolveremos un token que te servirá para ver las tarjetas que tu cliente tenga asociadas y manejar su información sensible. Ten en cuenta que el token dura 15 minutos y pasado ese tiempo rechazaremos tus intentos. Para seguir operando, tendrás que generar uno nuevo.
- Una vez que tengas el token para tu cliente, deberás incluirlo en la URL de nuestra página de información sensible como
query param. - Luego, tendrás que embeber nuestra página de información sensible en tu app. En la siguiente sección te explicamos cómo embeberla y cómo configurarla.
- Validaremos el token y devolveremos los datos de la tarjeta a la web de data segura.
- Tu app muestra los datos de la tarjeta en nuestra web.
- ¡Listo! Tu cliente puede ver los datos de su tarjeta.
Embeber la web de data segura
Desde tu frontend, tendrás que usar algún método embebido para mostrar nuestra página de información sensible. A continuación, te mostramos un ejemplo de cómo embeber en nuestra página en HTML usando un iFrame.
Este es otro ejemplo en react-native:
Para que funcione el botón de copiar tendrás que habilitar la escritura al portapapeles de la siguiente manera:
Configurar y personalizar la web de data segura
Nuestra página de información sensible soporta varios query param para que puedas configurarla a tu gusto y personalizarla con tu marca.
| Parámetros | Descripción | Valores posibles / Ejemplo |
|---|---|---|
| layout | Podrás definir si la tarjeta tiene diseño horizontal o vertical. | list, card |
| field_list | Usa estos valores para definir qué mostrar. Si no envías ningún valor mostraremos el PAN y el nombre del titular de la tarjeta. El PIN solo está disponible para tarjetas físicas de México. | pan, code, pin, name, expiration |
| locale | Código de idioma para traducir textos. | en, es, pt |
| styles | URL donde se encuentre tu página de estilos de las tarjetas. | Ejemplo de URL |
| styles_string | Estilos definidos directamente en la URL. El largo de la URL puede tener un máximo de 2048 caracteres y los colores tienen que ser en formato RGB/RGBA. | [Ejemplo de](https://secure-data-web.pomelo.la/v1/crd-20eGcc6HrA3TcOhkorbEZmNj6Fg?styles\_string=.card {border: 10px solid green; border-radius: 100%;} .pan {border: 1px solid red;}) [URL](https://secure-data-web.pomelo.la/v1/crd-20eGcc6HrA3TcOhkorbEZmNj6Fg?styles\_string=.card {border: 10px solid green; border-radius: 100%;} .pan {border: 1px solid red;}) |
Usando el parámetro styles o styles_string podrás configurar los siguientes estilos:
| .card { ... } | Componente contenedor |
|---|---|
| .card .pan {} | Número de tarjeta |
| .card .pan .copy-icon {} | Botón para copiar |
| .card .name {} | Titular de la tarjeta |
| .card .expiration-date {} | Fecha de expiración |
| .card .security-code {} | Código de seguridad |
| .card .cvv_expiration_time {} | Tiempo de validez para dCVV |
| .card .pin {} | Número de PIN |
| .list { ... } | Componente contenedor |
|---|---|
| .list .pan {} | Número de tarjeta |
| .list .pan .label {} | Texto sobre el número de tarjeta |
| .list .pan .copy-icon {} | Botón para copiar |
| .list .name {} | Titular de la tarjeta |
| .list .name .label {} | Texto sobre NAME |
| .list .expiration-date {} | Fecha de expiración |
| .list .expiration-date .label {} | Texto sobre Exp Date |
| .list .security-code {} | Código de seguridad |
| .list .security-code .label {} | Texto sobre código de seguridad |
| .list .cvv_expiration_time {} | Tiempo de validez para dCVV |
| .list .cvv_expiration_time .label {} | Texto sobre expiración de tiempo de validez |
| .list .pin {} | Número de PIN |
| .list .pin .label {} | Texto sobre PIN |
La hoja de estilos debería ser similar a este ejemplo:
Te daremos una web con un formulario para que tus clientes puedan activar su tarjeta ingresando los 16 dígitos (PAN) y el PIN de ser necesario.
- El flujo comienza cuando tu cliente quiere activar su tarjeta tu app.
- Entonces, desde tu app iniciarás el pedido solicitando activar una tarjeta.
- Con tu client token podrás solicitar un token de usuario final usando este endpoint.
- Nosotros te devolveremos el token de usuario final que solo servirá para activar la tarjeta para tu cliente. Ten en cuenta que el token dura 15 minutos y pasado ese tiempo rechazaremos tus intentos. Para seguir operando, tendrás que generar uno nuevo token.
- Una vez que tengas el token para tu usuario, debes incluirlo en la URL de nuestra página de activación como
query param. Si operas en México, además tendrás que enviarnos el parámetrocountry. - En tu app, embebes nuestra web de activación. En la siguiente sección te explicamos cómo embeberla y cómo configurarla.
- Tu cliente tendrá que ingresar algunos datos de su tarjeta para avanzar en la activación.
- La web solicitará la activación de la tarjeta utilizando el token de usuario final obtenido.
- Validaremos el token y la información enviada.
- Dependiendo del resultado, tu app mostrará la página de contrats o de error. Te explicamos al final como configurar estas respuestas.
Embeber la web de data segura
Desde tu frontend, tendrás que usar algún método embebido para mostrar el formulario de activación de tarjeta.
Te mostramos un ejemplo en React Native. Ten en cuenta que tendrás que configurar las siguientes propiedades del WebView:
- Sobreescribir el método
onShouldStartLoadWithRequest - Sobreescribir el método
onNavigationStateChange - Habilitar la ejecución de código javascript.
Este es un ejemplo en Swift. Tendrás que configurar el NavigationDelegate para manejar la ejecución del link:
Configurar y personalizar la web de data segura
Nuestra página de activación soporta varios query param para que puedas configurarla a tu gusto y personalizarla con tu marca.
| Parámetros | Descripción | Valores posibles / Ejemplo |
|---|---|---|
| success_link | URL que llamaremos cuando la tarjeta esté activada. | URL |
| country | Código de país en formato ISO 3166-1 alpha-3 para definir comportamientos particulares. Si operas en México, no te mostraremos el campo de PIN ya que no es necesario. | ARG |
| locale | Código de idioma para traducir textos. | en, es, pt |
| styles | URL donde se encuentre tu página de estilos de tarjetas. Más adelante te contamos los estilos disponibles y su descripción. | Ejemplo de URL |
| styles_string | Estilos definidos directamente en la URL. | [Ejemplo de](https://secure-data-web.pomelo.la/v1/activate-card/?styles\_string=.card {border: 10px solid green; border-radius: 100%;} .pan {border: 1px solid red;}) [URL](https://secure-data-web.pomelo.la/v1/activate-card/?styles\_string=.card {border: 10px solid green; border-radius: 100%;} .pan {border: 1px solid red;}) |
Usando el parámetro styles o styles_string podrás configurar los siguientes estilos:
| .activation-form { ... } | Componente contenedor |
|---|---|
| .activation-form .pan-input {} | Número de tarjeta |
| .activation-form .pin-input {} | PIN de la tarjeta |
| .activation-form .error-field {} | Errores de activación |
| .activation-form .submit-button {} | Botón de enviar |
Configurar las respuestas del formulario
Activación exitosa
Si la activación es exitosa, redireccionaremos al link que nos hayas enviado por parámetro.
Si se trata de una aplicación móvil, podrás enviarnos un deep link para continuar el flujo de tu aplicación.
Manejo de errores
Si al momento de activar la tarjeta algo sale mal, mostraremos el error correspondiente y le pediremos a tus clientes que vuelvan a intentarlo. Para capturar este error debes implementar un event listener como en este ejemplo:
Los errores que devolveremos son los siguientes:
| CARD_REGEX_FAILED | Número de tarjeta inválido. |
|---|---|
| PIN_REGEX_FAILED | Formato de PIN incorrecto. |
| NOT_AUTHORIZED | No tienes permisos para realizar la acción. |
| INVALID_PIN | PIN inválido. |
| INVALID_REQUEST | Error en la solicitud. |
Te daremos una web con un formulario para que tus clientes puedan cambiar el PIN de su tarjeta.
- El flujo comienza cuando tu cliente quiere cambiar el PIN de su tarjeta en tu app.
- Entonces, desde tu app iniciarás el pedido solicitando cambiar el PIN.
- Con tu client token podrás solicitar un token de usuario final usando este endpoint.
- Nosotros te devolveremos el token de usuario final que solo servirá para cambiar el PIN de la tarjeta para tu cliente. Ten en cuenta que el token dura 15 minutos y pasado ese tiempo rechazaremos tus intentos. Para seguir operando, tendrás que generar uno nuevo.
- Una vez que tengas el token para tu usuario, debes incluirlo en la URL de nuestra página de cambio de PIN como
query param. - En tu app, embebes nuestra web de activación. En la siguiente sección te explicamos cómo embeberla y cómo configurarla.
- Tu cliente tendrá que ingresar algunos datos de su tarjeta para avanzar con el cambio de PIN.
- La web solicitará el cambio de PIN de la tarjeta utilizando el token de usuario final obtenido.
- Validaremos el token y la información enviada. Dependiendo del resultado, tu app mostrará la página de congrat o de error. Te explicamos al final como configurar estas respuestas.
Embeber la web de data segura
Desde tu frontend, tendrás que usar algún método embebido para mostrar el formulario de activación de tarjeta.
Te mostramos un ejemplo en React Native.
Tendrás que configurar las siguientes propiedades del WebView:
- Sobreescribir el método
onShouldStartLoadWithRequest. - Sobreescribir el método
onNavigationStateChange. - Habilitar la ejecución de código javascript.
Snippet
Este es un ejemplo en Swift. Tendrás que configurar el NavigationDelegate para manejar la ejecución del link:
Snippet
Configurar y personalizar la web de data segura
Nuestra página de activación soporta varios query param para que puedas configurarla a tu gusto y personalizarla con tu marca.
| Parámetros | Descripción | Ejemplo |
|---|---|---|
| success_link | URL que llamaremos cuando la tarjeta esté activada. | URL |
| locale | Código de idioma para traducir textos. | en, es, pt |
| styles | URL donde se encuentre tu página de estilos de tarjetas. Más adelante te contamos los estilos disponibles y su descripción. | URL |
| styles_string | Estilos definidos directamente en la URL. | URL |
Usando el parámetro styles o `styles_string podrás configurar los siguientes estilos:
| Valores | Descripción |
|---|---|
| .change-pin-form { ... } | Componente contenedor |
| .change-pin-form .pin-input {} | PIN de la tarjeta |
| .change-pin-form .error-field {} | Errores de activación |
| .change-pin-form .submit-button {} | Botón de enviar |
Configurar las respuestas del formulario
Cambio de PIN exitoso
Si el cambio de PIN es exitoso, redireccionaremos al link que nos hayas enviado por parámetro.
Si se trata de una aplicación móvil, podrás enviarnos un deep link para continuar el flujo de tu aplicación.
Manejo de errores
Si al momento de cambiar el PIN algo sale mal, mostraremos el error correspondiente y le pediremos a tus clientes que vuelvan a intentarlo. Para capturar este error debes implementar un event listener como en este ejemplo:
Snippet
Los errores que devolveremos son los siguientes:
| Valores | Descripción |
|---|---|
| PIN_REGEX_FAILED | Formato de PIN incorrecto. |
| NOT_AUTHORIZED | No tienes permisos para realizar la acción. |
| INVALID_PIN | PIN inválido. |
| INVALID_REQUEST | Error en la solicitud. |