Dark Mode style configuration API and Example app toggle #4509

mats-stripe · 2025-01-28T22:08:00Z

Summary

Commit 1:

Creates a Configuration API for the FinancialConnectionsSheet, which is internal-only (for now). The configuration API allows consumers specify their preference for styling the sheet, with these options;

automatic: Appearance will reflect the device's theme, and dynamically switch accordingly.
alwaysLight: Appearance will always use colors appropriate for a light theme.
- This is the default value for now. The default value is likely to switch over to automatic once we release this API.
alwaysDark: Appearance will always use colors appropriate for a dark theme.

Usage of this API follows the same approach as the configuration API in MPE (docs). Here's what that looks like:

var configuration = FinancialConnectionsSheet.Configuration()
configuration.style = .alwaysDark
financialConnectionsSheet.configuration = configuration

Important

Reminder that the API described here is internal-only until a proper API review takes places. Anything mentioned here is subject to change between now and the public release.

Commit 2:

Adds a toggle and style picker in the Financial Connections Example app to test the API mentioned above. Unless the Use dynamic style toggle is enabled, the FC flow should always use a light theme. Otherwise, it should reflect the value in the style picker

Commit 3:

Passes along the value set in the MPE PaymentSheet.Configuration.UserInterfaceStyle along to the FC configuration API, whenever FC is launched from payment sheet. This will ensure users integrating both MPE and FC won't need to make any integration changes to get their desired style configuration.

Important

Reminder that this will have no functional changes until this API is released. FC will continue to always present in "light mode" until we publicize the Configuration API, and remove the ExperimentStore guardrails we have in place.

Motivation

https://docs.google.com/document/d/1bGRPh8J8dvie-JEG4q43DycIBr5zY1GoGF-0RFf0L_Q/edit?usp=sharing

Testing

Simulator.Screen.Recording.-.iPhone.16.-.2025-01-29.at.11.29.53.mp4

Changelog

N/a

emerge-tools · 2025-01-28T22:21:25Z

⚠️ 1 new unused protocol, 4 builds increased size, 4 builds decreased size

Name	Version	Download	Change	Install	Change	Approval
StripeSize com.stripe.StripeSize	1.0 (1)	2.1 MB	⬇️ 1.1 kB (-0.05%)	6.9 MB	⬇️ 328 B	N/A
StripePaymentsSize com.stripe.StripePaymentsSize	1.0 (1)	1.2 MB	⬇️ 2.2 kB (-0.18%)	4.2 MB	⬇️ 336 B	N/A
StripePaymentsUISize com.stripe.StripePaymentsUISize	1.0 (1)	1.9 MB	⬇️ 2.0 kB (-0.1%)	6.4 MB	⬇️ 336 B	N/A
StripePaymentSheetSize com.stripe.StripePaymentSheetSize	1.0 (1)	3.7 MB	⬇️ 6.9 kB (-0.18%)	11.1 MB	⬇️ 20.3 kB (-0.18%)	N/A
StripeIdentitySize com.stripe.StripeIdentitySize	1.0 (1)	1.4 MB	⬇️ 2.3 kB (-0.17%)	4.4 MB	⬆️ 1.4 kB (0.03%)	N/A
StripeApplePaySize com.stripe.StripeApplePaySize	1.0 (1)	486.8 kB	⬇️ 1.9 kB (-0.38%)	1.7 MB	⬆️ 5.2 kB (0.31%)	N/A
StripeFinancialConnectionsSize com.stripe.StripeFinancialConnectionsSize	1.0 (1)	1.5 MB	⬆️ 403 B (0.03%)	4.8 MB	⬆️ 13.2 kB (0.28%)	N/A
StripeConnectSize com.stripe.StripeConnectSize	1.0 (1)	1.7 MB	⬆️ 1.1 kB (0.07%)	5.4 MB	⬆️ 9.0 kB (0.17%)	N/A

StripeSize 1.0 (1)
com.stripe.StripeSize

⚖️ Compare build
⏱️ Analyze build performance

Total install size change: ⬇️ 328 B
Total download size change: ⬇️ 1.1 kB (-0.05%)

Largest size changes

Item	Install Size Change
StripeCore.STPAnalyticEvent.init(rawValue)	⬇️ -4.2 kB
Other	⬆️ 3.8 kB

View Treemap

StripePaymentsSize 1.0 (1)
com.stripe.StripePaymentsSize

⚖️ Compare build
⏱️ Analyze build performance

Total install size change: ⬇️ 336 B
Total download size change: ⬇️ 2.2 kB (-0.18%)

Largest size changes

Item	Install Size Change
StripeCore.STPAnalyticEvent.init(rawValue)	⬇️ -4.2 kB
Other	⬆️ 3.8 kB

View Treemap

