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.
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.
Updated 4 days ago