Manejo de información sensible

Flujo de integración

Para mostrar la información sensible o activar las tarjetas de tus usuarios tendrás que seguir estos pasos:

  1. Solicítanos un token de usuario final a Pomelo con el token que obtuviste en 'Autorización'. Ver Documentación
  2. Usa este nuevo token como query parameter embebiendo la web de Pomelo en tu UI.
  3. Configura los estilos que desees y los parámetros necesarios.

Mostrar la información sensible

Obtener información sensible de tarjeta

La web de data segura te permite mostrar la información sensible sobre una tarjeta en particular.
Deberás embeber esta página web mediante un iFrame html o un WebView enviando los parámetros necesarios.

Estilos

Podrás configurar una hoja de estilos para mostrar la información.

Importante: CORS debe estar habilitado para comunicarse con la dirección de la hoja de estilos.

La página se mostrará por default sin fondo para poder ser renderizada sobre otro componente.
Todos los componentes tienen un class-name único que al momento de recibir una URL de estilos tomarán el diseño que hayas definido.
La disposición de los campos variará según el parámetro layout que podrá ser en formato lista o tarjeta.
A continuación está la lista de los ids:

Card Layout

CSS NAMEDESCRIPCIÓN
.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 .pin {}Número de Pin
card-layout

List Layout

CSS NAMEDESCRIPCIÓN
.list { ... }Componente contenedor
.list .pan {}Número de tarjeta
.list .pan .label {}Texto sobre el PAN
.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 .pin {}Número de Pin
.list .pin .label {}Texto sobre PIN
list-layout

Consideraciones para integrar con un iframe

Para que funcione el botón de copiar deberás habilitar la escritura al portapapeles de la siguiente manera:

<iframe allow='clipboard-write' ... ></iframe>
Parámetros disponibles
Query Parameters
authstringrequired
Ejemplo: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
field_liststring
Campos a mostrar en la tarjeta
Enum: pancodepinnameexpiration
stylesstring
URL donde se encuentre tu página de estilos de las tarjetas.
layoutstring
Estilos para mostrar la información sensible
Enum: listcard
localestring
Código de idioma para traducir textos
Enum: enespt
Path Parameters
card_idstringrequired
Id de tarjeta
¿Te resultó útil esta sección?
GET/v1/{card_id}
Ejemplo de respuestas

Activar una tarjeta

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.

Deberás embeber esta página web en tu sitio o app con un iframe HTML o un WebView enviando los parámetros necesarios.
Todos los textos del formulario estarán traducidos al idioma que nos indiques por parámetro.

Estilos

Podrás configurar una hoja de estilos para mostrar el formulario.

Importante: CORS debe estar habilitado para comunicarse con la dirección de la hoja de estilos.

La página se mostrará por default sin fondo para poder ser renderizada sobre otro componente.
Todos los componentes tienen un class-name único que al momento de recibir una URL de estilos tomarán el diseño que hayas definido.
A continuación está la lista de los ids:

CSS Classes

CSS NAMEDESCRIPCIÓN
.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

Activación exitosa

Si la activación es exitosa, te redireccionaremos al link enviado que hayas enviado por parámetro.
Si estás usando 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 al usuario final que vuelva a intentarlo hasta que pueda completar la activación.

Implementación en React Native

Para implementar el WebView en React Native y habilitar la ejecución del Deep Link es necesario configurar las siguientes propiedades del WebView

  1. Sobreescribir el método onShouldStartLoadWithRequest
  2. Sobreescribir el método onNavigationStateChange
  3. Habilitar la ejecución de código javascript

Snippet

const onShouldStartLoadWithRequest = (request: any) => {
    return true;
}

const onNavigationStateChange = (event: any) => {
    if(!event.url.includes('secure-data-web')){
        Linking.openURL(event.url);
    }
}

<WebView
    source=uri: POMELO_URL
    onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
    onNavigationStateChange={onNavigationStateChange}
    javaScriptEnabled={true}
/>

Implementación en iOS nativo

Para implementar el WebView en Swift es necesario configurar el NavigationDelegate para manejar la ejecución del link

Snippet

webView.navigationDelegate = self

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    // Open URL
    let url = (navigationAction.request.url)!
    let scheme = url.scheme?.lowercased()

    if scheme != 'https' && scheme != 'http' {
        UIApplication.shared.open(url)
    }
    decisionHandler(.allow)
}
Parámetros disponibles
Query Parameters
authstringrequired
Ejemplo: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
stylesstring
URL donde se encuentre tu página de estilos del formulario de activación.
localestring
Código de idioma para traducir textos
Enum: enespt
countrystring
Código de país en formato ISO 3166-1 alpha-3
success_linkstring
URL que será llamada una vez que la tarjeta esté activada.
¿Te resultó útil esta sección?
GET/v1/activate-card
Ejemplo de respuestas