Omit Test Mode badge in the Change payment method form (#9615)

Automattic · Oct 23, 2024 · ebca2f4 · ebca2f4
1 parent 70b696f
commit ebca2f4
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 41 deletions.
diff --git a/changelog/fix-omit-test-mode-badge-in-change-payment-form b/changelog/fix-omit-test-mode-badge-in-change-payment-form
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Omit the test mode badge in the change payment method form for subscriptions.
diff --git a/client/checkout/classic/style.scss b/client/checkout/classic/style.scss
@@ -39,53 +39,56 @@
 		max-height: 24px !important;
 	}
 
-	li.payment_method_woocommerce_payments {
-		display: grid;
-		grid-template-columns: 0fr 0fr 1fr;
-		grid-template-rows: max-content;
-
-		> input[name='payment_method'] {
-			align-self: center;
-		}
-		> label {
-			grid-column: 3;
+	&.wc_payment_methods,
+	&.woocommerce-PaymentMethods {
+		li.payment_method_woocommerce_payments {
 			display: grid;
-			grid-template-columns: 0fr auto;
+			grid-template-columns: 0fr 0fr 1fr;
 			grid-template-rows: max-content;
-			grid-gap: 0;
-			margin-bottom: 0;
-
-			> .label-title-container {
-				grid-area: 1 / 2 / 2 / 3;
-			}
 
-			.payment-method-title {
-				margin-right: 8px;
+			> input[name='payment_method'] {
+				align-self: center;
 			}
-
-			.test-mode.badge {
-				display: inline-block;
-				background-color: #fff2d7;
-				border-radius: 4px;
-				padding: 4px 6px;
-				font-size: 12px;
-				font-weight: 400;
-				line-height: 16px;
-				color: #4d3716;
-				vertical-align: middle;
+			> label {
+				grid-column: 3;
+				display: grid;
+				grid-template-columns: 0fr auto;
+				grid-template-rows: max-content;
+				grid-gap: 0;
+				margin-bottom: 0;
+
+				> .label-title-container {
+					grid-area: 1 / 2 / 2 / 3;
+				}
+
+				.payment-method-title {
+					margin-right: 8px;
+				}
+
+				.test-mode.badge {
+					display: inline-block;
+					background-color: #fff2d7;
+					border-radius: 4px;
+					padding: 4px 6px;
+					font-size: 12px;
+					font-weight: 400;
+					line-height: 16px;
+					color: #4d3716;
+					vertical-align: middle;
+				}
+
+				img {
+					float: none;
+					grid-area: 1 / 4 / 2 / 5;
+					align-self: baseline;
+					justify-self: end;
+					margin-left: 1em;
+				}
 			}
-
-			img {
-				float: none;
-				grid-area: 1 / 4 / 2 / 5;
-				align-self: baseline;
-				justify-self: end;
-				margin-left: 1em;
+			> div.payment_box {
+				grid-area: 2 / 1 / 3 / 4;
 			}
 		}
-		> div.payment_box {
-			grid-area: 2 / 1 / 3 / 4;
-		}
 	}
 }
 

diff --git a/includes/class-wc-payment-gateway-wcpay.php b/includes/class-wc-payment-gateway-wcpay.php
@@ -580,7 +580,11 @@ public function init_hooks() {
 	public function get_title() {
 		$title = parent::get_title();
 
-		if ( Payment_Method::CARD === $this->stripe_id && ( is_checkout() || is_add_payment_method_page() ) ) {
+		if (
+			Payment_Method::CARD === $this->stripe_id &&
+			( is_checkout() || is_add_payment_method_page() ) &&
+			! isset( $_GET['change_payment_method'] )  // phpcs:ignore WordPress.Security.NonceVerification
+		) {
 			if ( WC_Payments::mode()->is_test() ) {
 				$test_mode_badge = '<span class="test-mode badge">' . __( 'Test Mode', 'woocommerce-payments' ) . '</span>';
 			} else {