simplify the implementation & add the top margin for ECE when ready only

Author: timur27

client/checkout/express-checkout-buttons.scss

@@ -19,21 +19,11 @@
 			padding: 0;
 			height: 0;
 		}
-	}
 
-	&.is-ready {
-		#wcpay-express-checkout-element {
+		&.is-ready {
+			margin-top: 12px;
 			opacity: 1;
 		}
-
-		#wcpay-express-checkout-button-separator {
-			opacity: 1;
-		}
-	}
-
-	// WooPay button is always visible
-	#wcpay-woopay-button {
-		opacity: 1;
 	}
 
 	.woocommerce-cart & {
@@ -43,14 +33,6 @@
 	.woocommerce-checkout & {
 		margin-top: 0;
 	}
-
-	> div {
-		margin-bottom: 12px;
-
-		&:last-of-type {
-			margin-bottom: 0;
-		}
-	}
 }
 
 // This fixes width calculation issues inside the iframe for blocks and shortcode pages.

client/express-checkout/button-ui.js

@@ -32,7 +32,7 @@ const expressCheckoutButtonUi = {
 
 	renderButton: ( eceButton ) => {
 		if ( get$Container()?.length ) {
-			expressCheckoutButtonUi.showContainer();
+			// expressCheckoutButtonUi.showContainer();
 			eceButton.mount( expressCheckoutElementId );
 		}
 	},
@@ -42,6 +42,11 @@ const expressCheckoutButtonUi = {
 	},
 
 	showContainer: () => {
+		get$Container().show();
+		get$Container().addClass( 'is-ready' );
+	},
+
+	markAsReady: () => {
 		get$Container()
 			.closest( '.wcpay-express-checkout-wrapper' )
 			.addClass( 'is-ready' );

client/express-checkout/index.js

@@ -37,6 +37,7 @@ jQuery( ( $ ) => {
 	}
 
 	const publishableKey = getExpressCheckoutData( 'stripe' ).publishableKey;
+	// const publishableKey = 'pk_test_51N000000000000000000000';
 	const quantityInputSelector = '.quantity .qty[type=number]';
 
 	if ( ! publishableKey ) {