Payment sheet user interface style#13361
Open
zainaraza43 wants to merge 3 commits into
Open
Conversation
Adds a public `PaymentSheet.Appearance.UserInterfaceStyle` (Automatic/AlwaysLight/AlwaysDark) so merchants can force Payment Element to a fixed light or dark appearance regardless of the device's system night setting, matching the iOS `configuration.style` option. The forced appearance is resolved per-surface from the appearance the surface holds and exposed through a new `LocalStripeIsDarkTheme` composition local, so colors, text fields, payment-method rows, the Google Pay and primary buttons, and the `PaymentOption.icon()` drawable all honor it consistently rather than reading the device night setting directly. The icon loader additionally loads drawables through a night-overridden Resources so the qualifier-based card brand icons resolve to the forced appearance.
Exposes the new PaymentSheet.Appearance UserInterfaceStyle in the Playground's Appearance editor so the forced light/dark appearance can be toggled (Automatic/AlwaysLight/AlwaysDark) at runtime for testing.
…rride `PaymentOption.icon()` is drawn in the merchant's own UI, outside any Stripe composition, and its light/dark variant was resolved from the process-global `StripeTheme.nightModeOverride` at the cached moment it was first drawn — unrelated to the configured style — so the icon followed the device setting instead of the forced appearance. Resolve the forced override from the configuration the FlowController holds and bake it into the `PaymentOption` at creation: `IconLoader.load` and `PaymentOptionFactory.create` take a `forcedDarkOverride` that takes precedence over the global; `DefaultFlowController` passes `config.appearance.nightModeOverride()`. Embedded/Link/CustomerSheet pass `null` and keep their current behavior via the global fallback.
|
|
zainaraza43
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a new
PaymentSheet.Appearance.UserInterfaceStyle(Automatic/AlwaysLight/AlwaysDark) that lets users force Payment Element to a fixed light or dark appearance regardless of device's system theme setting. The forced appearance is honoured by:primary buttons, and the text cursor, and
PaymentOption.icon()drawable (the "Payment Method" logo the user renders in their own UI).It also adds a "User Interface Style" control into the
paymentsheet-examplePlayground appearance editor for testing purposes.Motivation
Closes #12064
Testing
Added tests
Modified tests
Manually verified
Unit:
Appearance.resolveIsDark(...)/nightModeOverride()truth tables;StripeThemeNightModeOverrideTest;PaymentSelectionIconLoaderTestPaparazzi:
ForcedLightPrimaryButtonScreenshotTestandForcedLightPaymentMethodRowScreenshotTestManually verified in the Playground (see video): Appearance → User Interface Style →
AlwaysLight/AlwaysDark/Automatic, across system light and dark, checking the Payment Method logo, the payment forms/fields, rows, and buttons.Screenshots
Please Note:
Changelog