Gestionar los pasos posteriores a la iniciación de una transacción puede ser un desafío significativo. Flujos como la autenticación 3DS (3D Secure) o las redirecciones a APMs (Métodos de Pago Alternativos) añaden capas de complejidad que requieren lógica de desarrollo específica y un monitoreo constante del estado de la transacción. Esta carga operativa puede desviar recursos valiosos.
El Next Action Widget de DEUNA fue diseñado para abstraer y simplificar esta complejidad. Actúa como un orquestador inteligente que toma el control del flujo después de que un pago ha sido iniciado exitosamente a través de la API de Purchase de DEUNA, manejando automáticamente las "siguientes acciones" requeridas de forma segura y eficiente.
Casos de uso
| Caso de uso | Escenario | Función de Next Action |
|---|---|---|
| Autenticación 3DS | Un cliente intenta pagar con una tarjeta de crédito o débito que requiere autenticación 3DS. Después de la llamada a la API de Purchase de DEUNA, se determina que es necesario un desafío 3DS. | En lugar de que tu comercio deba programar la redirección al banco emisor (o al servicio 3DS del adquirente/procesador), gestionar el iframe o modal de autenticación y luego escuchar el resultado para reanudar el flujo, Next Action se encarga de todo ello. El widget mostrará el flujo 3DS y, una vez completado, notificará a tu aplicación el resultado de la autenticación a través de los callbacks (onSuccess o onError). |
| Métodos de Pago Alternativos (APMs) | Un cliente elige un APM que, por su naturaleza, requiere una redirección a una página externa para completar el proceso. Esto puede incluir por ejemplo, el ingreso de credenciales o la aprobación en una billetera digital. La API de Purchase de DEUNA indicará la necesidad de esta redirección. | Cuando la API de Purchase de DEUNA indica la necesidad de una redirección a un APM, el Next Action Widget toma la URL de redirección proporcionada y gestiona el proceso completo: 1. Redirecciona al usuario a la página de pago del proveedor del APM. 2. Espera la interacción del usuario en la página externa. 3. Monitorea el resultado de la interacción y, una vez finalizada, devuelve al usuario a tu sitio 4. Notifica a tu aplicación sobre la finalización exitosa o fallida del pago a través de los callbacks. |
Experiencias Visuales
El Next Action Widget se integra de manera flexible con tu flujo de pago, independientemente de si utilizas los widgets de pago de DEUNA o construyes tu propia interfaz de usuario.
- Cuando utilizas los widgets de pago de DEUNA (ej. formulario de tarjeta, selección de APM), el Next Action se integra de forma transparente.
- Si nuestros comercios prefiere construir su propio formulario de pago o su propia experiencia de selección de APM, el Next Action Widget sigue siendo fundamental para orquestar los flujos posteriores. Después de que el usuario interactúa con su UX-UI y tu backend envía la solicitud a la API de Purchase de DEUNA, Next Action se activaría si se requiere una acción adicional.
A continuación mostramos un caso práctico del uso del widget Next Action.
Paso 1: Requisitos previos
Antes de integrar el Next Action 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.
Una vez que hayas completado estos pasos, podrás continuar con el paso 2.
Paso 2: Mostrar el Widget
Para mostrar Next Action, llama a la función initNextAction pasando los siguientes datos:
deunaSDK.initNextAction(
orderToken: "<DEUNA order token>",
callbacks: NextActionCallbacks(
onSuccess: { order in
self.deunaSDK.close() // Cierra el widget de pago
},
onError: { type in
// Manejo de errores
},
onClosed: { action in
// Widget cerrado
}
),
)
Parámetros
| Atributos | Descripción |
|---|---|
orderToken(Requerido) | El orderToken es un token único generado para la orden de pago. Este token es generado a través del API de DEUNA y debes implementar el endpoint correspondiente en tu backend para obtener esta información. |
callbacks(Requerido) | Los callbacks son funciones de retorno que se encargan de escuchar y manejar los eventos del widget de pago. Estos eventos permiten gestionar acciones específicas basadas en el estado del pago. Los principales callbacks incluyen: onSuccess, onError, onClosed. |
language(Opcional) | Este parámetro permite especificar el idioma en el que se mostrará la interfaz del widget. Debe proporcionarse como un código de idioma válido (por ejemplo, "es" para español, "en" para inglés, "pt" para portugués). Comportamiento: - Si se proporciona: El widget utilizará el idioma especificado en este parámetro, independientemente de la configuración del comercio. - Si no se proporciona: El widget utilizará el idioma configurado para el comercio. |
Paso 3: Escuchar los Eventos de Next Action
Cuando se completa la acción posterior al purchase mediante el widget se puede escuchar cual fue el resultado de este flujo, esto lo puedes realizar escuchando los eventos de Next Action Widget mediante los callbacks.
Los callbacks pasados a la función initNextAction te permite escuchar los eventos del widget. Define los callbacks respectivos para actualizar la interfaz de tu app.
3.1. Callbacks
| Callback | ¿Cuándo se dispara? |
|---|---|
onSuccess(Requerido) | Se ejecuta cuando se completó la acción posterior exitosamente. Este callback contiene un parámetro de tipo JSON con la información de la orden. |
onError(Requerido) | Se ejecuta cuando ocurre un error al guardar la tarjeta. Este callback contiene un parámetro tipo JSON el cual identifica el tipo de error producido. |
onClosed (Opcional) | Se ejecuta cuando se cierra el widget de pago. Este callback contiene un parámetro de tipo string cuyos valores pueden ser uno de los siguientes: - userAction: Cuando el widget fue cerrado manualmente por el usuario (presionando en el botón cerrar X o la opción "Cancelar") sin que la operación se haya completado. - systemAction: Cuando el widget se cierra debido a la ejecución de la función close. |
onEventDispatch (Opcional) | Se ejecuta en todas los eventos que pueda producir el widget. Este callback contiene un parámetro de tipo string y la data (JSON) asociada a dicho evento |
Paso 4: Cerrar el Widget
Por defecto, Next Action Widget solo se cierra cuando el usuario presiona el botón de cancelar del widget. Para cerrar el modal cuando un pago es exitoso o cuando ocurre un error, debes llamar a la función close.
deunaSDK.close();
El siguiente código de ejemplo muestra cómo cerrar el widget cuando el proceso de pago es exitoso.
deunaSDK.initNextAction(
orderToken: "<DEUNA order token>",
callbacks: NextActionCallbacks(
onSuccess: { order in
self.deunaSDK.close() // Cierra el widget de pago
}
),
)