Improve animation in payment sheet screen #10524

cttsai-stripe · 2025-03-29T00:09:48Z

Summary

Sync state updates in PaymenSheetScreenContent to prevent glitchy animation.

Motivation

https://jira.corp.stripe.com/browse/MOBILESDK-2857

Root cause is the async state updates in PaymenSheetScreenContent. See the following recording for detailed step through:
Screen_recording_20250327_231246.webm

Testing

Added tests
Modified tests
Manually verified

Screenshots

Before	After
animation to update pm screen.webm	Screen_recording_20250403_155614.webm

Changelog

[Fixed] Improve animation in payment sheet screen

github-actions · 2025-03-29T00:15:51Z

Diffuse output:

OLD: identity-example-release-base.apk (signature: V1, V2)
NEW: identity-example-release-pr.apk (signature: V1, V2)

          │          compressed          │         uncompressed         
          ├───────────┬───────────┬──────┼───────────┬───────────┬──────
 APK      │ old       │ new       │ diff │ old       │ new       │ diff 
──────────┼───────────┼───────────┼──────┼───────────┼───────────┼──────
      dex │     2 MiB │     2 MiB │  0 B │   4.1 MiB │   4.1 MiB │  0 B 
     arsc │     1 MiB │     1 MiB │  0 B │     1 MiB │     1 MiB │  0 B 
 manifest │   2.3 KiB │   2.3 KiB │  0 B │     8 KiB │     8 KiB │  0 B 
      res │ 302.9 KiB │ 302.9 KiB │  0 B │   457 KiB │   457 KiB │  0 B 
   native │   6.2 MiB │   6.2 MiB │  0 B │  15.8 MiB │  15.8 MiB │  0 B 
    asset │   7.3 KiB │   7.3 KiB │  0 B │   7.1 KiB │   7.1 KiB │  0 B 
    other │  95.1 KiB │  95.1 KiB │ +1 B │ 182.4 KiB │ 182.4 KiB │  0 B 
──────────┼───────────┼───────────┼──────┼───────────┼───────────┼──────
    total │   9.6 MiB │   9.6 MiB │ +1 B │  21.6 MiB │  21.6 MiB │  0 B 

 DEX     │ old   │ new   │ diff      
─────────┼───────┼───────┼───────────
   files │     1 │     1 │ 0         
 strings │ 20142 │ 20142 │ 0 (+0 -0) 
   types │  6235 │  6235 │ 0 (+0 -0) 
 classes │  5026 │  5026 │ 0 (+0 -0) 
 methods │ 30047 │ 30047 │ 0 (+0 -0) 
  fields │ 17385 │ 17385 │ 0 (+0 -0) 

 ARSC    │ old  │ new  │ diff 
─────────┼──────┼──────┼──────
 configs │  164 │  164 │  0   
 entries │ 3644 │ 3644 │  0

APK

   compressed    │   uncompressed   │                                           
──────────┬──────┼───────────┬──────┤                                           
 size     │ diff │ size      │ diff │ path                                      
──────────┼──────┼───────────┼──────┼───────────────────────────────────────────
   29 KiB │ +5 B │    64 KiB │  0 B │ ∆ META-INF/CERT.SF                        
  1.2 KiB │ -2 B │   1.2 KiB │  0 B │ ∆ META-INF/CERT.RSA                       
    271 B │ -1 B │     120 B │  0 B │ ∆ META-INF/version-control-info.textproto 
 25.7 KiB │ -1 B │    64 KiB │  0 B │ ∆ META-INF/MANIFEST.MF                    
──────────┼──────┼───────────┼──────┼───────────────────────────────────────────
 56.1 KiB │ +1 B │ 129.4 KiB │  0 B │ (total)

paymentsheet/src/test/java/com/stripe/android/paymentsheet/PaymentSheetActivityTest.kt

paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/PaymentSheetScreen.kt

cttsai-stripe · 2025-03-31T07:15:05Z

paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/PaymentSheetScreen.kt

+        update = {
+            button?.updateUiState(currentState)
+        },


This seems necessary to sync the state instead of updating within the LaunchedEffect

Can you explain what you mean here?

