Improve BNPL PMME and icon placement in shortcode checkout (#9993)

Co-authored-by: Francesco <[email protected]>

changelog/improve-pmme-placement-shortcode

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Improve BNPL PMME and icon placement in shortcode checkout

client/checkout/classic/event-handlers.js

@@ -176,13 +176,39 @@ jQuery( function ( $ ) {
 				}
 
 				if ( targetLabel ) {
+					// wrapInner target label in a span.woopayments-inner-label if it's not already
+					let targetLabelInnerSpan = targetLabel.querySelector(
+						'span.woopayments-inner-label'
+					);
+					if ( ! targetLabelInnerSpan ) {
+						const targetLabelInner = targetLabel.innerHTML;
+						targetLabel.innerHTML = '';
+						targetLabelInnerSpan = document.createElement( 'span' );
+						targetLabelInnerSpan.classList.add(
+							'woopayments-inner-label'
+						);
+						targetLabelInnerSpan.innerHTML = targetLabelInner;
+						targetLabel.appendChild( targetLabelInnerSpan );
+					}
+
+					let spacer = targetLabel.querySelector( 'span.spacer' );
+					if ( ! spacer ) {
+						spacer = document.createElement( 'span' );
+						spacer.classList.add( 'spacer' );
+						spacer.innerHTML = ' ';
+						targetLabel.insertBefore(
+							spacer,
+							targetLabelInnerSpan
+						);
+					}
+
 					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 );
+						targetLabelInnerSpan.appendChild( container );
 					}
 
 					const currentCountry =

client/checkout/classic/style.scss

@@ -18,6 +18,7 @@
 	position: relative;
 }
 
+// Stripe Link button styles.
 .wcpay-checkout-email-field button.wcpay-stripelink-modal-trigger {
 	display: none;
 	position: absolute;
@@ -30,66 +31,111 @@
 	border: none;
 }
 
+// Logo styles.
 #payment .payment_methods {
-	li[class*='payment_method_woocommerce_payments'] label img {
-		float: right;
-		border: 0;
-		padding: 0;
-		height: 24px !important;
-		max-height: 24px !important;
+	li[class*='payment_method_woocommerce_payments'] label {
+		display: inline;
+		img {
+			float: right;
+			border: 0;
+			padding: 0;
+			height: 24px !important;
+			max-height: 24px !important;
+		}
 	}
 }
 
-li.wc_payment_method:has( .input-radio:not( :checked )
-		+ label
-		.stripe-pmme-container ) {
+// Payment methods with PMME styles.
+li.wc_payment_method:has( label .stripe-pmme-container ) {
 	display: grid;
-	grid-template-columns: min-content 1fr;
-	grid-template-rows: auto auto;
+	grid-template-columns: max-content 1fr;
+	grid-template-areas: 'li-input li-label'; // List Item grid.
 	align-items: baseline;
 
 	.input-radio {
-		grid-row: 1;
-		grid-column: 1;
+		grid-area: li-input;
 	}
 
-	label {
-		grid-column: 2;
-		grid-row: 1;
-	}
+	> label {
+		grid-area: li-label;
 
-	img {
-		grid-row: 1 / span 2;
-		align-self: center;
-	}
+		display: grid !important;
+		grid-template-columns: max-content 1fr;
+		grid-template-areas: 'label-spacer label-inner'; // Label grid.
 
-	.stripe-pmme-container {
-		width: 100%;
-		grid-column: 1;
-		grid-row-start: 2;
-		pointer-events: none;
-	}
+		> span.spacer {
+			grid-area: label-spacer;
+		}
+
+		> .woopayments-inner-label {
+			grid-area: label-inner;
+			display: grid;
+			grid-template-columns: 1fr max-content;
+			grid-template-areas:
+				'inner-text inner-logo'
+				'inner-pmme inner-logo'; // Inner label grid.
+			align-items: center;
+
+			> img {
+				grid-area: inner-logo;
+				justify-self: right;
+			}
 
-	.payment_box {
-		flex: 0 0 100%;
-		grid-row: 2;
-		grid-column: 1 / span 2;
+			> .stripe-pmme-container {
+				width: 100%;
+				grid-area: inner-pmme;
+				pointer-events: none;
+			}
+		}
 	}
 }
 
+// Hide the PMMe container when the payment method is checked.
 li.wc_payment_method:has( .input-radio:checked
 		+ label
 		.stripe-pmme-container ) {
-	display: block;
-
 	.input-radio:checked {
 		+ label {
 			.stripe-pmme-container {
 				display: none;
 			}
+		}
+	}
+}
+
+// Pseudo-element radio button compatibility.
+// Unfortunately, there is no direct way to detect the existence of pseudo-elements like ::before using CSS selectors,
+// so we use the theme class to add the necessary styles.
+.theme-storefront,
+.theme-twentytwenty,
+.theme-twentytwentyone,
+.theme-twentytwentytwo,
+.theme-twentytwentythree {
+	#payment {
+		.payment_methods {
+			> li.wc_payment_method {
+				// Storefront does not render the input radio button.
+				grid-template-areas: 'li-label'; // List Item grid for Storefront.
+				grid-template-columns: 1fr;
+
+				> input + label {
+					// Storefront uses a label::before for the radio button so we need to adjust the grid.
+					grid-template-areas: 'label-before label-spacer label-inner'; // Label grid for Storefront.
+					grid-template-columns: max-content max-content 1fr;
+				}
+
+				> input + label {
+					&::before {
+						grid-area: label-before;
+					}
+				}
+			}
 
-			img {
-				grid-column: 2;
+			// This makes sure labels that don't have the pmme container are displayed correctly.
+			li[class*='payment_method_woocommerce_payments'] {
+				> input + label {
+					display: block;
+				}
 			}
 		}
 	}