Vault Widget - Android

El Vault Widget de DEUNA permite guardar tarjetas de crédito y débito de forma segura. Para iniciar el proceso, debes usar la función initElements. Esta configura el Vault Widget, verifica la conectividad a Internet y carga el enlace.

Paso 1: Completar los Primeros Pasos

Antes de integrar el Vault Widget, es necesario que completes la sección de primeros pasos. En esta sección, te explicamos los requisitos necesarios y cómo inicializar el SDK. Puedes encontrar más información en Primeros Pasos con el SDK de Android.

Una vez que hayas completado estos pasos, podrás continuar con el paso 2.


Paso 2: Mostrar el Widget

Para mostrar el Vault Widget, primero define los callbacks y luego levanta el widget con initElements

val callbacks = ElementsCallbacks().apply{
    onSuccess = { response ->
        deunaSDK.closeElements(...) // Cierra el VAULT widget
    },
    onError = { error ->
        // handle the error
        deunaSDK.closeElements(...) // Cierra el VAULT widget
    },
    onClosed = {
       // El VAULT widget fue cerrado
    },
    onCanceled = {
      // El VAULT widget fue cerrado por el usuario
      // No es necesario llamar a closeElements(...)
    },
    eventListener = { type, response ->
       // Escuchar los eventos
    }
}

// Muestra el VAULT widget
deunaSDK.initElements(
    context = YOUR_ACTIVITY_CONTEXT,
    userToken = "<DEUNA user token>", // optional
    userInfo = DeunaSDK.UserInfo("Esteban", "Posada", "[email protected]"), // optional
    callbacks = callbacks
)  

Parámetros

ParámetroDescripción
callbacksUna instancia de la clase ElementsCallbacks, la cual contiene callbacks que serán llamados en caso de éxito, error, o cuando el widget se cierre.
closeEventsUn conjunto de valores de tipo ElementsEvent que especifican cuándo cerrar automáticamente el VAULT widget.

Consulta los eventos del VAULT widget aquí
userToken (Opcional)El token de un usuario obtenido usando la API de DEUNA
https://docs.deuna.com/reference/users-register
https://docs.deuna.com/reference/request-otp
https://docs.deuna.com/reference/login-with-otp
userInfo(Opcional)Instancia de la clase DeunaSDK.UserInfo que contiene firstName, lastName y email.

Importante: en caso que el userToken no se enviado o sea un string vacío (""), este parámetro es requerido.

Paso 3: Escuchar los Eventos del Widget

Es crucial manejar adecuadamente los eventos del Vault Widget para ofrecer una experiencia fluida a los usuarios. Define los callbacks necesarios para actualizar la interfaz de tu aplicación.


3.1 Callbacks

Callback¿Cuándo se dispara?
onSuccessSe ejecuta cuando una tarjeta se guarda exitosamente. Este callback contiene un parámetro de tipo ElementsResponse.
onErrorSe ejecuta cuando ocurre un error al guardar la tarjeta. Este callback contiene un parámetro de tipo ElementsError
onClosedSe ejecuta cuando el Vault Widget se cierra, independientemente de si la operación fue exitosa o ocurrió un error.

NOTA: El orden de ejecución de onCanceled y onClosed es el siguiente:

- Si el usuario cierra manualmente el widget (presionando el botón X o presionando el botón de retroceso):
onCanceled > onClosed.

- Si se cierra el widget mediante código llamando a closePaymentWidget, solo se ejecuta onClosed.
onCanceledSe ejecuta cuando el usuario de forma intencional cierra el widget (presionando el botón X o presionando el botón de retroceso) sin que la operación se haya completado.
eventListenerSe ejecuta cuando se detectan eventos específicos en el Vault Widget. Este callback contiene un parámetro de tipo ElementsEvent

Paso 4 (Opcional): Cerrar el Widget

Por defecto, el Vault Widget solo se cierra cuando el usuario presiona el botón de cerrar del widget o cuando presiona el botón de "retroceso" en iOS. Para cerrar el modal cuando una operación es exitosa o cuando ocurre un error, debes llamar a la función closeElements.

El siguiente código de ejemplo muestra cómo cerrar el widget cuando una tarjeta se guarda exitosamente

val callbacks = ElementsCallbacks().apply {
    onSuccess = { response ->
        deunaSDK.closeElements() // Cierra el Vault Widget
        // Tu código adicional
    }
}

// Muestra el Vault Widget
deunaSDK.initElements(
    context = YOUR_ACTIVITY_CONTEXT,
    userToken = "<DEUNA user token>", // optional
    userInfo = DeunaSDK.UserInfo("Esteban", "Posada", "[email protected]"), // optional
    callbacks = callbacks
)


Paso 5 (Opcional): Revisar Ejemplo Demo App

Para comprender mejor la integración del Vault Widget, revisa el proyecto de ejemplo proporcionado por DEUNA. Este ejemplo te ayudará a entender mejor cómo implementar el widget en tu aplicación Android.

Para acceder al proyecto de ejemplo y obtener más información, consulta la documentación del Ejemplo de Proyecto para Android.