Con el Checkout Widget de DEUNA, acepta pagos de forma ágil y rápida en tu app Android. Sigue los siguientes pasos para capturar un pago utilizando el Payment 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 de iOS.

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	Descripción
`context`	El context es el contexto de tu Activity en Android. Proporciona acceso a recursos específicos de la aplicación y a la información del entorno en el que se está ejecutando la aplicación.
`orderToken`	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.
`callbacks`	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`, `onCanceled`, `eventListener`
`userToken` (Opcional)	El bearer token del usuario de DEUNA. Cuando este es enviado, todas las acciones dentro del widget van a hacer sobre este usuario de DEUNA. Importante: para que este userToken sea usado y se le muestren las tarjetas guardadas al cliente, el correo asociado a ese userToken debe ser el mismo que se envía al crear la orden en `billing_address.email`. En caso que ambos correos no coincidan, se usará el flujo sin mostrar las tarjetas por seguridad.
`cssFile` (Opcional)	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 `cssFile` el checkout widget utilizará la configuración de la UI proporcionada por la configuración del tema que coincida con el UUID proporcionado.

val deunaSDK: DeunaSDK = ...

deunaSDK.initCheckout(
    context = YOUR_ACTIVITY_CONTEXT,
    orderToken = "TU_ORDER_TOKEN",
    callbacks = CheckoutCallbacks().apply {
        onSuccess = { response ->
            deunaSDK.close() // Cierra el widget de pago
            // Tu código adicional
        }
        onError = { error ->
            deunaSDK.close() // Cierra el widget de pago
            // Manejo de errores
        }
        onClosed = {
            // El widget de pago fue cerrado
        }
        onCanceled = {
            // El widget de pago fue cancelado por el usuario
            // No es necesario llamar a closeCheckout()
        }
        onEventDispatch = { event, response ->
            // Escuchar los eventos del proceso de pago
            // Tu código aquí
        }
    },
    closeEvents = setOf(CheckoutEvent.changeCart, CheckoutEvent.changeAddress) // Cierra el widget cuando el usuario elige cambiar la dirección o el método de pago
)

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.

La instancia de la clase PaymentWidgetCallbacks pasada a la función initPaymentWidget te permite escuchar los eventos del widget mediante callbacks. 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 Map<String,Any> 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 enum PaymentsError 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, independientemente si el pago se realizó con éxito, ocurrió un error o el usuario canceló la operación. NOTA: El orden de ejecución de `onCanceled` y `onClosed` es el siguiente: - Si el usuario cierra manualmente el widget (presionando el botón X o presionando el botón de retroceso): `onCanceled` > `onClosed`. - Si se cierra el widget mediante código llamando a closePaymentWidget, solo se ejecuta `onClosed`.
`onCanceled`	Se ejecuta cuando el usuario de forma intencional cierra el widget de pago (presionando el botón X o presionando el botón de retroceso) sin que la operación se haya completado.
`onEventDispatch` (Opcional)	Se ejecuta en todas los eventos que pueda producir el widget. Este callback contiene un parámetro de tipo `CheckoutEvent`

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 o cuando presiona el botón de "retroceso" en Android. Para cerrar el modal cuando un pago es exitoso o cuando ocurre un error, debes llamar a la función closePaymentWidget.

El siguiente código de ejemplo muestra cómo cerrar el widget cuando un pago es exitoso.

deunaSDK.initCheckout(
  context = YOUR_ACTIVITY_CONTEXT,
  orderToken = "YOUR_ORDER_TOKEN",
  callbacks = CheckoutCallbacks().apply {
    onSuccess = { data -> 
      deunaSDK.close() // Cierra el widget de pago
      // Tu código adicional
    }
  }
)

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.

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 como cambiar los colores y el logo del checkout widget mediante setCustomStyle

val deunaSDK: DeunaSDK = ...

deunaSDK.initCheckout(
    context = YOUR_ACTIVITY_CONTEXT,
    orderToken = "TU_ORDER_TOKEN",
    callbacks = CheckoutCallbacks().apply {
        onSuccess = ...
        onError = ...
        onClosed = ...
        onCanceled = ...
        eventListener = { event, response ->
            // Escuchar los eventos del proceso de pago
            // Tu código aquí
          deunaSDK.setCustomStyle(
             data = JSONObject(
                        """
                        {
                          "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"
                                }
                              }
                            }
                          }
                        }
                        """
         ).toMap()
        )
        }
    }
)

Paso 6 (Opcional): Revisar Ejemplo Demo App

Para comprender mejor la integración del Payment Widget, revisa el proyecto de ejemplo proporcionado por DEUNA. Este ejemplo te ayudará a entender mejor cómo implementar el widget en tu aplicación Android.

Para acceder al proyecto de ejemplo y obtener más información, consulta la documentación del Ejemplo de Proyecto para Android.