fix: remove 'test mode' badge from shortcode checkout

changelog/fix-remove-shortcode-test-mode-badge-from-label

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+fix: remove "test mode" badge from shortcode checkout.

client/checkout/classic/event-handlers.js

@@ -169,43 +169,55 @@ jQuery( function ( $ ) {
 
 	async function injectStripePMMEContainers() {
 		const bnplMethods = [ 'affirm', 'afterpay_clearpay', 'klarna' ];
+		const labelBase = 'payment_method_woocommerce_payments_';
 		const paymentMethods = getUPEConfig( 'paymentMethodsConfig' );
 		const paymentMethodsKeys = Object.keys( paymentMethods );
 		const cartData = await api.pmmeGetCartData();
 
 		for ( const method of paymentMethodsKeys ) {
 			if ( bnplMethods.includes( method ) ) {
+				const targetLabel = document.querySelector(
+					`label[for="${ labelBase }${ method }"]`
+				);
 				const containerID = `stripe-pmme-container-${ method }`;
-				const container = document.getElementById( containerID );
 
-				if ( ! container ) {
-					continue;
+				if ( document.getElementById( containerID ) ) {
+					document.getElementById( containerID ).innerHTML = '';
 				}
 
-				container.innerHTML = '';
-				container.dataset.paymentMethodType = method;
-
-				const currentCountry =
-					cartData?.billing_address?.country ||
-					getUPEConfig( 'storeCountry' );
-				if (
-					paymentMethods[ method ]?.countries.length === 0 ||
-					paymentMethods[ method ]?.countries?.includes(
-						currentCountry
-					)
-				) {
-					await mountStripePaymentMethodMessagingElement(
-						api,
-						container,
-						{
-							amount: cartData?.totals?.total_price,
-							currency: cartData?.totals?.currency_code,
-							decimalPlaces:
-								cartData?.totals?.currency_minor_unit,
-							country: currentCountry,
-						},
-						'shortcode_checkout'
-					);
+				if ( targetLabel ) {
+					let container = document.getElementById( containerID );
+					if ( ! container ) {
+						container = document.createElement( 'span' );
+						container.id = containerID;
+						container.dataset.paymentMethodType = method;
+						container.classList.add( 'stripe-pmme-container' );
+						targetLabel.appendChild( container );
+					}
+
+					const currentCountry =
+						cartData?.billing_address?.country ||
+						getUPEConfig( 'storeCountry' );
+
+					if (
+						paymentMethods[ method ]?.countries.length === 0 ||
+						paymentMethods[ method ]?.countries?.includes(
+							currentCountry
+						)
+					) {
+						await mountStripePaymentMethodMessagingElement(
+							api,
+							container,
+							{
+								amount: cartData?.totals?.total_price,
+								currency: cartData?.totals?.currency_code,
+								decimalPlaces:
+									cartData?.totals?.currency_minor_unit,
+								country: currentCountry,
+							},
+							'shortcode_checkout'
+						);
+					}
 				}
 			}
 		}

client/checkout/classic/style.scss

@@ -30,117 +30,66 @@
 	border: none;
 }
 
-.woopayments-rich-payment-method-label {
-	// this will be displayed only on specific scenarios. Otherwise, the "legacy" label will be displayed.
-	display: none;
-}
-
 #payment .payment_methods {
-	li[class*='payment_method_woocommerce_payments'] > label > img {
+	li[class*='payment_method_woocommerce_payments'] label img {
 		float: right;
 		border: 0;
 		padding: 0;
 		height: 24px !important;
 		max-height: 24px !important;
 	}
+}
 
-	&.wc_payment_methods,
-	&.woocommerce-PaymentMethods {
-		li[class*='payment_method_woocommerce_payments'] {
-			display: grid;
-			grid-template-columns: 0fr 0fr 1fr;
-			grid-template-rows: max-content;
-
-			.woopayments-plain-payment-method-label {
-				display: none;
-			}
-
-			> input[name='payment_method'] {
-				&:checked ~ label {
-					.payment-method-title {
-						margin-right: 8px; // 8px gap between .payment-method-title and .test-mode.badge
-					}
+li.wc_payment_method:has( .input-radio:not( :checked )
+		+ label
+		.stripe-pmme-container ) {
+	display: grid;
+	grid-template-columns: min-content 1fr;
+	grid-template-rows: auto auto;
+	align-items: baseline;
+
+	.input-radio {
+		grid-row: 1;
+		grid-column: 1;
+	}
 
-					.test-mode.badge {
-						display: inline-block; // hiding the badge when the payment method is not selected
-					}
+	label {
+		grid-column: 2;
+		grid-row: 1;
+	}
 
-					.stripe-pmme-container {
-						display: none;
-					}
-				}
-			}
+	img {
+		grid-row: 1 / span 2;
+		align-self: center;
+	}
 
-			> label {
-				grid-column: 3;
-				margin-bottom: 0;
-			}
+	.stripe-pmme-container {
+		width: 100%;
+		grid-column: 1;
+		grid-row-start: 2;
+		pointer-events: none;
+	}
 
-			> div.payment_box {
-				grid-area: 2 / 1 / 3 / 4;
-			}
+	.payment_box {
+		flex: 0 0 100%;
+		grid-row: 2;
+		grid-column: 1 / span 2;
+	}
+}
 
-			> label:has( .woopayments-rich-payment-method-label ) {
-				display: inline-flex;
-				align-items: center;
-				width: 100%;
+li.wc_payment_method:has( .input-radio:checked
+		+ label
+		.stripe-pmme-container ) {
+	display: block;
 
-				> img {
-					display: none; // we'll display the image inside `.woopayments-rich-payment-method-label`, instead.
-				}
+	.input-radio:checked {
+		+ label {
+			.stripe-pmme-container {
+				display: none;
 			}
 
-			.woopayments-rich-payment-method-label {
-				display: grid;
-				grid-template-columns: 1fr auto;
-				align-items: center;
-				margin-bottom: 0;
-				flex-grow: 1;
-
-				.label-title-container {
-					display: block;
-				}
-
-				.payment-method-title {
-					white-space: normal; // Allows wrapping if text is too long
-					vertical-align: middle;
-				}
-
-				.test-mode.badge {
-					display: none;
-					background-color: #fff2d7;
-					border-radius: 4px;
-					padding: 4px 6px;
-					font-size: 12px;
-					font-weight: 400;
-					line-height: 16px;
-					color: #4d3716;
-					vertical-align: middle;
-					white-space: nowrap; // Prevents the badge text from wrapping
-				}
-
-				img {
-					border: 0;
-					padding: 0;
-					height: 24px !important;
-					max-height: 24px !important;
-					justify-self: end;
-					margin: 3px 0; // ensuring the images don't appear squished when all the payment methods are rendered next to each others, like in Elementor.
-					align-self: center;
-				}
-
-				.stripe-pmme-container {
-					&:empty {
-						display: none; // hides container if empty, without affecting alignment
-					}
-
-					margin-left: 0.25em; // WooCommerce Core will add a   on the left of the payment method's label - this spacing ensures that at least it's consistently aligned.
-					pointer-events: none;
-					grid-column: 1 / 2;
-					grid-row: 2 / 3;
-					align-self: start;
-					width: 100%;
-				}
+			img {
+				grid-column: 2;
 			}
 		}
 	}

includes/class-wc-payment-gateway-wcpay.php

@@ -572,58 +572,6 @@ public function init_hooks() {
 		$this->maybe_init_subscriptions_hooks();
 	}
 
-	/**
-	 * Returns the gateway title
-	 *
-	 * @return string
-	 * */
-	public function get_title() {
-		$title = parent::get_title();
-
-		/**
-		 * Allows themes or other plugins to override whether the "rich" payment method label
-		 * (normally displayed on shortcode checkout/my account/pay-for-order pages) will be used.
-		 *
-		 * @since 8.6.0
-		 *
-		 * @param $use_plain_method_label boolean Whether the "plain" payment method label will be displayed.
-		 */
-		if ( apply_filters( 'wcpay_checkout_use_plain_method_label', false ) ) {
-			return $title;
-		}
-
-		if (
-			( is_checkout() || is_add_payment_method_page() ) &&
-			! isset( $_GET['change_payment_method'] )  // phpcs:ignore WordPress.Security.NonceVerification
-		) {
-			$test_mode_badge = '';
-			if ( WC_Payments::mode()->is_test() ) {
-				$test_mode_badge = '<span class="test-mode badge">' . __( 'Test Mode', 'woocommerce-payments' ) . '</span>';
-			}
-
-			$bnpl_messaging_container = '';
-			if ( $this->payment_method->is_bnpl() ) {
-				$bnpl_messaging_container = '<span id="stripe-pmme-container-' . $this->payment_method->get_id() . '" class="stripe-pmme-container"></span>';
-			}
-
-			// the "plain" payment method label is displayed on some sections of the app
-			// - like "pay for order" when a payment method is pre-selected or a payment has previously failed.
-			$html  = '<span class="woopayments-plain-payment-method-label">' . $title . '</span>';
-			$html .= '<div class="woopayments-rich-payment-method-label">';
-			$html .= '<div class="label-title-container">';
-			$html .= '<span class="payment-method-title">&nbsp;' . $title . '</span>';
-			$html .= $test_mode_badge;
-			$html .= '</div>';
-			$html .= $this->get_icon();
-			$html .= $bnpl_messaging_container;
-			$html .= '</div>';
-
-			return $html;
-		}
-
-		return $title;
-	}
-
 	/**
 	 * Updates icon and title using the account country.
 	 * This method runs on init is not in the controller because get_account_country might
@@ -3261,15 +3209,6 @@ public function update_fraud_rules_based_on_general_options() {
 		}
 	}
 
-	/**
-	 * Overriding the base method because the `alt` tag would otherwise output the markup returned by the `get_title()` method in this class - which we don't want.
-	 *
-	 * @return string
-	 */
-	public function get_icon() {
-		return '<img src="' . esc_url( WC_HTTPS::force_https_url( $this->get_theme_icon() ) ) . '" alt="' . esc_attr( $this->payment_method->get_title() ) . ' payment method logo" />';
-	}
-
 	/**
 	 * The URL for the current payment method's icon.
 	 *

tests/e2e-pw/specs/shopper/klarna-checkout-purchase.spec.ts

@@ -68,7 +68,6 @@ test.describe( 'Klarna Checkout', () => {
 		await shopperPage
 			.locator( '.wc_payment_methods' )
 			.getByText( 'Klarna' )
-			.nth( 1 )
 			.click();
 
 		await shopper.placeOrder( shopperPage );