# 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](/es/getnet-toolbox/sdk-white-label/core-concept-sdk/customization-model)).

## 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.

```kotlin
interface SdkRoute
interface SdkRouteContract<S : ViewState, E : ViewEvent> : SdkRoute
typealias OverrideScreenTyped<S, E> = @Composable (viewState: S, onEvent: (E) -> Unit) -> Unit
```

Las 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

```kotlin
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](/es/getnet-toolbox/sdk-white-label/how-to-guides-sdk/insert-screens-with-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](/es/getnet-toolbox/sdk-white-label/how-to-guides-sdk/customize-receipts) — reemplaza el diseño del recibo impreso.