Address 2px height difference between WooPay and Google Pay

[bborman22]

Describe the bug

The bug description is pulled from this comment.

For some reason the WooPay button at 55px is smaller than the Google Pay ECE button at 55px???

Both are 55px according to the dev tools. Maybe the ECE buttons don't take the border into account so a 1px border means the end result is a height of 57px? That seems to be right:

Setting the max-height of the container to 55px results in an obvious cut-off:

It's only just barely noticable when they're side-by-side.

This issue only applies when the Light or Outline theme is chosen for the express checkout settings. The easiest solution is to adjust the WooPay button height to 57px when Light or Outline theme is selected, but it might be worth following up with Stripe to confirm this is the intended behavior.

To Reproduce

1. Enable both WooPay and Google Pay / Apple Pay.
2. From the express checkout settings choose the Large (55px) option for button size.
3. From the express checkout settings choose the Light or Outline theme for buttons.
4. Load the checkout blocks page in Chrome (so there is only two buttons).
5. Confirm that there is a 2px height difference between the buttons.

Actual behavior

The button heights are different by 2px with Google Pay being larger than WooPay.

Screenshots

Expected behavior

The button heights should be the same in all themes and button sizes.

Additional context

[bborman22]

Hey team! Please add your planning poker estimate with Zenhub @asumaran @cesarcosta99 @lovo-h @rafaelzaleski @reykjalin @ricardo

[reykjalin]

Hmmm, maybe we can fix this somehow with the box-sizing CSS rule?

[asumaran]

It's seems Stripe is hardcoding the element height to 48px for Google Pay only.

Edit: This seems correct as the button size I'm using is 48px

[asumaran]

I'm going to pick this one and fix it as part of #9169