WooPay express checkout button on blocks checkout (#5139)

Author: Mayisha

changelog/task-1409-express-checkout-button-on-blocks-checkout

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Added support for a WooPay express checkout button on checkout blocks. This feature is currently behind a feature flag and is not yet publicly available.

client/checkout/blocks/index.js

@@ -22,6 +22,7 @@ import request from '../utils/request';
 import enqueueFraudScripts from 'fraud-scripts';
 import paymentRequestPaymentMethod from '../../payment-request/blocks';
 import { handlePlatformCheckoutEmailInput } from '../platform-checkout/email-input-iframe';
+import wooPayExpressCheckoutPaymentMethod from '../platform-checkout/express-button/woopay-express-checkout-payment-method';
 
 // Create an API object, which will be used throughout the checkout.
 const api = new WCPayAPI(
@@ -52,12 +53,16 @@ registerPaymentMethod( {
 
 registerExpressPaymentMethod( paymentRequestPaymentMethod( api ) );
 
-// If platform checkout is enabled and this is the checkout page.
-if (
-	getConfig( 'isPlatformCheckoutEnabled' ) &&
-	document.querySelector( '[data-block-name="woocommerce/checkout"]' )
-) {
-	handlePlatformCheckoutEmailInput( '#email', api, true );
+if ( getConfig( 'isPlatformCheckoutEnabled' ) ) {
+	// Call handlePlatformCheckoutEmailInput if platform checkout is enabled and this is the checkout page.
+	if (
+		document.querySelector( '[data-block-name="woocommerce/checkout"]' )
+	) {
+		handlePlatformCheckoutEmailInput( '#email', api, true );
+	}
+	if ( getConfig( 'isWoopayExpressCheckoutEnabled' ) ) {
+		registerExpressPaymentMethod( wooPayExpressCheckoutPaymentMethod() );
+	}
 }
 
 window.addEventListener( 'load', () => {

client/checkout/constants.js

@@ -6,4 +6,6 @@ export const PAYMENT_METHOD_NAME_SOFORT = 'woocommerce_payments_sofort';
 export const PAYMENT_METHOD_NAME_UPE = 'woocommerce_payments_upe';
 export const PAYMENT_METHOD_NAME_PAYMENT_REQUEST =
 	'woocommerce_payments_payment_request';
+export const PAYMENT_METHOD_NAME_WOOPAY_EXPRESS_CHECKOUT =
+	'woocommerce_payments_woopay_express_checkout';
 export const WC_STORE_CART = 'wc/store/cart';

client/checkout/platform-checkout/express-button/woopay-express-checkout-payment-method.js

@@ -0,0 +1,29 @@
+/* global wcpayWooPayExpressParams */
+/**
+ * Internal dependencies
+ */
+import { PAYMENT_METHOD_NAME_WOOPAY_EXPRESS_CHECKOUT } from '../../constants';
+import { WoopayExpressCheckoutButton } from './woopay-express-checkout-button';
+import { getConfig } from '../../../utils/checkout';
+
+const wooPayExpressCheckoutPaymentMethod = () => ( {
+	name: PAYMENT_METHOD_NAME_WOOPAY_EXPRESS_CHECKOUT,
+	content: (
+		<WoopayExpressCheckoutButton
+			buttonSettings={ wcpayWooPayExpressParams?.button }
+		/>
+	),
+	edit: (
+		<WoopayExpressCheckoutButton
+			buttonSettings={ wcpayWooPayExpressParams?.button }
+			isPreview={ true }
+		/>
+	),
+	canMakePayment: () => true,
+	paymentMethodId: PAYMENT_METHOD_NAME_WOOPAY_EXPRESS_CHECKOUT,
+	supports: {
+		features: getConfig( 'features' ),
+	},
+} );
+
+export default wooPayExpressCheckoutPaymentMethod;

client/checkout/platform-checkout/style.scss

@@ -138,6 +138,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	white-space: nowrap;
 
 	svg {
 		fill: $studio-woocommerce-purple-60;

includes/class-wc-payments-checkout.php

@@ -115,6 +115,7 @@ public function get_payment_fields_js_config() {
 			'isUPEEnabled'                   => WC_Payments_Features::is_upe_enabled(),
 			'isSavedCardsEnabled'            => $this->gateway->is_saved_cards_enabled(),
 			'isPlatformCheckoutEnabled'      => $this->platform_checkout_util->should_enable_platform_checkout( $this->gateway ),
+			'isWoopayExpressCheckoutEnabled' => $this->platform_checkout_util->is_woopay_express_checkout_enabled(),
 			'isClientEncryptionEnabled'      => WC_Payments_Features::is_client_secret_encryption_enabled(),
 			'platformCheckoutHost'           => defined( 'PLATFORM_CHECKOUT_FRONTEND_HOST' ) ? PLATFORM_CHECKOUT_FRONTEND_HOST : 'https://pay.woo.com',
 			'platformTrackerNonce'           => wp_create_nonce( 'platform_tracks_nonce' ),

includes/platform-checkout/class-platform-checkout-utilities.php

@@ -30,6 +30,15 @@ public function should_enable_platform_checkout( $gateway ) {
 		return $is_platform_checkout_eligible && $is_platform_checkout_enabled;
 	}
 
+	/**
+	 * Check conditions to determine if woopay express checkout is enabled.
+	 *
+	 * @return boolean
+	 */
+	public function is_woopay_express_checkout_enabled() {
+		return WC_Payments_Features::is_woopay_express_checkout_enabled(); // Feature flag.
+	}
+
 	/**
 	 * Generates a hash based on the store's blog token, merchant ID, and the time step window.
 	 *