Getnet DocsGetnet Docs

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

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

RutaPantallaViewStateViewEvent
AmountIngreso del montoBrAmountViewStateBrAmountViewEvent
ProductSelectionSelección del método (crédito/débito/voucher/Pix)BrProductSelectionViewStateBrProductSelectionViewEvent
InstallmentSelectionSelección de cuotasBrInstallmentSelectionViewStateBrInstallmentSelectionViewEvent
CardReadingLectura EMV / mensaje “inserta, acerca o desliza”BrCardReadingViewStateBrCardReadingViewEvent
CardSelectionSelección de aplicación (EMV multiaplicación)BrCardSelectionViewStateBrCardSelectionViewEvent
ProcessingAutorización en cursoBrProcessingViewState—
PaymentSuccessÉxito de la venta con tarjetaBrPaymentSuccessViewStateBrPaymentSuccessViewEvent
PaymentErrorError de la venta con tarjetaBrPaymentErrorViewStateBrPaymentErrorViewEvent
PixQrCodeLoadingCarga del QR de PixPixQrCodeLoadingViewStatePixQrCodeLoadingViewEvent
PixQrCodeVisualización del QR CodePixQrCodeViewStatePixQrCodeViewEvent
PixPaymentRecognitionReconocimiento (ventana de 30 s)PixPaymentRecognitionViewStatePixPaymentRecognitionViewEvent
PixPaymentVerificationVerificación final (ventana de 10 s)PixPaymentVerificationViewStatePixPaymentVerificationViewEvent
PixPaymentSuccessÉxito de PixPixPaymentSuccessViewStatePixPaymentSuccessViewEvent
PixPaymentErrorError de PixPixPaymentErrorViewStatePixPaymentErrorViewEvent
CancelInputIngreso de datos del reembolsoBrCancelInputViewStateBrCancelInputViewEvent
SearchTransactionBúsqueda de la transacción a reembolsarBrSearchTransactionViewStateBrSearchTransactionViewEvent
CancelPaymentConfirmación del reembolsoBrCancelPaymentViewStateBrCancelPaymentViewEvent
CancelPaymentProcessingProcesamiento del reembolsoBrCancelPaymentProcessingViewState—
CancelPaymentSuccessÉxito del reembolsoBrCancelPaymentSuccessViewStateBrCancelPaymentSuccessViewEvent
CancelPaymentErrorError del reembolsoBrCancelPaymentErrorViewStateBrCancelPaymentErrorViewEvent

Siguientes pasos