Visual changes to SPE in the classic checkout

[wjrosa]

Fixes #3896

Changes proposed in this Pull Request:

We are updating the Single Payment Element implementation to make all the payment methods it renders to look just like any other WooCommerce payment method to avoid any UX impact for shoppers. However, the Stripe container has some styling limitations.

This PR applies the required styles for the classic/shortcode checkout.

Preview for multiple payment methods:

Preview when Stripe is the only available method:

This PR also disables the saving of methods and the display of instructions when SPE is enabled on the classic checkout, both will be handled by #4049 and #4048 respectively.

Testing instructions

• Checkout and build this branch on your test environment (tweak/visual-changes-to-spe-in-classic-checkout)
• Connect your Stripe account
• On your Stripe dashboard, enable multiple payment methods
• Copy your child payment method configuration ID from here: https://dashboard.stripe.com/settings/payment_methods (labeled "Your configuration")
• Insert the ID above on client/classic/upe/payment-processing.js:136
• Build the frontend files (npm run build:webpack)
• Enable the SPE feature flag (_wcstripe_feature_spe). You can do it by either hardcoding the return value of is_spe_available to true or by running npm run wp option update _wcstripe_feature_spe 'yes'
• As a merchant, disable the legacy checkout experience in settings (wp-admin/admin.php?page=wc-settings&tab=checkout&section=stripe&panel=settings)
• Enable the Single Payment Element feature
• I recommend setting your store currency to EUR so you can have more methods available
• As a shopper, add any product to your cart
• Go to the classic/shortcode checkout page
• Confirm you can see all the payment methods rendered just like the previews above
• Repeat the steps above after enabling another payment method (i.e., PayPal) and verify that it looks like the other preview above

---

• Covered with tests (or have a good reason not to test in description ☝️)
• Tested on mobile (or does not apply)

Changelog entry

• This Pull Request does not require a changelog entry. (Comment required below)

Changelog Entry Comment

Comment

Post merge

• Added testing instructions to the Release Testing Instructions wiki page (or does not apply)
• Added the needs docs label (or does not apply)
• Included this PR in the Release Thread scope (or does not apply)

[malithsen]

Nice work!
Code looks good and tests well.

What do you think about using the same radio button colors within the iframe?
This color mismatch exists in develop as well but I think it's more prominent in the SPE. All good if you want to create a new issue for it.

[wjrosa]

Nice work! Code looks good and tests well.

What do you think about using the same radio button colors within the iframe? This color mismatch exists in develop as well but I think it's more prominent in the SPE. All good if you want to create a new issue for it.

Thanks for the review, Malith! I really appreciate it. I will remove the radio buttons in #4115, so I think it is not worth styling them anymore (that's why I used this PR to also remove some of the styles I applied before).