feat: WooPay button SSR (#7463)

Automattic · Oct 16, 2023 · 8c50941 · 8c50941
1 parent 058036b
commit 8c50941
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/assets/images/woopay.svg b/assets/images/woopay.svg
diff --git a/changelog/feat-woopay-button-pre-render b/changelog/feat-woopay-button-pre-render
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+feat: add WooPay button SSR
diff --git a/includes/class-wc-payments-woopay-button-handler.php b/includes/class-wc-payments-woopay-button-handler.php
@@ -583,10 +583,21 @@ public function display_woopay_button_html() {
 			return;
 		}
 
+		$settings = $this->get_button_settings();
+
 		?>
 		<div id="wcpay-woopay-button" data-product_page=<?php echo esc_attr( $this->is_product() ); ?>>
-				<?php // The WooPay express checkout button React component will go here. ?>
-			</div>
+			<?php // The WooPay express checkout button React component will go here. This is rendered as disabled for now, until the page is initialized. ?>
+			<button
+				class="woopay-express-button"
+				aria-label="<?php esc_attr_e( 'WooPay', 'woocommerce-payments' ); ?>"
+				data-type="<?php echo esc_attr( $settings['type'] ); ?>"
+				data-theme="<?php echo esc_attr( $settings['theme'] ); ?>"
+				data-size="<?php echo esc_attr( $settings['size'] ); ?>"
+				style="height: <?php echo esc_attr( $settings['height'] ); ?>px"
+				disabled
+			></button>
+		</div>
 		<?php
 	}