Visual Glitch in Google Pay Button Rendering - Initial Misalignment on Multiple Platforms

[carlos-alex]

Hi Google Play Developer Support,

I’m reaching out regarding an issue that seems to be affecting multiple platforms when rendering the Google Pay button. This issue even occurs in your own development tools, so I believe it’s something widespread that hasn't been fully addressed.

As seen in the first image, the button initially renders with a visual glitch or misalignment, which stabilizes only later (as seen in the second image). This glitch affects the user experience, as the button’s appearance is critical in a payment interface where trust and seamless interaction are key.

It would be great to see this resolved. It seems like a known bug that needs proper attention, and I believe other developers have been impacted by this as well.

Thank you in advance for looking into this, and I look forward to an update.

For reference, please also take a look at this related issue: flutter-stripe/flutter_stripe#1907

Best regards,

[dmengelt]

@carlos-alex this is a "loading animation" displayed until we are able to show the users last used card.

[carlos-alex]

I don't buy that!

pls see this

flutter-stripe/flutter_stripe#1907

Steps to reproduce the behavior:
Display the button

Expected behavior
No errors

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Brand: samsung
Device: a32x
Model: SM-A326B
Manufacturer: samsung
Android version (release): 13
Android SDK version: 33
Security patch: 2024-08-01
Version codename: REL
Version incremental: A326BXXSCCXH1
Bootloader: A326BXXSCCXH1
Board: a32x
Hardware: mt6853
Host: VPHMRB636
ID: TP1A.220624.014
Product: a32xeea
Supported ABIs: [arm64-v8a, armeabi-v7a, armeabi]
Supported 32-bit ABIs: [armeabi-v7a, armeabi]
Supported 64-bit ABIs: [arm64-v8a]
Is physical device: true
System features: [android.hardware.sensor.proximity, com.samsung.android.sdk.camera.processor, com.sec.feature.motionrecognition_service, com.sec.feature.cover.sview, android.hardware.telephony.ims.singlereg, android.hardware.sensor.accelerometer, android.software.controls, android.hardware.faketouch, android.software.telecom, android.hardware.usb.accessory, android.software.backup, android.hardware.touchscreen, android.hardware.touchscreen.multitouch, android.software.print, android.software.activities_on_secondary_displays, com.sec.feature.nfc_authentication_cover, com.samsung.feature.SAMSUNG_EXPERIENCE, com.google.android.feature.ACCESSIBILITY_PRELOAD, com.sec.feature.nfc_authentication, android.software.voice_recognizers, android.software.picture_in_picture, android.hardware.fingerprint, com.samsung.android.knox.knoxsdk, android.hardware.sensor.gyroscope, android.software.vulkan.deqp.level, android.software.cant_save_state, android.hardware.security.model.compatib
Display: TP1A.220624.014.A326BXXSCCXH1
Hardware serial number: unknown
Type: user
Tags: release-keys
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

I/ViewRootImpl@9ab5fbMainActivity: ViewPostIme pointer 0
I/ViewRootImpl@9ab5fbMainActivity: ViewPostIme pointer 1
D/OpenGLRenderer(23574): setSurface called with nullptr
D/OpenGLRenderer(23574): setSurface() destroyed EGLSurface
D/OpenGLRenderer(23574): destroyEglSurface
D/BufferQueueConsumer(23574): ImageReader-315x90f22m5-23574-3 disconnect
I/DynamiteModule(23574): Considering local module com.google.android.gms.wallet_dynamite:0 and remote module com.google.android.gms.wallet_dynamite:243734000
I/DynamiteModule(23574): Selected remote version of com.google.android.gms.wallet_dynamite, version >= 243734000
V/DynamiteModule(23574): Dynamite loader version >= 2, using loadModule2NoCrashUtils
E/ThemeUtils(23574): View class android.support.v7.widget.AppCompatTextView is an AppCompat widget that can only be used with a Theme.AppCompat theme (or descendant).
E/ThemeUtils(23574): View class com.google.android.material.imageview.ShapeableImageView is an AppCompat widget that can only be used with a Theme.AppCompat theme (or descendant).
W/ResourcesCompat(23574): Failed to inflate ColorStateList, leaving it to the framework
W/ResourcesCompat(23574): java.lang.UnsupportedOperationException: Failed to resolve attribute at index 0: TypedValue{t=0x2/d=0x7a040088 a=-1}, theme={InheritanceMap=[id=0x7a1100a8com.google.android.gms:style/PayButtonDarkTheme], Themes=[com.google.android.gms:style/PayButtonDarkTheme, forced, android:style/Theme.DeviceDefault.Light.DarkActionBar, forced, android:style/Theme.DeviceDefault.Light.DarkActionBar, forced]}
W/ResourcesCompat(23574): at android.content.res.TypedArray.getColor(TypedArray.java:529)
W/ResourcesCompat(23574): at m.ij.b(:com.google.android.gms.dynamite_dynamitemodulesc@[email protected] (190400-0):18)
W/ResourcesCompat(23574): at m.ij.a(:com.google.android.gms.dynamite_dynamitemodulesc@[email protected] (190400-0):24)
W/ResourcesCompat(23574): at m.if.a(:com.google.android.gms.dynamite_dynamitemodulesc@[email protected] (190400-0):126)
W/ResourcesCompat(23574): at com.google.android.material.imageview.ShapeableImageView.(:com.google.android.gms.dynamite_dynamitemodulesc@[email protected] (190400-0):31)
W/ResourcesCompat(23574): at com.google.android.material.imageview.ShapeableImageView.(:com.google.android.gms.dynamite_dynamitemodulesc@[email protected] (190400-0):2)
W/ResourcesCompat(23574): at java.lang.reflect.Constructor.newInstance0(Native Method)
W/ResourcesCompat(23574): at java.lang.reflect.Constructor.newInstance(Constructor.java:343)
W/ResourcesCompat(23574): at android.view.LayoutInflater.createView(LayoutInflater.java:876)
W/ResourcesCompat(23574): at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:1028)
W/ResourcesCompat(23574): at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:983)
W/ResourcesCompat(23574): at android.view.LayoutInflater.rInflate(LayoutInflater.java:1145)
W/ResourcesCompat(23574): at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1106)
W/ResourcesCompat(23574): at android.view.LayoutInflater.rInflate(LayoutInflater.java:1148)
W/ResourcesCompat(23574): at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1106)
W/ResourcesCompat(23574): at android.view.LayoutInflater.rInflate(LayoutInflater.java:1148)
W/ResourcesCompat(23574): at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1106)
W/ResourcesCompat(23574): at android.view.LayoutInflater.rInflate(LayoutInflater.java:1148)
W/ResourcesCompat(23574): at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1106)
W/ResourcesCompat(23574): at android.view.LayoutInflater.inflate(LayoutInflater.java:692)
W/ResourcesCompat(23574): at android.view.LayoutInflater.inflate(LayoutInflater.java:544)
W/ResourcesCompat(23574): at m.bdo.d(:com.google.android.gms.dynamite_dynamitemodulesc@[email protected] (190400-0):337)
W/ResourcesCompat(23574): at m.bdo.b(:com.google.android.gms.dynamite_dynamitemodulesc@[email protected] (190400-0):30)
W/ResourcesCompat(23574): at com.google.android.gms.wallet.dynamite.PayButtonCreatorChimeraImpl.newPayButton(:com.google.android.gms.dynamite_dynamitemodulesc@[email protected] (190400-0):51)
W/ResourcesCompat(23574): at m.bde.z(:com.google.android.gms.dynamite_dynamitemodulesc@[email protected] (190400-0):43)
W/ResourcesCompat(23574): at m.qg.onTransact(:com.google.android.gms.dynamite_dynamitemodulesc@[email protected] (190400-0):21)
W/ResourcesCompat(23574): at android.os.Binder.transact(Binder.java:1200)
W/ResourcesCompat(23574): at com.google.android.gms.internal.wallet.zza.zzb(com.google.android.gms:play-services-wallet@@19.3.0:2)
W/ResourcesCompat(23574): at com.google.android.gms.wallet.button.zze.zzd(com.google.android.gms:play-services-wallet@@19.3.0:4)
W/ResourcesCompat(23574): at com.google.android.gms.wallet.button.zzf.zza(com.google.android.gms:play-services-wallet@@19.3.0:6)
W/ResourcesCompat(23574): at com.google.android.gms.wallet.button.PayButton.initialize(com.google.android.gms:play-services-wallet@@19.3.0:17)
W/ResourcesCompat(23574): at io.flutter.plugins.pay_android.view.PayButtonView.buildPayButton(PayButtonView.kt:61)
W/ResourcesCompat(23574): at io.flutter.plugins.pay_android.view.PayButtonView.(PayButtonView.kt:48)
W/ResourcesCompat(23574): at io.flutter.plugins.pay_android.view.PayButtonViewFactory.create(PayButtonViewFactory.kt:27)
W/ResourcesCompat(23574): at io.flutter.plugin.platform.PlatformViewsController.createPlatformView(PlatformViewsController.java:523)
W/ResourcesCompat(23574): at io.flutter.plugin.platform.PlatformViewsController$1.createForTextureLayer(PlatformViewsController.java:197)
W/ResourcesCompat(23574): at io.flutter.embedding.engine.systemchannels.PlatformViewsChannel$1.create(PlatformViewsChannel.java:128)
W/ResourcesCompat(23574): at io.flutter.embedding.engine.systemchannels.PlatformViewsChannel$1.onMethodCall(PlatformViewsChannel.java:55)
W/ResourcesCompat(23574): at io.flutter.plugin.common.MethodChannel$IncomingMethodCallHandler.onMessage(MethodChannel.java:267)
W/ResourcesCompat(23574): at io.flutter.embedding.engine.dart.DartMessenger.invokeHandler(DartMessenger.java:292)
W/ResourcesCompat(23574): at io.flutter.embedding.engine.dart.DartMessenger.lambda$dispatchMessageToQueue$0$io-flutter-embedding-engine-dart-DartMessenger(DartMessenger.java:319)
W/ResourcesCompat(23574): at io.flutter.embedding.engine.dart.DartMessenger$$ExternalSyntheticLambda0.run(Unknown Source:12)
W/ResourcesCompat(23574): at android.os.Handler.handleCallback(Handler.java:942)
W/ResourcesCompat(23574): at android.os.Handler.dispatchMessage(Handler.java:99)
W/ResourcesCompat(23574): at android.os.Looper.loopOnce(Looper.java:226)
W/ResourcesCompat(23574): at android.os.Looper.loop(Looper.java:313)
W/ResourcesCompat(23574): at android.app.ActivityThread.main(ActivityThread.java:8762)
W/ResourcesCompat(23574): at java.lang.reflect.Method.invoke(Native Method)
W/ResourcesCompat(23574): at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:604)
W/ResourcesCompat(23574): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1067)
E/ThemeUtils(23574): View class android.support.v7.widget.AppCompatTextView is an AppCompat widget that can only be used with a Theme.AppCompat theme (or descendant).
E/ThemeUtils(23574): View class android.support.v7.widget.AppCompatTextView is an AppCompat widget that can only be used with a Theme.AppCompat theme (or descendant).
I/PlatformViewsController(23574): Hosting view in view hierarchy for platform view: 2
I/PlatformViewsController(23574): PlatformView is using SurfaceProducer backend
D/BufferQueueConsumer(23574): connect: controlledByApp=true
D/NativeCustomFrequencyManager(23574): [NativeCFMS] BpCustomFrequencyManager::BpCustomFrequencyManager()
D/OpenGLRenderer(23574): eglCreateWindowSurface
W/ConnectionStatusConfig(23574): Dynamic lookup for intent failed for action: com.google.android.gms.wallet.service.BIND
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
D/OpenGLRenderer(23574): CFMS:: SetUp Pid : 23574 Tid : 23631
W/Parcel (23574): Expecting binder but got null!
D/BufferQueueConsumer(23574): connect: controlledByApp=true
D/NativeCustomFrequencyManager(23574): [NativeCFMS] BpCustomFrequencyManager::BpCustomFrequencyManager()
D/OpenGLRenderer(23574): eglCreateWindowSurface
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
D/OpenGLRenderer(23574): CFMS:: SetUp Pid : 23574 Tid : 23631
W/Parcel (23574): Expecting binder but got null!
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
D/OpenGLRenderer(23574): setSurface called with nullptr
D/OpenGLRenderer(23574): setSurface() destroyed EGLSurface
D/OpenGLRenderer(23574): destroyEglSurface
D/BufferQueueConsumer(23574): ImageReader-1x1f22m5-23574-4 disconnect
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/ThemeUtils(23574): View class android.support.v7.widget.AppCompatTextView is an AppCompat widget that can only be used with a Theme.AppCompat theme (or descendant).
E/ThemeUtils(23574): View class android.support.v7.widget.AppCompatTextView is an AppCompat widget that can only be used with a Theme.AppCompat theme (or descendant).
E/FrameEvents(23574): updateAcquireFence: Did not find frame.
E/FrameEvents(23574): updateAcquireFence: Did not find frame.

