Con el Checkout Widget de DEUNA, acepta pagos de forma ágil y rápida en tu app iOS. 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 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`
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.

let deunaSDK: DeunaSDK = ...

deunaSDK.initCheckout(
    orderToken: "TU_ORDER_TOKEN",
    callbacks: CheckoutCallbacks(
        onSuccess: { _ in
           // El pago fue exitoso
           self.deunaSDK.close() // Cierra el widget de pago
        },
        onError: { error in
            // Ocurrió un error al procesar el pago
            self.deunaSDK.close() // Cierra el widget de pago
        },
        onClosed: {
            // El widget de pago fue cerrado
        },
        onCanceled: {
          // El widget de pago fue cerrado por el usuario
          // No es necesario llamar a closeCheckout(...)
        },
        eventListener: { event, _ in
            // Escuchar los eventos del proceso de pago

            // Cierra el widget cuando el usuario elige cambiar la dirección o el método de pago
            if event == .changeCart || event == .changeAddress {
                self.deunaSDK.close()
            }
        }
    )
)

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 `[String:Any]` con la información de la orden. Consulta un ejemplo de la respuesta del callback aquí.
`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. Consulta un ejemplo de la respuesta del callback aquí.
`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 deslizando el modal hacia abajo): `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 deslizando el modal hacia abajo) 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.

let deunaSDK: DeunaSDK = ...

deunaSDK.initCheckout(
    orderToken: "TU_ORDER_TOKEN",
    callbacks: CheckoutCallbacks(
        onEventDispatch: { event, _ in
            // Escuchar los eventos del proceso de pago

            // Cierra el widget cuando el usuario elige cambiar la dirección o el método de pago
            if event == .changeCart || event == .changeAddress {
                self.deunaSDK.close()
            }
        }
    )
)

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

// Extension to convert a String to a Dictionary(JSON)
extension String {
    func toDictionary() -> [String: Any]? {
        guard let data = data(using: .utf8) else {
            return nil
        }
        do {
            let dictionary = try JSONSerialization.jsonObject(with: data, options: []) as? [String: Any]
            return dictionary
        } catch {
            print("Error: \(error.localizedDescription)")
            return nil
        }
    }
}

.
.
.

deunaSDK.initCheckout(
    orderToken: "TU_ORDER_TOKEN",
    callbacks: CheckoutCallbacks(
        onEventDispatch: { event, _ in
             self.deunaSDK.setCustomStyle(data: """
                        {
                          "theme": {
                            "colors": {
                              "primaryTextColor": "#023047",
                              "backgroundSecondary": "#8ECAE6",
                              "backgroundPrimary": "#8ECAE6",
                              "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"
                                }
                              }
                            }
                          }
                        }
                        """.toDictionary() ?? [:]
        )   
        }
    )
)

Paso 6 (Opcional): Revisar Ejemplo Demo App

Para comprender mejor la integración del Checkout 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.