Next Action: Facilitador de flujos post-pago 3DS y APMs

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

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.

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 invocar y mostrar el Next Action Widget, debes llamar a la función initNextAction del objeto global DeunaSDK, pasando el orderToken recibido de tu backend y configurando los callbacks necesarios para manejar los resultados..

await DeunaSDK.initNextAction({
  orderToken: "<DEUNA order token>", // requerido
  language: ..., // opcional
  callbacks: {
    // opcionales
    onClosed: (action) => console.log("cerrado desde Payment Widget"),
    onSuccess: (data) => console.log("purchaseResponse: ", data),
    onError: (error) => console.log("error", error),
    onEventDispatch: (event, payload) => {
      console.log("onEventDispatch: ", { event, payload });
    },
  },
});

Parámetros

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

Ejemplo:

await DeunaSDK.initNextAction({
  orderToken: "<DEUNA order token>",
  userToken: "...",
  callbacks: {
    onSuccess: ...,
    onError: (error) => console.log("error", error),
    onEventDispatch: (event, payload) => {
	    console.log("onEventDispatch: ", { event, payload });
	  }
  },
});

Paso 4 (Opcional): 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.

await DeunaSDK.close();

El siguiente código de ejemplo muestra cómo cerrar el widget cuando el guardado de una tarjeta es exitoso.

await DeunaSDK.initNextAction({
  orderToken: "<DEUNA order token>", // Obligatorio: Token de la orden para inicializar el widget
  callbacks: {
    // opcionales
    onSuccess: async (data) => {
      await DeunaSDK.close(); // Cierra el widget de pago
      console.log("successResponse: ", data);
    },
  },
});