Originally it was updated async with

LaunchedEffect(viewModel, button) { viewModel.primaryButtonUiState.collect { uiState -> withContext(Dispatchers.Main) { button?.updateUiState(uiState) } } }

Updating the android view along with recomposition by using this update function can solve the janky animation. I am not sure if this is 100% correct.

I'm still not quite following, but the code as written doesn't seem dangerous.

paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/PaymentSheetScreen.kt

jaynewstrom-stripe · 2025-04-02T13:15:33Z

paymentsheet/src/main/java/com/stripe/android/paymentsheet/navigation/PaymentSheetScreen.kt

+            return if (isWalletEnabled || isCompleteFlow) {
+                null
+            } else {
+                if (interactor.state.value.supportedPaymentMethods.singleOrNull()?.code ==


How do we ensure this is called again once the interactor state has changed?

It works because supportedPaymentMethods does not change with the state. It is determined when the interactor is initialized (if I am not wrong). I can refactor this if we decide to go this path.

The one within ManageSavedPaymentMethods would worry me more. That works because interactor.state.title and walletsState share a same dependency interactor.editing, but we shouldn't have implicit dependency like this.

I did not really find a solution for ManageSavedPaymentMethods. If I roll back the change and collect title as a StateFlow in PaymentSheetScreen, the animation would still look janky (but maybe acceptable?)
Screen_recording_20250402_142456.webm

I don't see any animations in the screen recording (maybe I'm missing something).

If we can make progress on this, without making implicit assumptions, I think we should do that.

If the only way to do it is to make implicit assumptions, we could write tests to validate the behavior that exists today in a more end to end/integration style test.

If you look closer, the title/headerText actually blinks. But it seems not quite noticeable! I'll roll back and use StateFlow for title, as no implicit assumption is needed in this case.

paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/PaymentSheetScreen.kt

jaynewstrom-stripe · 2025-04-02T13:18:04Z

paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/PaymentSheetScreen.kt

+        update = {
+            button?.updateUiState(currentState)
+        },


Can you explain what you mean here?

paymentsheet/src/test/java/com/stripe/android/paymentsheet/PaymentSheetActivityTest.kt

This reverts commit 1cc7b25

jaynewstrom-stripe · 2025-04-03T13:36:17Z

paymentsheet/src/main/java/com/stripe/android/paymentsheet/navigation/PaymentSheetScreen.kt

-        override fun showsWalletsHeader(isCompleteFlow: Boolean): StateFlow<Boolean> {
-            return interactor.showsWalletsHeader
-        }
+        override fun showsWalletsHeader(isCompleteFlow: Boolean, walletsState: WalletsState?) =


Is this change necessary?

Ideally we should use !interactor.showsWalletsInline(walletsState) instead. But the current showsWalletsHeader is used in many tests. I can create another PR for this so we are not introducing more complexity here.

jaynewstrom-stripe · 2025-04-03T13:39:04Z

paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/PaymentSheetScreen.kt

+ *
+ */
+@Composable
+internal fun rememberPaymentSheetScreenContentState(


Should this method take in the viewModel instead?

Yes, I think so! And actually we might want to facilitate combineAsStateFlow and mapAsStateFlow in that case. wdyt? Is there a reason that we should avoid these two helpers?

I think we should avoid combineAsStateFlow and mapAsStateFlow.

Those helpers are hacks! We should use compose to do what they do instead. Combine is just a bunch of collectAsState + manual combination with "normal" code. Map is basically the same story. Just collect + do the transformation as "normal" code.

I don't see a use for them when we have the utilities compose provides.

The hacks are basically how we generate the initial value is not consistent with the mental model of how a state flow works. Calling StateFlow.value should just return a value that's already been calculated. Our hacks for combineAsStateFlow and mapAsStateFlow recompute the value instead 😬

paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/PaymentSheetScreen.kt

…screen # Conflicts: # paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/PaymentSheetScreen.kt

cttsai-stripe · 2025-04-03T22:59:19Z

paymentsheet/src/main/java/com/stripe/android/paymentsheet/navigation/PaymentSheetScreen.kt

+                // supportedPaymentMethods does not change
+                if (interactor.state.value.supportedPaymentMethods.singleOrNull()?.code ==


I'll refactor interactor.state.value.supportedPaymentMethods to interactor.supportedPaymentMethods in another PR.

cttsai-stripe · 2025-04-03T23:07:02Z

paymentsheet/src/main/java/com/stripe/android/paymentsheet/navigation/PaymentSheetScreen.kt

-        override fun showsWalletsHeader(isCompleteFlow: Boolean): StateFlow<Boolean> {
-            return interactor.showsWalletsHeader
-        }
+        override fun showsWalletsHeader(isCompleteFlow: Boolean, walletsState: WalletsState?) =


Ideally we should use !interactor.showsWalletsInline(walletsState) instead. But the current showsWalletsHeader is used in many tests. I can create another PR for this so we are not introducing more complexity here.

cttsai-stripe · 2025-04-03T23:08:34Z

paymentsheet/src/main/java/com/stripe/android/paymentsheet/navigation/PaymentSheetScreen.kt

+        override fun title(isCompleteFlow: Boolean, isWalletEnabled: Boolean): ResolvableString? {
+            // Should never be used
+            // headerText of this screen is set in paymentSheetScreenContentState
+            return interactor.state.value.title
+        }


Is there a better way to avoid calling this function? I don't think we want to throw an error though.

cttsai-stripe · 2025-04-03T23:09:36Z

paymentsheet/src/main/java/com/stripe/android/paymentsheet/navigation/PaymentSheetScreen.kt

+        override fun paymentSheetScreenContentState(
+            type: PaymentSheetFlowType,
+            walletsState: WalletsState?,
+            primaryButtonUiState: PrimaryButton.UIState?
+        ): StateFlow<PaymentSheetScreenContentState> {
            return interactor.state.mapAsStateFlow { state ->
-                state.title
+                PaymentSheetScreenContentState(
+                    showsWalletsHeader = false,
+                    actualWalletsState = null,
+                    headerText = state.title,
+                    currentScreen = this,
+                    primaryButtonUiState = primaryButtonUiState
+                )
            }
        }


Most of the screen calls the parent paymentSheetScreenContentState. But we rely on interactor.state here so we need to override the function.

cttsai-stripe · 2025-04-03T23:11:29Z

paymentsheet/src/test/java/com/stripe/android/paymentsheet/PaymentSheetActivityTest.kt

            Espresso.onIdle()
-            assertThat(activity.buyButton.isEnabled)
-                .isTrue()
+            composeTestRule.waitUntil { activity.buyButton.isEnabled }


The weird thing here is that we still need Espresso.onIdle() to pass the test. I suspect this is related to the fact that our PrimaryButton is an AndroidView wrapped by composable.

jaynewstrom-stripe · 2025-04-04T01:31:12Z

paymentsheet/src/main/java/com/stripe/android/paymentsheet/navigation/PaymentSheetScreen.kt

+     *                  PaymentSheetScreenContentState
+     *
+     */
+    fun paymentSheetScreenContentState(


I think there was a misunderstanding here. What I meant was for this to be abstract, and for each of the screens to implement it. I also meant we should remove the other StateFlows and use only this one.

As is, this implementation has the same issues mentioned here.

cttsai-stripe commented Mar 31, 2025

View reviewed changes

paymentsheet/src/test/java/com/stripe/android/paymentsheet/PaymentSheetActivityTest.kt Show resolved Hide resolved

cttsai-stripe commented Mar 31, 2025

View reviewed changes

cttsai-stripe marked this pull request as ready for review March 31, 2025 07:17

cttsai-stripe requested review from a team as code owners March 31, 2025 07:17

cttsai-stripe requested review from samer-stripe and jaynewstrom-stripe March 31, 2025 07:17

jaynewstrom-stripe reviewed Mar 31, 2025

View reviewed changes

paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/PaymentSheetScreen.kt Outdated Show resolved Hide resolved

jaynewstrom-stripe reviewed Mar 31, 2025

View reviewed changes

paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/PaymentSheetScreen.kt Outdated Show resolved Hide resolved

cttsai-stripe added 11 commits April 1, 2025 22:30

Flatten states in PaymentSheetScreenContent to prevent async glitching

8d33de4

Sync PrimaryButton state

6a17839

Refactor function parameters with PaymenSheetScreenContentState

f70e25b

Replace Flow with StateFlow

cfaa7e6

Suppress LongMethod

d589f39

Fix unit tests

76b77f1

State dependency graph

b406c33

Fix lint

a1012f2

Refactor without using combineAsStateFlow

9cb1bfe

Remodel showsWalletsHeader

cbb15b3

Remodel headerText

1cc7b25

cttsai-stripe force-pushed the cttsai/improve-animation-in-payment-sheet-screen branch from 2192d48 to 1cc7b25 Compare April 2, 2025 06:47

jaynewstrom-stripe reviewed Apr 2, 2025

View reviewed changes

cttsai-stripe added 3 commits April 2, 2025 10:23

Replace waitForIdle with waitUntil

48e22d7

Refactor rememberPaymentSheetScreenContentState

b79b760

Revert "Remodel headerText"

496ec8f

This reverts commit 1cc7b25

jaynewstrom-stripe reviewed Apr 3, 2025

View reviewed changes

cttsai-stripe added 2 commits April 3, 2025 14:43

Move ui state emission out of compose

f04abba

Merge branch 'master' into cttsai/improve-animation-in-payment-sheet-…

9ef0dbc

…screen # Conflicts: # paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/PaymentSheetScreen.kt

cttsai-stripe added 3 commits April 3, 2025 15:04

Fix tests

89c617c

Need to wait until primary button state is changed

5390650

Regenerate detekt baseline

8930333

cttsai-stripe commented Apr 3, 2025

View reviewed changes

cttsai-stripe force-pushed the cttsai/improve-animation-in-payment-sheet-screen branch from a3294ee to 1efb380 Compare April 3, 2025 23:38

jaynewstrom-stripe reviewed Apr 4, 2025

View reviewed changes

Minor fix

bc6cfd3

cttsai-stripe force-pushed the cttsai/improve-animation-in-payment-sheet-screen branch from 1efb380 to bc6cfd3 Compare April 4, 2025 04:17

cttsai-stripe mentioned this pull request Apr 8, 2025

Add payment form completion analytic event to EventReporter #10586

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve animation in payment sheet screen #10524

Improve animation in payment sheet screen #10524

cttsai-stripe commented Mar 29, 2025 •

edited

Loading

github-actions bot commented Mar 29, 2025 •

edited

Loading

cttsai-stripe Mar 31, 2025

jaynewstrom-stripe Apr 2, 2025

cttsai-stripe Apr 2, 2025

jaynewstrom-stripe Apr 2, 2025

jaynewstrom-stripe Apr 2, 2025

cttsai-stripe Apr 2, 2025

jaynewstrom-stripe Apr 2, 2025

cttsai-stripe Apr 2, 2025

jaynewstrom-stripe Apr 2, 2025

jaynewstrom-stripe Apr 3, 2025

cttsai-stripe Apr 3, 2025

jaynewstrom-stripe Apr 3, 2025

cttsai-stripe Apr 3, 2025

jaynewstrom-stripe Apr 3, 2025

cttsai-stripe Apr 3, 2025

cttsai-stripe Apr 3, 2025

cttsai-stripe Apr 3, 2025

cttsai-stripe Apr 3, 2025

cttsai-stripe Apr 3, 2025

jaynewstrom-stripe Apr 4, 2025

jaynewstrom-stripe Apr 4, 2025

		// supportedPaymentMethods does not change
		if (interactor.state.value.supportedPaymentMethods.singleOrNull()?.code ==

Improve animation in payment sheet screen #10524

Are you sure you want to change the base?

Improve animation in payment sheet screen #10524

Conversation

cttsai-stripe commented Mar 29, 2025 • edited Loading

Summary

Motivation

Testing

Screenshots

Changelog

github-actions bot commented Mar 29, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cttsai-stripe commented Mar 29, 2025 •

edited

Loading

github-actions bot commented Mar 29, 2025 •

edited

Loading