# Inserta pantallas con Slots

Esta guía muestra cómo insertar una de tus pantallas entre dos pantallas consecutivas del SDK, sin cambiar la lógica del flujo original (Nivel 2 — consulta [Modelo de personalización](/es/getnet-toolbox/sdk-white-label/core-concept-sdk/customization-model)).

## Cómo funciona

El SDK lleva al usuario hasta la pantalla del slot y espera que tu aplicación indique que terminó con `resumeFlow()`. Desde ahí retoma el flujo original. Las pantallas de slot reciben `resumeFlow()` sin argumentos: su única tarea es avisar al SDK que puede continuar.

Registras los slots en `SdkUiNavigationConfig.slotScreens`, con una clave de tipo `BrFlowSlot`:

```kotlin
interface SdkFlowSlot
typealias SlotScreen = @Composable (resumeFlow: () -> Unit) -> Unit
```

## Registra un slot al construir el SDK

```kotlin
import com.pagonxt.sdk.brazil.uxal.navigation.BrFlowSlot
import com.pagonxt.sdk.core.uxal.navigation.SdkUiNavigationConfig

val config = SdkUiNavigationConfig(
    slotScreens = mapOf(
        BrFlowSlot.AmountToProductSelection to { resumeFlow ->
            CustomConfirmationScreen(onConfirm = { resumeFlow() })
        }
    )
)

ApoloSdk.Builder(applicationContext)
    // ...
    .customizeNavigationConfig(config)
    .build()
```

## Registra un slot en tiempo de ejecución

Aplica una configuración después de inicializar el SDK:

```kotlin
val apolo = ApoloSdk.getClient()

val config = SdkUiNavigationConfig(
    slotScreens = mapOf(
        BrFlowSlot.ProcessingToPaymentSuccess to { resumeFlow ->
            OfferScreen(onContinue = { resumeFlow() })
        }
    )
)

apolo.customizeNavigation(config)
```

## Slots disponibles

Cada slot se ubica entre dos pantallas del SDK. Los rectángulos son pantallas del SDK; el slot se inserta entre ellas.

| Slot | Desde → Hacia | Contexto |
| :--- | :--- | :--- |
| `AmountToProductSelection` | Amount → ProductSelection | Venta con tarjeta |
| `ProductSelectionToInstallmentSelection` | ProductSelection → InstallmentSelection | Cuotas de crédito |
| `ProductSelectionToCardReading` | ProductSelection → CardReading | Débito / crédito en una cuota / voucher |
| `ProductSelectionToPixQrCodeLoading` | ProductSelection → PixQrCodeLoading | Pix |
| `InstallmentSelectionToCardReading` | InstallmentSelection → CardReading | Después de elegir las cuotas |
| `CardReadingToCardSelection` | CardReading → CardSelection | EMV multiaplicación |
| `CardReadingToProcessing` | CardReading → Processing | Autorización |
| `CardReadingToPaymentError` | CardReading → PaymentError | Falla de lectura |
| `CardSelectionToProcessing` | CardSelection → Processing | Después de la selección |
| `CardSelectionToPaymentError` | CardSelection → PaymentError | Falla después de la selección |
| `ProcessingToPaymentSuccess` | Processing → PaymentSuccess | Aprobado |
| `ProcessingToPaymentError` | Processing → PaymentError | Rechazado |
| `PixQrCodeLoadingToPixPaymentError` | PixQrCodeLoading → PixPaymentError | Falla al generar el QR |
| `PixQrCodeToPixPaymentSuccess` | PixQrCode → PixPaymentSuccess | Pix aprobado |
| `PixQrCodeToPixPaymentError` | PixQrCode → PixPaymentError | Pix rechazado |
| `PixPaymentRecognitionToPixPaymentSuccess` | PixPaymentRecognition → PixPaymentSuccess | Reconocimiento correcto |
| `PixPaymentRecognitionToPixPaymentError` | PixPaymentRecognition → PixPaymentError | Falla de reconocimiento |
| `PixPaymentVerificationToPixPaymentSuccess` | PixPaymentVerification → PixPaymentSuccess | Verificación correcta |
| `PixPaymentVerificationToPixPaymentError` | PixPaymentVerification → PixPaymentError | Falla de verificación |
| `CancelInputToSearchTransaction` | CancelInput → SearchTransaction | Inicio del reembolso |
| `SearchTransactionToCancelPayment` | SearchTransaction → CancelPayment | Después de la búsqueda |
| `CancelPaymentToCancelPaymentProcessing` | CancelPayment → CancelPaymentProcessing | Confirmación |
| `CancelPaymentProcessingToCancelPaymentSuccess` | CancelPaymentProcessing → CancelPaymentSuccess | Reembolso correcto |
| `CancelPaymentProcessingToCancelPaymentError` | CancelPaymentProcessing → CancelPaymentError | Reembolso fallido |

## Siguientes pasos

* [Sobrescribe las pantallas del SDK](/es/getnet-toolbox/sdk-white-label/how-to-guides-sdk/override-sdk-screens) — reemplaza la apariencia de una pantalla en lugar de insertar una.