[dmengelt]

So sorry @carlos-alex I'm not 100% sure if those two issues are related. In this issue you describe a "visual glitch" by including two screenshots showing the Google Pay integration for web.

Your first image really just shows our "loading animation" 😉 We need some time to try to fetch the users last 4 digits of the card.

For flutter-stripe/flutter_stripe#1907 we can certainly look into why you receive this exception.

[carlos-alex]

Hi!,

This GPay issue started occurring after I updated to newer versions of Flutter, Dart, and Android.

Before updating my system, when using GPay on a screen in Dart/Flutter, there were no glitches, and GPay was working perfectly without any errors in the logs.

After updating Flutter/Dart/Android, the GPay button started glitching, and the errors shown in the logs began appearing. This led me to think it might also be a problem affecting web implementations, which is why I reported this issue here in this post.

I also tried various ways to resolve this issue, such as implementing it with the Theme.AppCompat theme and taking all the necessary steps I could, but without success.

I posted a minimal project in (flutter-stripe/flutter_stripe#1907) where the error occurs.

You can see the glitch I’m referring to in the video, but I’m not sure if it’s normal…

Android.Emulator.-.floffy_grap_software_API_35_5554.2024-11-22.17-10-11.mp4

[JlUgia]

Good day @carlos-alex, thank you for reporting the issue you are seeing.
I also think that these two are separate issues. The exception looks very similar to something we are aware of at the moment.
Let me sync back with our colleagues to confirm this hypothesis, and I'll get back to you with more info.