StripePaymentsUISize 1.0 (1)
com.stripe.StripePaymentsUISize

⚖️ Compare build
⏱️ Analyze build performance

Total install size change: ⬇️ 336 B
Total download size change: ⬇️ 2.0 kB (-0.1%)

Largest size changes

Item	Install Size Change
StripeCore.STPAnalyticEvent.init(rawValue)	⬇️ -4.2 kB
Other	⬆️ 3.8 kB

View Treemap

StripePaymentSheetSize 1.0 (1)
com.stripe.StripePaymentSheetSize

⚖️ Compare build
⏱️ Analyze build performance

Total install size change: ⬇️ 20.3 kB (-0.18%)
Total download size change: ⬇️ 6.9 kB (-0.18%)

Largest size changes

Item	Install Size Change
🗑 StripePaymentSheet.EmbeddedPaymentElementViewModel	⬇️ -5.6 kB
StripeCore.STPAnalyticEvent.init(rawValue)	⬇️ -4.2 kB
DYLD.Exports	⬇️ -1.3 kB
DYLD.Fixups	⬇️ -960 B
DYLD.String Table	⬇️ -904 B

View Treemap

StripeIdentitySize 1.0 (1)
com.stripe.StripeIdentitySize

⚖️ Compare build
⏱️ Analyze build performance

Total install size change: ⬆️ 1.4 kB (0.03%)
Total download size change: ⬇️ 2.3 kB (-0.17%)

Largest size changes

Item	Install Size Change
StripeCore.STPAnalyticEvent.init(rawValue)	⬇️ -4.2 kB
Other	⬆️ 5.5 kB

View Treemap

StripeApplePaySize 1.0 (1)
com.stripe.StripeApplePaySize

⚖️ Compare build
⏱️ Analyze build performance

Total install size change: ⬆️ 5.2 kB (0.31%)
Total download size change: ⬇️ 1.9 kB (-0.38%)

Largest size changes

Item	Install Size Change
StripeCore.STPAnalyticEvent.init(rawValue)	⬇️ -4.2 kB
Other	⬆️ 9.3 kB

View Treemap

StripeFinancialConnectionsSize 1.0 (1)
com.stripe.StripeFinancialConnectionsSize

⚖️ Compare build
⏱️ Analyze build performance

Total install size change: ⬆️ 13.2 kB (0.28%)
Total download size change: ⬆️ 403 B (0.03%)

Largest size changes

