search

bigcommerce / checkout-js

Optimized One-Page Checkout
MIT License
112 stars 342 forks source link

feat(payment): PI-2177 Pay with Amazon Button display issues at checkout #1886

Closed bc-sebastianszafraniec closed 1 month ago

bc-sebastianszafraniec commented 1 month ago

What?

Adjusted AmazonPay button styling.

Why?

After changing button design back to one with microtext, at Customer step the microtext is overlaping the button. This only occurs in Customer step as here we are setting all accelerated checkout buttons (paypal, gpay, amazonPay) height to 36px.

Before: Zrzut ekranu 2024-06-6 o 11 48 25

After: Zrzut ekranu 2024-06-6 o 12 15 36

Testing / Proof

Tested manually

@bigcommerce/team-checkout

animesh1987 commented 1 month ago

Hey @bc-sebastianszafraniec can you please attach a screenshot with the other wallet buttons as well example paypal, google pay and apple. Thanks.

bc-sebastianszafraniec commented 1 month ago

@animesh1987 Please find attached video how it behaves with more buttons in customer step. I see a problem in narrower screen when buttons starts to stack one on another. Looks like the Customer step was styled in such a way that each button needs to have 36px and not more.

https://github.com/bigcommerce/checkout-js/assets/130039975/b5fcfc27-bf43-437c-b099-5311b534fd53

Historically:

  1. AmazonPay button was with microtext, but in customer step the microtext from AmazonPay button was removed so all buttons were even and had the same height 36px (here is the checkout-sdk part of task where this styling was removed https://github.com/bigcommerce/checkout-js/pull/1329/files#diff-4a6356f11f1df64cb65836efafd5dd25fbd2d4e51d44dfdbcb83c2c5a2ecefc7)
  2. Later AmazonPay button design was changed to one without microtext in all places
  3. Recently we came back to design with microtext as Amazon wanted. It was set up in all places, also in customer step.

What do you suggest in this situation? Should we remove microtext from button in customer step (but only in customer step) to keep all buttons here the same size so they can stack on each other evenly as it was made originally? If yes, @vitalii-koshovyi you were changing the AmazonPay button design to one with microtext last time. Maybe you know if we should get some special approval to do this again if such a solution with removed microtext in customer step was functioning in BC before?

How it can look when microtext would be removed in customer step

Zrzut ekranu 2024-06-12 o 16 18 55

animesh1987 commented 1 month ago

Thanks @bc-sebastianszafraniec for the detailed information. I will say if possible we should remove the microtext to conform to the layout of buttons in this case.

cc @vitalii-koshovyi

vitalii-koshovyi commented 1 month ago

@animesh1987 we couldn't remove it, it's a recommendation from Amazon. We recently had a specific ticket to return it😁

bc-sebastianszafraniec commented 1 month ago

@animesh1987 As Vitaliy mentioned we need to keep the microtext on AmazonPay button. Please find my solution in last commit. Here is short video how it behaves.

https://github.com/bigcommerce/checkout-js/assets/130039975/9ef885c8-b08e-4804-9ac7-2cd73ab5f65d