Pago unificado en Webview

Usa tu checkout web en una app móvil

Unifica los pagos de todos tus canales (físicos, online, móviles, etc.) en una única página web centralizada.

Para integrar nuestro Checkout en aplicaciones móviles, utiliza un componente WebView.

Cómo funciona

El WebView es un componente que permite embeber contenido web dentro de una aplicación móvil nativa.

Los usuarios acceden al flujo de pago directamente dentro de la app, sin redireccionamiento a un navegador externo.

La página de pagos se carga en el WebView, manteniendo la experiencia dentro del entorno de la aplicación.

Usualmente puedes usar el SDK Web de DEUNA en tus sitios para mostrar los widgets de pago.

Cuando la página del sitio web es cargada en un WebView, es posible que algunos flujos de pago no funcionen correctamente debido a restricciones inherentes a un WebView en iOS y Android.

Restricciones comunes

Un WebView puede tener las siguientes restricciones:

• Ejecución de JavaScript: Por defecto, la ejecución de JavaScript puede estar bloqueada. Esto puede ocasionar problemas al cargar el contenido de tu sitio web, incluyendo los widgets de pago. Para garantizar la funcionalidad completa, es crucial habilitar JavaScript explícitamente en la configuración de tu WebView.
• Redirecciones a Enlaces Externos: Las redirecciones a enlaces externos, ya sea mediante window.open o al hacer clic en un enlace, están bloqueadas por defecto. Esta es una limitación crítica para flujos de pago que requieren que el usuario sea redirigido a una página externa para completar la transacción. Ejemplos comunes incluyen:
  • Autenticación 3D Secure (3DS): Cuando el banco del usuario requiere una verificación adicional.
  • Métodos de Pago Alternativos (APMs): Pagos que se procesan a través de plataformas externas (por ejemplo, PayPal, servicios de banca en línea).
    
    

    📘

    En estos casos, es responsabilidad del desarrollador interceptar estas redirecciones y manejarlas adecuadamente. Esto podría implicar abrir el enlace en el navegador predeterminado del dispositivo o implementar un mecanismo de manejo de URL personalizado dentro de la aplicación

Comunicación entre el Checkout Web y la App

Es necesario implementar un mecanismo de comunicación bidireccional, como PostMessages o WebSockets, para intercambiar datos entre tu Checkout Web y la aplicación móvil.

Prerequisitos

Configura las siguientes funcionalidades en tu aplicativo:

1. Configuración del WebView: Tu WebView debe poder URLs de redirección, como aquellas utilizadas en flujos de 3DS, APMs, y otros servicios.
2. Comunicación entre el Checkout Web y la App: Implementa un mecanismo de comunicación bidireccional para intercambiar datos entre tu Checkout Web y la aplicación móvil. Utiliza PostMessages o WebSockets.

Implementación de WebView personalizado

En el siguiente video, demostramos cómo integramos un Checkout Web en una app iOS mediante un WebView:

Se carga el sitio web explore.deuna.io, que utiliza el SDK Web de DEUNA para renderizar los widgets.

La comunicación entre el Checkout Web y la app iOS se gestiona mediante un WebView personalizado y PostMessages.

Puedes acceder al código fuente completo de nuestra solución de WebView personalizado para cada plataforma en los siguientes repositorios:

• IOS Ver ejemplo en: Examples/checkout-web-wrapper
• Android Ver ejemplo en: examples/checkout-web-wrapper

Comunicación entre Checkout Web y apps móviles

En nuestro sitio explore.deuna.io, utilizamos un enfoque similar al siguiente para establecer la comunicación entre el checkout web y las aplicaciones móviles:

/**
 * Envía mensajes del Checkout Web al WebView nativo
 * @param {string} callbackName - Nombre del callback (ej: 'onSuccess')
 * @param {Object} data - Datos a transmitir
 * @param {string} widgetType - Tipo de widget (ej: 'paymentWidget')
 */
const sendMessage = (callbackName, data, widgetType) => {
  const payload = JSON.stringify({ callbackName, data, widgetType });

  // Plataform-specific handlers
  window.webkit?.messageHandlers.deunaPayment?.postMessage(payload); // iOS
  window.deunaPayment?.postMessage(payload);                        // Android
  window.ReactNativeWebView?.postMessage(payload);                  // React Native
};

// Inicialización del Widget de Pago DEUNA
await DeunaSDK.initPaymentWidget({
  orderToken: "<DEUNA_ORDER_TOKEN>",
  callbacks: {
    onSuccess: (data) => {
      sendMessage('onSuccess', data, 'paymentWidget');
    },
    onError: (data) => {
      sendMessage('onError', data, 'paymentWidget');
    },
    onEventDispatch: (event, data) => {
      sendMessage('onEventDispatch', { event, data }, 'paymentWidget');
    },
  },
});