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

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)
}