Guía para integrar el Widget de Pagos como Modal o Webview

Esta guía está diseñada para ayudarlo a integrar de manera efectiva el Widget como un WebView en su aplicación móvil, optimizando su rendimiento y usabilidad.

1. Introducción

El Widget proporciona una interfaz interactiva y enriquecida, mejorando la experiencia del usuario final. Integrarlo como un WebView es una solución eficaz para incorporar funcionalidades avanzadas sin necesidad de un desarrollo nativo complejo.

2.Requisitos

Antes de comenzar, asegúrese de cumplir con los siguientes requisitos:

Conocimientos básicos de desarrollo de aplicaciones móviles.
Acceso al código fuente de su aplicación móvil.
Un Widget listo para ser integrado.
Un entorno de desarrollo compatible.

3. Integración del WebView

3.1. Incluir la biblioteca

Debes incluir la biblioteca externa en su archivo HTML utilizando la siguiente etiqueta de script:

<script src="https://static.floid.app/js-libraries/modal.js"></script> <!-- Incluir el archivo JS externo -->

3.2. Crear una instancia para el Modal o Webview

Para comenzar a usar el modal, primero debe crear una instancia del mismo con un token específico. Este token será utilizado para generar la URL que se cargará en el iframe del modal.

// Crear una nueva instancia del modal con un token
const myModal = FloidModal('payment-token-here');

3.3. Abrir el Modal

Para abrir el modal, simplemente llame al método open en la instancia del modal que ha creado.

// Abrir el modal
myModal.open();

3.4. Registrar Event Listeners

Puede registrar event listeners para eventos específicos. Por ejemplo, puede querer realizar una acción cuando el modal se cierre. Utiliza el método on para registrar estos callbacks.

// Registrar un event listener para el evento 'close'
myModal.on('close', () => {
    console.log('Modal ha sido cerrado.');
});

3.5. Cerrar el modal

// Cerrar el modal
myModal.close()

4. Configuración del Widget en el WebView

Para asegurar que el Widget funcione correctamente dentro del WebView, asegúrese de:

Habilitar JavaScript: Asegúrese de que la ejecución de JavaScript esté habilitada en la configuración del WebView.
Gestión de URL: Si el Widget redirige a otras URLs, implemente métodos para gestionar estas acciones de navegación.

5. Ejemplo

Aquí hay un ejemplo completo de cómo utilizar la función FloidModal en su aplicación:

// Crear una nueva instancia del modal con un token
const myModal = FloidModal('your-token-here');

// Abrir el modal
myModal.open();

// Registrar un event listener para el evento 'close'
myModal.on('close', () => {
    console.log('Modal ha sido cerrado.');
});

// Cerrar el modal
myModal.close();

Lista de eventos

Nombre Evento	Descripción
`payment_opened`	Acción the abrir un widget de pago.
`bank_selection`	Acción al abrir pantalla de selección de un banco de origen.
`bank_selected`	Acción al seleccionar un banco de origen.
`logging_in`	Acción al procesar el ingreso.
`logging_in_authorization_required`	Acción al requerir autorización para el ingreso.
`login_failed`	Acción al fallar el inicio de sesión.
`selecting_account`	Acción al abrir pantalla de selección de cuentas.
`starting_transfer`	Acción al procesar un pago.
`new_recipient_authorization_required`	Acción al requerir la autorización de un nuevo destinatario.
`new_recipient_authorization_method_selection`	Acción al abrir pantalla de autorización de un nuevo destinatario.
`new_recipient_authorization_method_selected`	Acción al seleccionar un método de autorización.
`checking_new_recipient_creation`	Acción de procesar un nuevo destinatario.
`sending_new_recipient_authorization`	Acción de autorizar un nuevo destinatario.
`transfer_authorization_required`	Acción al requerir autorización de la transferencia.
`transfer_authorization_method_selection`	Acción al abrir pantalla de métodos de autorización de la transferencia.
`transfer_authorization_method_selected`	Acción al seleccionar método de autorización de la transferencia.
`checking_transfer_authorization`	Acción de procesamiento de autorización del pago.
`sending_transfer_authorization`	Acción de envío de autorización del pago.
`payment_success`	Acción al aceptar el pago.
`payment_error`	Acción de ocurrencia de error del pago.
`payment_closed`	Acción cierre del pago.

6. Solución de Problemas

Problema de Carga: Si el WebView no carga el Widget, verifique la URL y la configuración de permisos.
Problemas de Renderizado: Ajuste las configuraciones del WebView, como el escalado o la gestión de caché.