Stripe Credit Card Fields are Truncated in New Payments Design

[mikejolley]

Running the checkout using Storefront on a regular page (I didn't test full width) the fields become truncated like this:

We need to avoid this, in fact, we should probably stop fields truncating and perhaps force them wider, because these act as labels.

[nerrad]

The fields and content here are controlled by the Stripe integration. With it migrated to the Stripe repository I think this is something that will need initially reviewed by them.

I also suspect this is largely impacted by the layout of the theme/view that the block is inserted in.

[reykjalin]

Another solution to this is to force use the inline credit card form, since I don't think the fields will be truncated there.

[reykjalin]

As per discussion in p1621455301035600-slack-woo-stripe we might end up tagging this with category: won't fix and instead direct merchants to, e.g. change the width alignment in the Block Editor.

@v18 what do you think?

[reykjalin]

As per @LevinMedia's request; once we start working on this let's try to make the default layout use the mobile layout; full-width card number input with the expiry and CVC inputs side-by-side underneath the card number input.