Applying V2 card styles to V1 element: Floating labels

[FangedParakeet]

Description

Part of #9331

This is an incremental issue is to convert payment element labels to floating labels and apply appropriate dynamic styling to these inputs, using styles from billing information inputs and labels. This applies exclusively to the blocks checkouts (shortcode checkout does not use floating labels).

These inputs should now be presented with floating labels in the blocks checkout

Please find designs linked below in relevant P2.

Designs

pfHfG4-gT-p2#comment-211

Dev Notes

Stripe appearance API floating labels documentation

Additional context

pfHfG4-gT-p2#comment-211

[gpressutto5]

After a lengthy discussion with the Stripe support team, we concluded that we cannot reliably set the input height using the Appearance API. They mentioned a weight multiplication factor of 1.15 applied to single-line input elements internally, which causes an error of a few pixels, but even that doesn't seem right.

For example:

• Setting lineHeight to 1 and fontSize to 16px results in a rendered input height of 19px or 20px.
• When the font-size is 11px it renderes as 14px, so a difference of 3px.
• When the font-size is 20px, the difference is 5px.

The Stripe team confirmed that setting the height to a fixed value is not feasible due to how height is calculated, which depends on several factors. They suggested adjusting the top and bottom padding to achieve the desired height. However, since the pixel difference varies depending on the font size, determining the exact adjustment for each case can be challenging.

More info here p1727286369809099-slack-CU6SYV31A

Can we proceed with the implementation, considering this margin of error? The height of the payment element input will not perfectly match the height of the checkout input.