Fix payment method instructions for OC (#4575)

* Fix payment method instructions for OC

* Changelog and readme entries

* Fix instructions showing up quickly during page load

Author: wjrosa

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 9.9.0 - xxxx-xx-xx =
+* Fix - Payment method test instructions not showing up for the Optimized Checkout payment element
 * Add - Includes a new notice to highlight the Optimized Checkout feature above the payment methods list in the Stripe settings page
 * Update - Increases the default font size for the Optimized Checkout payment element to match the rest of the checkout form
 * Fix - Checks for the subscription payment method (if it is Stripe) when verifying for the payment method detachment

client/blocks/upe/styles.scss

@@ -27,7 +27,7 @@ button.stripe-gateway-stripelink-modal-trigger:hover {
 #radio-control-wc-payment-method-options-stripe__content.optimized-checkout-element {
 	padding-top: 1.4em;
 
-	.content {
+	.content:empty {
 		display: none;
 	}
 }

includes/payment-methods/class-wc-stripe-upe-payment-gateway.php

@@ -262,6 +262,16 @@ public function __construct() {
 
 		// Hide action buttons for pending orders if they take a while to be confirmed.
 		add_filter( 'woocommerce_my_account_my_orders_actions', [ $this, 'filter_my_account_my_orders_actions' ], 10, 2 );
+
+		// For the Optimized Checkout, allow the display property in inline styles to hide payment method instructions (see `get_testing_instructions_for_optimized_checkout`).
+		if ( $this->oc_enabled ) {
+			add_filter(
+				'safe_style_css',
+				function ( $styles ) {
+					return array_merge( $styles, [ 'display' ] );
+				}
+			);
+		}
 	}
 
 	/**
@@ -760,7 +770,21 @@ public function payment_fields() {
 			<?php
 			if ( $this->testmode ) :
 				if ( $this->oc_enabled ) :
-					echo wp_kses_post( self::get_testing_instructions_for_optimized_checkout() );
+					echo wp_kses(
+						self::get_testing_instructions_for_optimized_checkout(),
+						[
+							'div' => [
+								'id'    => [],
+								'class' => [],
+								'style' => [],
+							],
+							'strong' => [],
+							'a'    => [
+								'href'   => [],
+								'target' => [],
+							],
+						]
+					);
 				else :
 					?>
 				<p class="testmode-info">

readme.txt

@@ -111,6 +111,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 == Changelog ==
 
 = 9.9.0 - xxxx-xx-xx =
+* Fix - Payment method test instructions not showing up for the Optimized Checkout payment element
 * Add - Includes a new notice to highlight the Optimized Checkout feature above the payment methods list in the Stripe settings page
 * Update - Increases the default font size for the Optimized Checkout payment element to match the rest of the checkout form
 * Fix - Checks for the subscription payment method (if it is Stripe) when verifying for the payment method detachment