Sobrescribe las pantallas del SDK
Esta guía muestra cómo reemplazar la apariencia de una pantalla del SDK y conservar su comportamiento (Nivel 3 — consulta Modelo de personalización).
Cómo funciona
Tú aportas la UI (un Composable). El SDK aporta el ViewState actual, con los datos y el estado a presentar, y el canal onEvent, para informarle las interacciones del usuario. El SDK construye su pantalla predeterminada con esos mismos artefactos. Por eso tu pantalla reproduce la presentación correcta y devuelve las interacciones necesarias.
interface SdkRoute
interface SdkRouteContract<S : ViewState, E : ViewEvent> : SdkRoute
typealias OverrideScreenTyped<S, E> = @Composable (viewState: S, onEvent: (E) -> Unit) -> UnitLas rutas sin contrato tipado (como la pantalla interna de carga del warm-up) no se pueden sobrescribir. Los Overrides se registran en SdkUiNavigationConfig.overrideScreens.
Sobrescribe una pantalla
import com.pagonxt.sdk.brazil.uxal.navigation.BrSdkRoutes
import com.pagonxt.sdk.core.uxal.navigation.SdkUiNavigationConfig
import com.pagonxt.sdk.core.uxal.navigation.overrideScreen
val config = SdkUiNavigationConfig(
overrideScreens = mapOf(
overrideScreen(BrSdkRoutes.Amount) { viewState, onEvent ->
CustomAmountScreen(
amountFormatted = viewState.amountFormatted,
onAmountChanged = { onEvent(BrAmountViewEvent.OnAmountChanged(it)) },
onConfirm = { onEvent(BrAmountViewEvent.OnContinueClicked) },
)
}
)
)
ApoloSdk.Builder(applicationContext)
// ...
.customizeNavigationConfig(config)
.build()Puedes sobrescribir varias pantallas en la misma configuración. Aplícala al construir el SDK o en tiempo de ejecución con Apolo.customizeNavigation(config) (consulta Inserta pantallas con Slots).
Rutas que puedes sobrescribir
| Ruta | Pantalla | ViewState | ViewEvent |
|---|---|---|---|
Amount | Ingreso del monto | BrAmountViewState | BrAmountViewEvent |
ProductSelection | Selección del método (crédito/débito/voucher/Pix) | BrProductSelectionViewState | BrProductSelectionViewEvent |
InstallmentSelection | Selección de cuotas | BrInstallmentSelectionViewState | BrInstallmentSelectionViewEvent |
CardReading | Lectura EMV / mensaje “inserta, acerca o desliza” | BrCardReadingViewState | BrCardReadingViewEvent |
CardSelection | Selección de aplicación (EMV multiaplicación) | BrCardSelectionViewState | BrCardSelectionViewEvent |
Processing | Autorización en curso | BrProcessingViewState | — |
PaymentSuccess | Éxito de la venta con tarjeta | BrPaymentSuccessViewState | BrPaymentSuccessViewEvent |
PaymentError | Error de la venta con tarjeta | BrPaymentErrorViewState | BrPaymentErrorViewEvent |
PixQrCodeLoading | Carga del QR de Pix | PixQrCodeLoadingViewState | PixQrCodeLoadingViewEvent |
PixQrCode | Visualización del QR Code | PixQrCodeViewState | PixQrCodeViewEvent |
PixPaymentRecognition | Reconocimiento (ventana de 30 s) | PixPaymentRecognitionViewState | PixPaymentRecognitionViewEvent |
PixPaymentVerification | Verificación final (ventana de 10 s) | PixPaymentVerificationViewState | PixPaymentVerificationViewEvent |
PixPaymentSuccess | Éxito de Pix | PixPaymentSuccessViewState | PixPaymentSuccessViewEvent |
PixPaymentError | Error de Pix | PixPaymentErrorViewState | PixPaymentErrorViewEvent |
CancelInput | Ingreso de datos del reembolso | BrCancelInputViewState | BrCancelInputViewEvent |
SearchTransaction | Búsqueda de la transacción a reembolsar | BrSearchTransactionViewState | BrSearchTransactionViewEvent |
CancelPayment | Confirmación del reembolso | BrCancelPaymentViewState | BrCancelPaymentViewEvent |
CancelPaymentProcessing | Procesamiento del reembolso | BrCancelPaymentProcessingViewState | — |
CancelPaymentSuccess | Éxito del reembolso | BrCancelPaymentSuccessViewState | BrCancelPaymentSuccessViewEvent |
CancelPaymentError | Error del reembolso | BrCancelPaymentErrorViewState | BrCancelPaymentErrorViewEvent |
Siguientes pasos
- Personaliza los recibos — reemplaza el diseño del recibo impreso.