Skip to main content
Primer Checkout Android SDK is currently in beta (v3.0.0-beta.2). The API is subject to change before the stable release.
Modal bottom sheet composable with built-in navigation between screens (splash, loading, payment methods, card form, success, error). Each screen is a slot parameter you can override.

Signature

@Composable
fun PrimerCheckoutSheet(
    checkout: PrimerCheckoutController,
    modifier: Modifier = Modifier,
    onDismiss: () -> Unit = {},
    onEvent: (PrimerCheckoutEvent) -> Unit = {},
    theme: PrimerTheme = PrimerTheme(),
    splash: @Composable () -> Unit = { PrimerCheckoutSheetDefaults.Splash() },
    loading: @Composable () -> Unit = { PrimerCheckoutSheetDefaults.Loading() },
    paymentMethodSelection: @Composable () -> Unit = {
        PrimerCheckoutSheetDefaults.PaymentMethodSelection(checkout)
    },
    cardForm: @Composable () -> Unit = {
        val controller = rememberCardFormController(checkout)
        PrimerCardForm(controller = controller)
    },
    success: @Composable (PrimerCheckoutData) -> Unit = { data ->
        PrimerCheckoutSheetDefaults.Success(data)
    },
    error: @Composable (PrimerError) -> Unit = { error ->
        PrimerCheckoutSheetDefaults.Error(error)
    },
)

Parameters

ParameterTypeDefaultDescription
checkoutPrimerCheckoutControllerRequiredCheckout controller that drives the sheet lifecycle
modifierModifierModifierModifier applied to the bottom sheet container
onDismiss() -> Unit{}Called on swipe down, back press, or auto-dismiss after result screen
onEvent(PrimerCheckoutEvent) -> Unit{}Payment outcome events. See PrimerCheckoutEvent
themePrimerThemePrimerTheme()Design tokens applied to all components within the sheet
splash@Composable () -> UnitDefaults.Splash()Slot displayed briefly when the sheet first opens
loading@Composable () -> UnitDefaults.Loading()Slot displayed during payment processing
paymentMethodSelection@Composable () -> UnitDefaults.PaymentMethodSelection(checkout)Slot for payment method selection screen
cardForm@Composable () -> UnitPrimerCardForm(...)Slot for card payment form screen
success@Composable (PrimerCheckoutData) -> UnitDefaults.Success(data)Slot after successful payment. Auto-dismisses after 3 seconds.
error@Composable (PrimerError) -> UnitDefaults.Error(error)Slot after payment failure. Shows retry and “try other methods” options.

PrimerCheckoutSheetDefaults

Pre-built composable implementations for each screen slot.
object PrimerCheckoutSheetDefaults {
    @Composable fun Splash()
    @Composable fun Loading()
    @Composable fun Success(checkoutData: PrimerCheckoutData)
    @Composable fun Error(error: PrimerError)
    @Composable fun PaymentMethodSelection(checkout: PrimerCheckoutController)
    @Composable fun VaultedMethods(checkout: PrimerCheckoutController)
    @Composable fun PaymentMethods(checkout: PrimerCheckoutController)
}
FunctionDescription
Splash()Brief splash screen with Primer logo and loading animation
Loading()Centered circular progress indicator during payment processing
Success(checkoutData)Checkmark animation and payment confirmation. Auto-dismisses after 3 seconds.
Error(error)Error message with retry and “try other methods” options
PaymentMethodSelection(checkout)Vaulted methods (if any) + available payment methods
VaultedMethods(checkout)Saved payment methods section only
PaymentMethods(checkout)Available payment methods section only (excluding vaulted)

PrimerCheckoutSheet vs PrimerCheckoutHost

FeaturePrimerCheckoutSheetPrimerCheckoutHost
PresentationModal bottom sheetInline in your layout
NavigationBuilt-in screen transitionsYou manage navigation
DismissalSwipe, back press, auto-dismissYou control visibility
Success/error screensBuilt-in slots (customizable)You build your own
3DS/redirect flowsHandled within the sheetOverlay sheet appears on top