El Next Action Widget de DEUNA está diseñado para simplificar el manejo de flujos posteriores al pago iniciado vía API, como:
- Autenticación 3DS (para tarjetas que lo requieran).
- Redirección a APMs (en métodos alternativos como Aplazo, wallets).
Como su nombre lo refleja, este "Next Action" gestionar la siguiente acción requerida después de un pago inicial. Ayuda a recopilar información del dispositivo, redirigir a la página del proveedor (si es necesario) y reduce la complejidad de que nuestros comercios realicen todo esto por sí mismos.
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:
import { DeunaSDK, DeunaWidget } from "@deuna/react-native-sdk";
const deunaSDK = DeunaSDK.initialize({
publicApiKey: "YOUR_PUBLIC_API_KEY",
environment: "sandbox",
});
const YourScreen = () => {
const onShowPaymentWidget = () => {
deunaSDK.initNextAction({
orderToken: "<DEUNA order token>", // requerido
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 });
},
},
});
};
return (
<View>
<DeunaWidget instance={deunaSDK} />
<Button
onPress={onShowPaymentWidget}
title="Show Next Action Widget"
></Button>
</View>
);
};
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 |
Ejemplo:
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: 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.
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);
},
},
});