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: https://github.com/flutter-stripe/flutter_stripe/issues/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

https://github.com/flutter-stripe/flutter_stripe/issues/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@243734029@24.37.34 (190400-0):18) W/ResourcesCompat(23574): at m.ij.a(:com.google.android.gms.dynamite_dynamitemodulesc@243734029@24.37.34 (190400-0):24) W/ResourcesCompat(23574): at m.if.a(:com.google.android.gms.dynamite_dynamitemodulesc@243734029@24.37.34 (190400-0):126) W/ResourcesCompat(23574): at com.google.android.material.imageview.ShapeableImageView.(:com.google.android.gms.dynamite_dynamitemodulesc@243734029@24.37.34 (190400-0):31) W/ResourcesCompat(23574): at com.google.android.material.imageview.ShapeableImageView.(:com.google.android.gms.dynamite_dynamitemodulesc@243734029@24.37.34 (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@243734029@24.37.34 (190400-0):337) W/ResourcesCompat(23574): at m.bdo.b(:com.google.android.gms.dynamite_dynamitemodulesc@243734029@24.37.34 (190400-0):30) W/ResourcesCompat(23574): at com.google.android.gms.wallet.dynamite.PayButtonCreatorChimeraImpl.newPayButton(:com.google.android.gms.dynamite_dynamitemodulesc@243734029@24.37.34 (190400-0):51) W/ResourcesCompat(23574): at m.bde.z(:com.google.android.gms.dynamite_dynamitemodulesc@243734029@24.37.34 (190400-0):43) W/ResourcesCompat(23574): at m.qg.onTransact(:com.google.android.gms.dynamite_dynamitemodulesc@243734029@24.37.34 (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 https://github.com/flutter-stripe/flutter_stripe/issues/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 (https://github.com/flutter-stripe/flutter_stripe/issues/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…

https://github.com/user-attachments/assets/7cc614fb-7ae2-42ba-9326-d4893bc95397