Skip to content

PaymentSheetColors

Controls all colors in the PaymentSheet. Pass an instance to the paymentSheetColors parameter of any PaymentSheet composable.

All properties are optional. Omit any you don't need and the default value will be used.

PaymentSheetColors shape

data class PaymentSheetColors(
    val surface: Color = Color.White,
    val logoTextColor: Color = Color.Black,
    val textColor: Color = Color.Black,
    val errorContainerColor: Color = FinixErrorTextSurface,
    val containerColor: Color = FinixGray,
    val focusedIndicatorColor: Color = FinixBlue,
    val unfocusedIndicatorColor: Color = Color.Transparent,
    val focusedLabelColor: Color = FinixBlue,
    val unfocusedLabelColor: Color = Color.Black,
    val placeholderColor: Color = FinixPlaceHolderTextGray,
    val errorBorderColor: Color = FinixErrorRed,
    val errorLabelColor: Color = FinixErrorRed,
    val errorPlaceholderColor: Color = FinixPlaceHolderTextGray,
    val tokenizeButtonColor: Color = FinixBlue,
    val tokenizeButtonTextColor: Color = Color.White,
    val cancelButtonColor: Color = FinixRed,
    val cancelButtonTextColor: Color = Color.White,
)

Background & Text

surface / textColor / logoTextColor / containerColor

PropertyDefaultDescription
surfaceColor.WhiteBackground color of the entire sheet.
textColorColor.BlackColor of text inside input fields.
logoTextColorColor.BlackColor of the logo label at the top of the form.
containerColorFinixGrayBackground fill color of each input field.

Field States

focusedIndicatorColor / unfocusedIndicatorColor / focusedLabelColor / unfocusedLabelColor / placeholderColor

PropertyDefaultDescription
focusedIndicatorColorFinixBlueBorder color of the active (focused) field.
unfocusedIndicatorColorColor.TransparentBorder color of inactive fields.
focusedLabelColorFinixBlueLabel color when the field is active.
unfocusedLabelColorColor.BlackLabel color when the field is inactive.
placeholderColorFinixPlaceHolderTextGrayColor of placeholder text inside fields.

Error States

errorBorderColor / errorLabelColor / errorContainerColor / errorPlaceholderColor

PropertyDefaultDescription
errorBorderColorFinixErrorRedBorder color when a field has a validation error.
errorLabelColorFinixErrorRedLabel color when a field has a validation error.
errorContainerColorFinixErrorTextSurfaceBackground fill of a field in error state.
errorPlaceholderColorFinixPlaceHolderTextGrayPlaceholder color in error state.

Buttons

tokenizeButtonColor / tokenizeButtonTextColor / cancelButtonColor / cancelButtonTextColor

PropertyDefaultDescription
tokenizeButtonColorFinixBlueBackground color of the submit button.
tokenizeButtonTextColorColor.WhiteText color of the submit button.
cancelButtonColorFinixRedBackground color of the cancel button.
cancelButtonTextColorColor.WhiteText color of the cancel button.

Full Example

Full example

Pass PaymentSheetColors to any PaymentSheet composable via the paymentSheetColors parameter.

data class PaymentSheetColors(
    val surface: Color = Color.White,
    val logoTextColor: Color = Color.Black,
    val textColor: Color = Color.Black,
    val errorContainerColor: Color = FinixErrorTextSurface,
    val containerColor: Color = FinixGray,
    val focusedIndicatorColor: Color = FinixBlue,
    val unfocusedIndicatorColor: Color = Color.Transparent,
    val focusedLabelColor: Color = FinixBlue,
    val unfocusedLabelColor: Color = Color.Black,
    val placeholderColor: Color = FinixPlaceHolderTextGray,
    val errorBorderColor: Color = FinixErrorRed,
    val errorLabelColor: Color = FinixErrorRed,
    val errorPlaceholderColor: Color = FinixPlaceHolderTextGray,
    val tokenizeButtonColor: Color = FinixBlue,
    val tokenizeButtonTextColor: Color = Color.White,
    val cancelButtonColor: Color = FinixRed,
    val cancelButtonTextColor: Color = Color.White,
)

// Dark background with light text
PaymentSheetColors(
    surface = Color(0xFF1A1A2E),
    textColor = Color.White,
    logoTextColor = Color.White,
    containerColor = Color(0xFF2A2A3E)
)

// Custom brand color for active field states
PaymentSheetColors(
    focusedIndicatorColor = Color(0xFF00897B),
    focusedLabelColor = Color(0xFF00897B),
    containerColor = Color(0xFFF5F5F5),
    placeholderColor = Color(0xFF9E9E9E)
)

// Custom error colors
PaymentSheetColors(
    errorBorderColor = Color(0xFFD32F2F),
    errorLabelColor = Color(0xFFD32F2F),
    errorContainerColor = Color(0xFFFFEBEE)
)

// Custom button colors
PaymentSheetColors(
    tokenizeButtonColor = Color(0xFF00897B),
    tokenizeButtonTextColor = Color.White,
    cancelButtonColor = Color(0xFFEEEEEE),
    cancelButtonTextColor = Color(0xFF424242)
)

CompletePaymentSheetOutlined(
    applicationId = "APgPDQrLD52TYvqazjHJJchM",
    isSandbox = false,
    paymentSheetColors = PaymentSheetColors(
        surface = Color.White,
        focusedIndicatorColor = Color(0xFF00897B),
        focusedLabelColor = Color(0xFF00897B),
        containerColor = Color(0xFFF5F5F5),
        tokenizeButtonColor = Color(0xFF00897B),
        tokenizeButtonTextColor = Color.White,
        cancelButtonColor = Color(0xFFEEEEEE),
        cancelButtonTextColor = Color(0xFF424242)
    ),
    onDismiss = { viewModel.setShowPaymentSheet(false) },
    onNegativeClick = { viewModel.setShowPaymentSheet(false) },
    onPositiveClick = { token ->
        viewModel.saveTokenResponse(token)
        viewModel.setShowPaymentSheet(false)
    }
)