Con el Checkout Widget de DEUNA, acepta pagos de forma ágil y rápida en tu app. Sigue los siguientes pasos para capturar un pago utilizando el Checkout Widget.

Paso 1: Completar los Primeros Pasos

Antes de integrar el Payment Widget, 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. Puedes encontrar más información en Primeros Pasos con el SDK Web.

Una vez que hayas completado estos pasos, podrás continuar con el paso 2.

Paso 2: Mostrar el Widget

Para mostrar el Checkout Widget, llama a la función initCheckout pasando los siguientes datos:

Parámetros

Atributos	Tipo	Descripción
`orderToken`	string	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. NOTA: El checkout widget requiere una orden de tipo PAYMENT_LINK. IMPORTANTE: Al momento de crear la orden con la API de DEUNA no se debe definir una URL de redirección (redirect_url) para que el callback onSuccess se ejecute correctamente.
`callbacks`	JSON	Los callbacks son funciones de retorno que se encargan de escuchar y manejar los eventos del widget. Estos eventos permiten gestionar acciones específicas basadas en el estado del pago. Los principales callbacks incluyen: `onSuccess`, `onError`, `onClosed`, `onCanceled`, `eventListener`
`styleFile` (Opcional)	string	UUID proporcionado por DEUNA. Esto aplica si quieres configurar un archivo `custom styles` personalizado (Cambiar colores, textos, logo, etc). Si se proporciona un valor válido para `styleFile` el checkout widget utilizará la configuración de la UI proporcionada por la configuración del tema que coincida con el UUID proporcionado.

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

Paso 3: Escuchar los Eventos del Widget de Checkout

Cuando una transacción es exitosa o falla, es importante actualizar tu interfaz para notificar a los usuarios sobre el resultado de la transacción. Esto lo puedes realizar escuchando los eventos del widget de pago mediante los callbacks.

Los callbacks pasados a la función initPaymentWidget 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`	Se ejecuta cuando se completó el pago. Este callback contiene un parámetro de tipo JSON con la información de la orden.
`onError`	Se ejecuta cuando ocurre un error al procesar el pago. Este callback contiene un parámetro tipo JSON el cual identifica el tipo de error producido al momento de procesar el pago.
`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) 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 (Opcional): Cerrar el Widget

Por defecto, el widget de pago solo se cierra cuando el usuario presiona el botón de cerrar 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 un pago es exitoso.

await DeunaSDK.initCheckout({
  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("purchaseResponse: ", data);
    },
  },
});

Paso 5 (Opcional): Personalizar la apariencia del widget

Si el checkout widget esta visible y quieres personalizar la apariencia del mismo utiliza la función setCustomStyle.

await DeunaSDK.setCustomStyle({...});

Consulta la siguiente documentación para conocer más a detalle todas las opciones de personalización del checkout widget.

A continuación se muestra un ejemplo de como cambiar los colores y el logo del checkout widget mediante setCustomStyle

await  DeunaSDK.initCheckout({
  orderToken: "<DEUNA order token>", // Obligatorio: Token de la orden para inicializar el widget
  callbacks: {
    onSuccess: ...,
    onEventDispatch: async (event, data) => {
      await DeunaSDK.setCustomStyle({
        theme: {
          colors: {
            primaryTextColor: "#023047",
            backgroundSecondary: "#8ECAE6",
            backgroundPrimary: "#F2F2F2",
            buttonPrimaryFill: "#FFB703",
            buttonPrimaryHover: "#FFB703",
            buttonPrimaryText: "#000000",
            buttonPrimaryActive: "#FFB703",
          },
        },
        HeaderPattern: {
          overrides: {
            Logo: {
              props: {
                url: "https://images-staging.getduna.com/ema/fc78ef09-ffc7-4d04-aec3-4c2a2023b336/test2.png",
              },
            },
          },
        },
      });
    },
  },
});