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 Android.

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. 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`	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.
`styleFile` (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 `styleFile` 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 = { order ->
            deunaSDK.close() // Cierra el widget de pago
            // Tu código adicional
        }
        onError = { error ->
            deunaSDK.close() // Cierra el widget de pago
            // Manejo de errores
        }
        onClosed = { action ->
            // El widget de pago fue cerrado
        }
        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. Este callback contiene un parámetro tipo PaymentsError el cual identifica el tipo de error producido. Consulta un ejemplo de la respuesta del callback aquí.
`onClosed` (Opcional)	Se ejecuta cuando se cierra el widget de pago. Este callback contiene un parámetro de tipo enum `CloseAction` con los siguientes valores: - `userAction`: Cuando el widget fue cerrado manualmente por el usuario, presionando en el botón cerrar (X) o en el botón de retroceso en Android sin que la operación se haya completado. - `systemAction`: Cuando el widget se cierra debido a la ejecución de la función `close`.
`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 close.

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 = { order -> 
      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 = ...
        onEventDispatch = { 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.