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.
Inicializa el Widget
Antes de integrar el Payment Widget, completa los Primeros Pasos - Android.
1. Muestra el Widget
Para mostrar el Checkout Widget, llama a la función initCheckout
pasando los siguientes datos:
Parámetros
Atributos | Descripción |
---|---|
| 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. |
| 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.
|
| 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: |
| 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.
|
| UUID proporcionado por DEUNA. Esto aplica si quieres configurar un archivo |
| 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:
|
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
)
2. Escucha eventos del Widget
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? |
---|---|
| 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. |
| 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í. |
| Se ejecuta cuando se cierra el widget de pago. Este callback contiene un parámetro de tipo enum
|
| 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. |
| Se ejecuta en todas los eventos que pueda producir el widget. Este callback contiene un parámetro de tipo |
3. Cierra 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
.
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
}
}
)
Funcionalidades opcionales
Además de los pasos obligatorios para operar el widget, tienes las siguientes opciones de personalización:
Personalizar la apariencia del widget
Utiliza la función setCustomStyle
para personalizar la apariencia del Widget.
await DeunaSDK.setCustomStyle({...});
Para más información, ve a Personalización de estilos.
Ejemplo
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()
)
}
}
)