# Sobrescreva telas do SDK

Este guia mostra como substituir a aparência de uma tela do SDK preservando o comportamento dela (Nível 3 — consulte [Modelo de personalização](/pt/getnet-toolbox/sdk-white-label/core-concept-sdk/customization-model)).

## Como funciona

Você fornece a UI (um Composable); o SDK fornece o `ViewState` atual (os dados e o estado a exibir) e o canal `onEvent` (para devolver as interações do usuário ao SDK). O SDK monta a própria tela padrão a partir desses mesmos artefatos. Por isso, sua tela reproduz a apresentação correta e devolve as interações necessárias.

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

Rotas sem contrato tipado (como a tela interna de carregamento do warm-up) não podem ser sobrescritas. Você registra os Overrides em `SdkUiNavigationConfig.overrideScreens`.

## Sobrescreva uma tela

```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()
```

Você pode sobrescrever várias telas na mesma configuração. Aplique-a na construção do SDK ou em tempo de execução com `Apolo.customizeNavigation(config)` (consulte [Insira telas com Slots](/pt/getnet-toolbox/sdk-white-label/how-to-guides-sdk/insert-screens-with-slots)).

## Rotas que podem ser sobrescritas

| Rota | Tela | `ViewState` | `ViewEvent` |
| :--- | :--- | :--- | :--- |
| `Amount` | Entrada do valor | `BrAmountViewState` | `BrAmountViewEvent` |
| `ProductSelection` | Seleção do meio de pagamento (crédito/débito/voucher/Pix) | `BrProductSelectionViewState` | `BrProductSelectionViewEvent` |
| `InstallmentSelection` | Seleção de parcelas | `BrInstallmentSelectionViewState` | `BrInstallmentSelectionViewEvent` |
| `CardReading` | Leitura EMV / instrução "inserir, aproximar ou passar" | `BrCardReadingViewState` | `BrCardReadingViewEvent` |
| `CardSelection` | Seleção de aplicação (EMV multiaplicação) | `BrCardSelectionViewState` | `BrCardSelectionViewEvent` |
| `Processing` | Autorização em andamento | `BrProcessingViewState` | — |
| `PaymentSuccess` | Sucesso da venda com cartão | `BrPaymentSuccessViewState` | `BrPaymentSuccessViewEvent` |
| `PaymentError` | Erro da venda com cartão | `BrPaymentErrorViewState` | `BrPaymentErrorViewEvent` |
| `PixQrCodeLoading` | Carregamento do QR Pix | `PixQrCodeLoadingViewState` | `PixQrCodeLoadingViewEvent` |
| `PixQrCode` | Exibição do QR Code | `PixQrCodeViewState` | `PixQrCodeViewEvent` |
| `PixPaymentRecognition` | Reconhecimento (janela de 30s) | `PixPaymentRecognitionViewState` | `PixPaymentRecognitionViewEvent` |
| `PixPaymentVerification` | Verificação final (janela de 10s) | `PixPaymentVerificationViewState` | `PixPaymentVerificationViewEvent` |
| `PixPaymentSuccess` | Sucesso do Pix | `PixPaymentSuccessViewState` | `PixPaymentSuccessViewEvent` |
| `PixPaymentError` | Erro do Pix | `PixPaymentErrorViewState` | `PixPaymentErrorViewEvent` |
| `CancelInput` | Entrada do estorno | `BrCancelInputViewState` | `BrCancelInputViewEvent` |
| `SearchTransaction` | Busca da transação a estornar | `BrSearchTransactionViewState` | `BrSearchTransactionViewEvent` |
| `CancelPayment` | Confirmação do estorno | `BrCancelPaymentViewState` | `BrCancelPaymentViewEvent` |
| `CancelPaymentProcessing` | Processamento do estorno | `BrCancelPaymentProcessingViewState` | — |
| `CancelPaymentSuccess` | Sucesso do estorno | `BrCancelPaymentSuccessViewState` | `BrCancelPaymentSuccessViewEvent` |
| `CancelPaymentError` | Erro do estorno | `BrCancelPaymentErrorViewState` | `BrCancelPaymentErrorViewEvent` |

## Próximos passos

* [Personalize os recibos](/pt/getnet-toolbox/sdk-white-label/how-to-guides-sdk/customize-receipts) — substitua o layout do recibo impresso.