{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-android/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["code-walkthrough","step"]},"type":"markdown"},"seo":{"title":"PaymentSheetColors | Android SDK Reference","description":"Reference for PaymentSheetColors — customize field, button, and error colors in the Finix Android PaymentSheet.","siteUrl":"https://docs.finix.com/","llmstxt":{"hide":false,"sections":[{"title":"Getting Started","includeFiles":["guides/getting-started/**/*.md"],"excludeFiles":[]},{"title":"Online Payments","includeFiles":["guides/online-payments/**/*.md"],"excludeFiles":["guides/online-payments/payment-features/fsa-hsa-non-healthcare-mcc.md"]},{"title":"In-Person Payments","includeFiles":["guides/in-person-payments/**/*.md"],"excludeFiles":[]},{"title":"Subscriptions","includeFiles":["guides/subscriptions/**/*.md"],"excludeFiles":[]},{"title":"After the Payment","includeFiles":["guides/subscriptions/after-the-payment/**/*.md"],"excludeFiles":[]},{"title":"Managing Operations","includeFiles":["guides/managing-operations/**/*.md"],"excludeFiles":[]},{"title":"Platform Payments","includeFiles":["guides/platform-payments/**/*.md"],"excludeFiles":[]},{"title":"Payouts","includeFiles":["guides/payouts/**/*.md"],"excludeFiles":[]},{"title":"Developers","includeFiles":["additional-resources/developers/**/*.md"],"excludeFiles":[]},{"title":"Plugins","includeFiles":["additional-resources/plugins/**/*.md"],"excludeFiles":[]},{"title":"Industry Considerations","includeFiles":["guides/industry-considerations/**/*.md"],"excludeFiles":[]},{"title":"Regional Considerations","includeFiles":["guides/regional-considerations/**/*.md"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeWalkthrough","attributes":{"__idx":1,"filters":{},"filesets":[{"files":[{"path":"android/online/_filesets/colors.kt","content":[{"start":0,"condition":{"steps":["colors-shape"]},"children":["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,",")"]},"",{"start":22,"condition":{"steps":["param-surface"]},"children":["// Dark background with light text","PaymentSheetColors(","    surface = Color(0xFF1A1A2E),","    textColor = Color.White,","    logoTextColor = Color.White,","    containerColor = Color(0xFF2A2A3E)",")"]},"",{"start":32,"condition":{"steps":["param-fields"]},"children":["// Custom brand color for active field states","PaymentSheetColors(","    focusedIndicatorColor = Color(0xFF00897B),","    focusedLabelColor = Color(0xFF00897B),","    containerColor = Color(0xFFF5F5F5),","    placeholderColor = Color(0xFF9E9E9E)",")"]},"",{"start":42,"condition":{"steps":["param-errors"]},"children":["// Custom error colors","PaymentSheetColors(","    errorBorderColor = Color(0xFFD32F2F),","    errorLabelColor = Color(0xFFD32F2F),","    errorContainerColor = Color(0xFFFFEBEE)",")"]},"",{"start":51,"condition":{"steps":["param-buttons"]},"children":["// Custom button colors","PaymentSheetColors(","    tokenizeButtonColor = Color(0xFF00897B),","    tokenizeButtonTextColor = Color.White,","    cancelButtonColor = Color(0xFFEEEEEE),","    cancelButtonTextColor = Color(0xFF424242)",")"]},"",{"start":61,"condition":{"steps":["full-example"]},"children":["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)","    }",")"]},""],"metadata":{"steps":["colors-shape","param-surface","param-fields","param-errors","param-buttons","full-example"]},"basename":"colors.kt","language":"kotlin"}],"downloadAssociatedFiles":[]}],"steps":[{"id":"colors-shape","heading":"PaymentSheetColors shape"},{"id":"param-surface","heading":"surface / textColor / logoTextColor / containerColor"},{"id":"param-fields","heading":"focusedIndicatorColor / unfocusedIndicatorColor / focusedLabelColor / unfocusedLabelColor / placeholderColor"},{"id":"param-errors","heading":"errorBorderColor / errorLabelColor / errorContainerColor / errorPlaceholderColor"},{"id":"param-buttons","heading":"tokenizeButtonColor / tokenizeButtonTextColor / cancelButtonColor / cancelButtonTextColor"},{"id":"full-example","heading":"Full example"}],"inputs":{},"toggles":{}},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"paymentsheetcolors","__idx":0},"children":["PaymentSheetColors"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Controls all colors in the PaymentSheet. Pass an instance to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentSheetColors"]}," parameter of any ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/android/online/payment-sheet"},"children":["PaymentSheet"]}," composable."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All properties are optional. Omit any you don't need and the default value will be used."]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"colors-shape","heading":"PaymentSheetColors shape"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"data class PaymentSheetColors(\n    val surface: Color = Color.White,\n    val logoTextColor: Color = Color.Black,\n    val textColor: Color = Color.Black,\n    val errorContainerColor: Color = FinixErrorTextSurface,\n    val containerColor: Color = FinixGray,\n    val focusedIndicatorColor: Color = FinixBlue,\n    val unfocusedIndicatorColor: Color = Color.Transparent,\n    val focusedLabelColor: Color = FinixBlue,\n    val unfocusedLabelColor: Color = Color.Black,\n    val placeholderColor: Color = FinixPlaceHolderTextGray,\n    val errorBorderColor: Color = FinixErrorRed,\n    val errorLabelColor: Color = FinixErrorRed,\n    val errorPlaceholderColor: Color = FinixPlaceHolderTextGray,\n    val tokenizeButtonColor: Color = FinixBlue,\n    val tokenizeButtonTextColor: Color = Color.White,\n    val cancelButtonColor: Color = FinixRed,\n    val cancelButtonTextColor: Color = Color.White,\n)\n","lang":"kotlin"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"background--text","__idx":1},"children":["Background & Text"]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"param-surface","heading":"surface / textColor / logoTextColor / containerColor"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["surface"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color.White"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Background color of the entire sheet."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color.Black"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Color of text inside input fields."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["logoTextColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color.Black"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Color of the logo label at the top of the form."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["containerColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FinixGray"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Background fill color of each input field."]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"field-states","__idx":2},"children":["Field States"]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"param-fields","heading":"focusedIndicatorColor / unfocusedIndicatorColor / focusedLabelColor / unfocusedLabelColor / placeholderColor"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["focusedIndicatorColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FinixBlue"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Border color of the active (focused) field."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["unfocusedIndicatorColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color.Transparent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Border color of inactive fields."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["focusedLabelColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FinixBlue"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Label color when the field is active."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["unfocusedLabelColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color.Black"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Label color when the field is inactive."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["placeholderColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FinixPlaceHolderTextGray"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Color of placeholder text inside fields."]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"error-states","__idx":3},"children":["Error States"]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"param-errors","heading":"errorBorderColor / errorLabelColor / errorContainerColor / errorPlaceholderColor"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["errorBorderColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FinixErrorRed"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Border color when a field has a validation error."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["errorLabelColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FinixErrorRed"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Label color when a field has a validation error."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["errorContainerColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FinixErrorTextSurface"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Background fill of a field in error state."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["errorPlaceholderColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FinixPlaceHolderTextGray"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Placeholder color in error state."]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"buttons","__idx":4},"children":["Buttons"]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"param-buttons","heading":"tokenizeButtonColor / tokenizeButtonTextColor / cancelButtonColor / cancelButtonTextColor"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tokenizeButtonColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FinixBlue"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Background color of the submit button."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tokenizeButtonTextColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color.White"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Text color of the submit button."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cancelButtonColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FinixRed"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Background color of the cancel button."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cancelButtonTextColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color.White"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Text color of the cancel button."]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"full-example","__idx":5},"children":["Full Example"]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"full-example","heading":"Full example"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Pass ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PaymentSheetColors"]}," to any PaymentSheet composable via the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentSheetColors"]}," parameter."]}]}]}]},"headings":[{"value":"PaymentSheetColors","id":"paymentsheetcolors","depth":1},{"value":"Background & Text","id":"background--text","depth":2},{"value":"Field States","id":"field-states","depth":2},{"value":"Error States","id":"error-states","depth":2},{"value":"Buttons","id":"buttons","depth":2},{"value":"Full Example","id":"full-example","depth":2}],"frontmatter":{"seo":{"title":"PaymentSheetColors | Android SDK Reference","description":"Reference for PaymentSheetColors — customize field, button, and error colors in the Finix Android PaymentSheet."},"markdown":{"toc":{"hide":true}},"footer":{"hide":true}},"lastModified":"2026-05-18T23:35:10.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/android/online/colors","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}