Item	Install Size Change
StripeCore.STPAnalyticEvent.init(rawValue)	⬇️ -4.2 kB
DYLD.Exports	⬆️ 1.3 kB
📝 StripeFinancialConnections.NativeFlowAPIDataManager.init(manifest...	⬆️ 1.0 kB
🗑 StripeFinancialConnections.NativeFlowAPIDataManager.init(manifest...	⬇️ -1.0 kB
Other	⬆️ 16.0 kB

View Treemap

StripeConnectSize 1.0 (1)
com.stripe.StripeConnectSize

⚠️ Found new unused protocol: EmbeddedPaymentElementDelegate
⚖️ Compare build
⏱️ Analyze build performance

Total install size change: ⬆️ 9.0 kB (0.17%)
Total download size change: ⬆️ 1.1 kB (0.07%)

Largest size changes

Item	Install Size Change
StripeCore.STPAnalyticEvent.init(rawValue)	⬇️ -4.2 kB
DYLD.Exports	⬆️ 1.3 kB
📝 StripeFinancialConnections.NativeFlowAPIDataManager.init(manifest...	⬆️ 1.0 kB
🗑 StripeFinancialConnections.NativeFlowAPIDataManager.init(manifest...	⬇️ -1.0 kB
Other	⬆️ 11.8 kB

View Treemap

🛸 Powered by Emerge Tools

mats-stripe · 2025-01-29T16:25:11Z

...ialConnections Example/FinancialConnections Example/Playground/PlaygroundConfiguration.swift

-            // Save to user defaults
-            Self.useAsyncAPIClientStorage = newValue
+            // Save to experiment store
+            ExperimentStore.shared.useAsyncAPIClient = newValue


Switch to using a singleton-based experiment store instead of directly storing on UserDefaults. The underlying values are still read from and written to UserDefaults via configurationStore.

mats-stripe · 2025-01-29T16:26:15Z

StripeFinancialConnections/StripeFinancialConnections/Source/FinancialConnectionsSheet.swift

@@ -79,10 +117,13 @@ final public class FinancialConnectionsSheet {

    private var wrapperViewController: ModalPresentationWrapperViewController?

-    // Any additional Elements context useful for the Financial Connections SDK.
+    /// Contains all configurable properties of Financial Connections.
+    @_spi(STP) public var configuration: FinancialConnectionsSheet.Configuration = .init()


Internal API (for now)

...ancialConnections/Source/FinancialConnectionsSDK/FinancialConnectionsSDKImplementation.swift

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Link/LinkPaymentController.swift

...StripePaymentSheet/Source/PaymentSheet/ViewControllers/PaymentMethodFormViewController.swift

…nto ElementsSessionContext.StyleConfig

mats-stripe changed the title ~~Financial Connections style configuration API~~ Dark Mode style configuration API Jan 29, 2025

mats-stripe changed the title ~~Dark Mode style configuration API~~ Dark Mode style configuration API and Example app toggle Jan 29, 2025

mats-stripe force-pushed the mats/fc_configuration_api branch from f953126 to 5842402 Compare January 29, 2025 16:22

mats-stripe commented Jan 29, 2025

View reviewed changes

mats-stripe force-pushed the mats/fc_configuration_api branch 2 times, most recently from 6ab0810 to 9bedd68 Compare January 29, 2025 18:41

mats-stripe marked this pull request as ready for review January 29, 2025 18:48

mats-stripe requested review from a team as code owners January 29, 2025 18:48

Base automatically changed from mats/fc_dark_mode_appearance to master January 29, 2025 20:40

mats-stripe added 5 commits January 29, 2025 15:49

Replace background color instances

ffb8a1a

Clean up remaining colors, isolate raw assets

b43a4a1

Create Configuration object for FinancialConnectionsSheet

5d4f576

Add style toggle in FC Example app

2000339

Pass along style config from MPE to FC

f0ee717

mats-stripe force-pushed the mats/fc_configuration_api branch from 9bedd68 to f0ee717 Compare January 29, 2025 20:54

mats-stripe requested a review from tillh-stripe January 29, 2025 21:08

tillh-stripe previously approved these changes Jan 30, 2025

View reviewed changes

Add convenience init to transform a PaymentSheet.UserInterfaceStyle i…

44e7d9c

…nto ElementsSessionContext.StyleConfig

mats-stripe dismissed tillh-stripe’s stale review via 44e7d9c January 31, 2025 15:00

tillh-stripe approved these changes Jan 31, 2025

View reviewed changes

mats-stripe merged commit 847b7cb into master Jan 31, 2025
6 checks passed

mats-stripe deleted the mats/fc_configuration_api branch January 31, 2025 16:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dark Mode style configuration API and Example app toggle #4509

Dark Mode style configuration API and Example app toggle #4509

mats-stripe commented Jan 28, 2025 •

edited

Loading

emerge-tools bot commented Jan 28, 2025 •

edited

Loading

mats-stripe Jan 29, 2025

mats-stripe Jan 29, 2025

Dark Mode style configuration API and Example app toggle #4509

Dark Mode style configuration API and Example app toggle #4509

Conversation

mats-stripe commented Jan 28, 2025 • edited Loading

Summary

Commit 1:

Commit 2:

Commit 3:

Motivation

Testing

Changelog

emerge-tools bot commented Jan 28, 2025 • edited Loading

⚠️ 1 new unused protocol, 4 builds increased size, 4 builds decreased size

StripeSize 1.0 (1)com.stripe.StripeSize

StripePaymentsSize 1.0 (1)com.stripe.StripePaymentsSize

StripePaymentsUISize 1.0 (1)com.stripe.StripePaymentsUISize

StripePaymentSheetSize 1.0 (1)com.stripe.StripePaymentSheetSize

StripeIdentitySize 1.0 (1)com.stripe.StripeIdentitySize

StripeApplePaySize 1.0 (1)com.stripe.StripeApplePaySize

StripeFinancialConnectionsSize 1.0 (1)com.stripe.StripeFinancialConnectionsSize

StripeConnectSize 1.0 (1)com.stripe.StripeConnectSize

mats-stripe Jan 29, 2025

Choose a reason for hiding this comment

mats-stripe Jan 29, 2025

Choose a reason for hiding this comment

mats-stripe commented Jan 28, 2025 •

edited

Loading

emerge-tools bot commented Jan 28, 2025 •

edited

Loading

StripeSize 1.0 (1)
com.stripe.StripeSize

StripePaymentsSize 1.0 (1)
com.stripe.StripePaymentsSize

StripePaymentsUISize 1.0 (1)
com.stripe.StripePaymentsUISize

StripePaymentSheetSize 1.0 (1)
com.stripe.StripePaymentSheetSize

StripeIdentitySize 1.0 (1)
com.stripe.StripeIdentitySize

StripeApplePaySize 1.0 (1)
com.stripe.StripeApplePaySize

StripeFinancialConnectionsSize 1.0 (1)
com.stripe.StripeFinancialConnectionsSize

StripeConnectSize 1.0 (1)
com.stripe.StripeConnectSize