Customizing BNPL messaging with Appearance API

[gpressutto5]

Fixes #8253

Changes proposed in this Pull Request

• This PR implements the Appearance API for the BNPL message in product page.
• The filter wcpay_upe_appearance is deprecated in favor of wcpay_elements_appearance to support more element locations
• Two new transients were added: wcpay_upe_bnpl_product_page_appearance and wcpay_upe_bnpl_product_page_appearance_theme. We must add them to this page.

Before	After

Testing instructions

1. Enable Klarna/Afterpay/Affirm and ensure you can see the BNPL message in a product page.
2. Enable a different theme, preferably switch from light to dark, and ensure the message is styled accordingly.
3. Use custom CSS to try different background colors, text colors, and font styles and ensure the message style is updated accordingly.

---

• Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
• Covered with tests (or have a good reason not to test in description ☝️)
• Tested on mobile (or does not apply)

Post merge

• Link to testing instructions from release testing doc following these instructions : Add link here / 'QA Testing Not Applicable'
• Add or update critical flows and testing instructions for critical flows, if applicable.
• Add what's changed (description, screenshot, demo videos etc.) to the release announcement post, if applicable.

[botwoo]

Test the build

Option 1. Jetpack Beta

• Install and activate Jetpack Beta.
• Use this build by searching for PR number 8421 or branch name appearance-api-bnp-message in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.

---

Build info:

• Latest commit: 54c72c7
• Build time: 2024-03-21 17:03:39 UTC

Note: the build is updated when a new commit is pushed to this PR.

[github-actions]

Size Change: +8.53 kB (+1%)

Total Size: 1.2 MB

Filename	Size	Change
release/woocommerce-payments/dist/blocks-checkout.js	54.1 kB	+102 B (0%)
release/woocommerce-payments/dist/checkout.js	37 kB	+115 B (0%)
release/woocommerce-payments/dist/index.js	292 kB	+514 B (0%)
release/woocommerce-payments/dist/multi-currency-switcher-block.js	59.4 kB	+14 B (0%)
release/woocommerce-payments/dist/multi-currency.js	54.4 kB	+28 B (0%)
release/woocommerce-payments/dist/order.js	41.7 kB	+46 B (0%)
release/woocommerce-payments/dist/payment-gateways.js	38.4 kB	+34 B (0%)
release/woocommerce-payments/dist/payment-request.js	12.4 kB	-10 B (0%)
release/woocommerce-payments/dist/product-details.js	16.6 kB	+7.53 kB (+83%)	🆘
release/woocommerce-payments/dist/settings-rtl.css	11 kB	+6 B (0%)
release/woocommerce-payments/dist/settings.css	10.8 kB	+8 B (0%)
release/woocommerce-payments/dist/settings.js	199 kB	+154 B (0%)
release/woocommerce-payments/dist/woopay-express-button.js	21.1 kB	-10 B (0%)

ℹ️ View Unchanged

Filename	Size
release/woocommerce-payments/assets/css/admin.css	1.06 kB
release/woocommerce-payments/assets/css/admin.rtl.css	1.06 kB
release/woocommerce-payments/assets/css/success.css	158 B
release/woocommerce-payments/assets/css/success.rtl.css	158 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css	1.92 kB
release/woocommerce-payments/dist/blocks-checkout.css	1.91 kB
release/woocommerce-payments/dist/cart.js	4.2 kB
release/woocommerce-payments/dist/checkout-rtl.css	405 B
release/woocommerce-payments/dist/checkout.css	406 B
release/woocommerce-payments/dist/index-rtl.css	40 kB
release/woocommerce-payments/dist/index.css	40 kB
release/woocommerce-payments/dist/multi-currency-analytics.js	1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css	3.28 kB
release/woocommerce-payments/dist/multi-currency.css	3.29 kB
release/woocommerce-payments/dist/order-rtl.css	719 B
release/woocommerce-payments/dist/order.css	721 B
release/woocommerce-payments/dist/payment-gateways-rtl.css	1.21 kB
release/woocommerce-payments/dist/payment-gateways.css	1.21 kB
release/woocommerce-payments/dist/payment-request-rtl.css	155 B
release/woocommerce-payments/dist/payment-request.css	155 B
release/woocommerce-payments/dist/product-details-rtl.css	155 B
release/woocommerce-payments/dist/product-details.css	155 B
release/woocommerce-payments/dist/subscription-edit-page.js	669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css	527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css	527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js	19.4 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js	710 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css	120 B
release/woocommerce-payments/dist/subscriptions-empty-state.css	120 B
release/woocommerce-payments/dist/subscriptions-empty-state.js	18.5 kB
release/woocommerce-payments/dist/tos-rtl.css	235 B
release/woocommerce-payments/dist/tos.css	236 B
release/woocommerce-payments/dist/tos.js	21 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js	4.32 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css	155 B
release/woocommerce-payments/dist/woopay-express-button.css	155 B
release/woocommerce-payments/dist/woopay-rtl.css	4.44 kB
release/woocommerce-payments/dist/woopay.css	4.41 kB
release/woocommerce-payments/dist/woopay.js	71 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css	622 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js	812 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js	2.43 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js	1.01 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js	522 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js	581 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js	160 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css	2.37 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js	13.5 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css	2.37 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css	1.03 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css	291 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css	403 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css	3.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css	299 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css	742 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css	572 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css	411 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js	544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js	9.4 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js	6.8 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js	3.83 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js	544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js	2.52 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js	22.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js	11.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js	1.29 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js	502 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js	355 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js	429 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js	1.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js	781 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js	1.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js	1.27 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css	392 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js	3.05 kB

_{compressed-size-action}

[mdmoore]

This all LGTM! Here's an example using dark dark background:

Colors and font sizes all work well also. 🚢