Developer tools

Checkout Widget - iOS

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.

Inicializa el Widget

Antes de integrar el Payment Widget, completa los Primeros Pasos - iOS.

Paso 2: Mostrar el Widget

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

Parámetros

AtributosDescripción
contextEl 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.
orderTokenEl 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.
callbacksLos 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
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.
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 comerciante.
- Si no se proporciona: El widget utilizará el idioma configurado por el comerciante.
let deunaSDK: DeunaSDK = ...

deunaSDK.initCheckout(
    orderToken: "TU_ORDER_TOKEN",
    callbacks: CheckoutCallbacks(
        onSuccess: { order 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: { action in
            // El widget de pago fue cerrado
        },
        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.

Callbacks

Callback¿Cuándo se dispara?
onSuccessSe 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í.
onErrorSe 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 deslizando el modal hacia abajo) 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 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.