WIP Improve BNPL PMME and icon placement in shortcode checkout

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,44 @@ 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 ) {
+						let targetLabelInner = targetLabel.innerHTML;
+						// Keep the leading whitespace in the label.
+						// targetLabelInner = targetLabelInner.replace(
+						// 	/^\s+/,
+						// 	' '
+						// );
+						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,67 +31,74 @@
 	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;
 	align-items: baseline;
 
 	.input-radio {
 		grid-row: 1;
 		grid-column: 1;
+		//background-color: green !important;
 	}
 
-	label {
+	> label {
+		display: grid !important;
+		grid-template-columns: auto 1fr;
+
 		grid-column: 2;
 		grid-row: 1;
-	}
+		//background-color: blue !important;
 
-	img {
-		grid-row: 1 / span 2;
-		align-self: center;
-	}
+		> span.spacer {
+			//background-color: yellow !important;
+		}
 
-	.stripe-pmme-container {
-		width: 100%;
-		grid-column: 1;
-		grid-row-start: 2;
-		pointer-events: none;
-	}
+		> .woopayments-inner-label {
+			display: grid;
+			grid-template-columns: 1fr max-content;
+			align-items: center;
+
+			> img {
+				grid-column: 2;
+				grid-row: 1 / span 2;
+				justify-self: right;
+				//background-color: red !important;
+			}
 
-	.payment_box {
-		flex: 0 0 100%;
-		grid-row: 2;
-		grid-column: 1 / span 2;
+			> .stripe-pmme-container {
+				width: 100%;
+				grid-column: 1;
+				grid-row-start: 2;
+				pointer-events: none;
+				//background-color: fuchsia !important;
+			}
+		}
 	}
 }
 
-li.wc_payment_method:has( .input-radio:checked
-		+ label
-		.stripe-pmme-container ) {
-	display: block;
-
+// Hide the PMMe container when the payment method is checked.
+li.wc_payment_method:has( .input-radio:checked + label .stripe-pmme-container ) {
 	.input-radio:checked {
 		+ label {
 			.stripe-pmme-container {
 				display: none;
 			}
-
-			img {
-				grid-column: 2;
-			}
 		}
 	}
 }