Fix PMME appearance in checkout (#9621)

Co-authored-by: Timur Karimov <[email protected]>

changelog/fix-pmme-appearance-checkout

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix PMME appearance in checkout

client/checkout/blocks/index.js

@@ -77,8 +77,6 @@ const api = new WCPayAPI(
 	request
 );
 
-const stripeAppearance = getUPEConfig( 'wcBlocksUPEAppearance' );
-
 Object.entries( enabledPaymentMethodsConfig )
 	.filter( ( [ upeName ] ) => upeName !== 'link' )
 	.forEach( ( [ upeName, upeConfig ] ) => {
@@ -114,7 +112,6 @@ Object.entries( enabledPaymentMethodsConfig )
 					api={ api }
 					upeConfig={ upeConfig }
 					upeName={ upeName }
-					stripeAppearance={ stripeAppearance }
 					upeAppearanceTheme={ upeAppearanceTheme }
 				/>
 			),

client/checkout/blocks/payment-elements.js

@@ -36,7 +36,7 @@ const PaymentElements = ( { api, ...props } ) => {
 	useEffect( () => {
 		async function generateUPEAppearance() {
 			// Generate UPE input styles.
-			let upeAppearance = getAppearance( 'blocks_checkout', false, true );
+			let upeAppearance = getAppearance( 'blocks_checkout', false );
 			upeAppearance = await api.saveUPEAppearance(
 				upeAppearance,
 				'blocks_checkout'

client/checkout/blocks/payment-method-label.js

@@ -9,17 +9,16 @@ import { normalizeCurrencyToMinorUnit } from '../utils';
 import { getUPEConfig } from 'wcpay/utils/checkout';
 import { __ } from '@wordpress/i18n';
 import './style.scss';
+import { useEffect, useState } from '@wordpress/element';
+import { getAppearance } from 'wcpay/checkout/upe-styles';
 
-export default ( {
-	api,
-	upeConfig,
-	upeName,
-	stripeAppearance,
-	upeAppearanceTheme,
-} ) => {
+export default ( { api, upeConfig, upeName, upeAppearanceTheme } ) => {
 	const cartData = wp.data.select( 'wc/store/cart' ).getCartData();
 	const bnplMethods = [ 'affirm', 'afterpay_clearpay', 'klarna' ];
 	const isTestMode = getUPEConfig( 'testMode' );
+	const [ appearance, setAppearance ] = useState(
+		getUPEConfig( 'wcBlocksUPEAppearance' )
+	);
 
 	// Stripe expects the amount to be sent as the minor unit of 2 digits.
 	const amount = parseInt(
@@ -38,6 +37,22 @@ export default ( {
 
 	const isCreditCard = upeName === 'card';
 
+	useEffect( () => {
+		async function generateUPEAppearance() {
+			// Generate UPE input styles.
+			let upeAppearance = getAppearance( 'blocks_checkout', false );
+			upeAppearance = await api.saveUPEAppearance(
+				upeAppearance,
+				'blocks_checkout'
+			);
+			setAppearance( upeAppearance );
+		}
+
+		if ( ! appearance ) {
+			generateUPEAppearance();
+		}
+	}, [ api, appearance ] );
+
 	return (
 		<>
 			<div className="payment-method-label">
@@ -63,12 +78,13 @@ export default ( {
 				( upeConfig.countries.length === 0 ||
 					upeConfig.countries.includes( currentCountry ) ) &&
 				amount > 0 &&
-				currentCountry && (
+				currentCountry &&
+				appearance && (
 					<div className="bnpl-message">
 						<Elements
 							stripe={ api.getStripeForUPE( upeName ) }
 							options={ {
-								appearance: stripeAppearance ?? {},
+								appearance: appearance,
 							} }
 						>
 							<PaymentMethodMessagingElement

client/checkout/classic/event-handlers.js

@@ -204,7 +204,8 @@ jQuery( function ( $ ) {
 								decimalPlaces:
 									cartData?.totals?.currency_minor_unit,
 								country: currentCountry,
-							}
+							},
+							'shortcode_checkout'
 						);
 					}
 				}

client/checkout/classic/payment-processing.js

@@ -453,10 +453,11 @@ export async function mountStripePaymentElement(
 export async function mountStripePaymentMethodMessagingElement(
 	api,
 	domElement,
-	cartData
+	cartData,
+	location
 ) {
 	const paymentMethodType = domElement.dataset.paymentMethodType;
-	const appearance = await initializeAppearance( api );
+	const appearance = await initializeAppearance( api, location );
 
 	try {
 		const paymentMethodMessagingElement = api