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 payment-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 sea cerrado por el usuario.

// Registrar un event listener para el evento 'PAYMENT_CLOSED'
window.addEventListener('message', (event) => {
  if (event.data && event.data.status === 'PAYMENT_CLOSED') {
    myModal.close();
  }
});

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:

<!DOCTYPE html>
<html>

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

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

        window.addEventListener('message', (event) => {
            if (event.data && event.data.status === 'PAYMENT_CLOSED') {
                myModal.close();
            }
        });

    </script>
</head>

<body>
    <button onclick="myModal.open()">Abrir modal</button>
</body>

</html>

Lista de eventos

Nombre Evento	Descripción
`SUCCESS`	Acción al aceptar el pago.
`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é.