Add the WooPay Express button to the Pay for order page (#5903)

Automattic · Sep 13, 2023 · b31489f · b31489f
1 parent ca7929f
commit b31489f
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 13 deletions.
diff --git a/changelog/add-pay-for-order b/changelog/add-pay-for-order
@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Add the express button on the pay for order page
diff --git a/client/checkout/woopay/email-input-iframe.js b/client/checkout/woopay/email-input-iframe.js
@@ -6,7 +6,11 @@ import { getConfig } from 'wcpay/utils/checkout';
 import wcpayTracks from 'tracks';
 import request from '../utils/request';
 import { buildAjaxURL } from '../../payment-request/utils';
-import { getTargetElement, validateEmail } from './utils';
+import {
+	getTargetElement,
+	validateEmail,
+	appendRedirectionParams,
+} from './utils';
 
 export const handleWooPayEmailInput = async (
 	field,
@@ -534,7 +538,9 @@ export const handleWooPayEmailInput = async (
 					true
 				);
 				if ( e.data.redirectUrl ) {
-					window.location = e.data.redirectUrl;
+					window.location = appendRedirectionParams(
+						e.data.redirectUrl
+					);
 				}
 				break;
 			case 'redirect_to_platform_checkout':

diff --git a/client/checkout/woopay/express-button/express-checkout-iframe.js b/client/checkout/woopay/express-button/express-checkout-iframe.js
@@ -5,7 +5,11 @@ import { __ } from '@wordpress/i18n';
 import { getConfig } from 'utils/checkout';
 import request from 'wcpay/checkout/utils/request';
 import { buildAjaxURL } from 'wcpay/payment-request/utils';
-import { getTargetElement, validateEmail } from '../utils';
+import {
+	getTargetElement,
+	validateEmail,
+	appendRedirectionParams,
+} from '../utils';
 import wcpayTracks from 'tracks';
 
 export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
@@ -250,7 +254,9 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
 					true
 				);
 				if ( e.data.redirectUrl ) {
-					window.location = e.data.redirectUrl;
+					window.location = appendRedirectionParams(
+						e.data.redirectUrl
+					);
 				}
 				break;
 			case 'redirect_to_platform_checkout':
@@ -269,7 +275,9 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
 						return;
 					}
 					if ( response.result === 'success' ) {
-						window.location = response.url;
+						window.location = appendRedirectionParams(
+							response.url
+						);
 					} else {
 						showErrorMessage();
 						closeIframe( false );

diff --git a/client/checkout/woopay/utils.js b/client/checkout/woopay/utils.js
@@ -39,3 +39,22 @@ export const validateEmail = ( value ) => {
 	/* eslint-enable */
 	return pattern.test( value );
 };
+
+export const appendRedirectionParams = ( woopayUrl ) => {
+	const isPayForOrder = window.wcpayConfig.pay_for_order;
+	const orderId = window.wcpayConfig.order_id;
+	const key = window.wcpayConfig.key;
+	const billingEmail = window.wcpayConfig.billing_email;
+
+	if ( ! isPayForOrder || ! orderId || ! key ) {
+		return woopayUrl;
+	}
+
+	const url = new URL( woopayUrl );
+	url.searchParams.append( 'pay_for_order', isPayForOrder );
+	url.searchParams.append( 'order_id', orderId );
+	url.searchParams.append( 'key', key );
+	url.searchParams.append( 'billing_email', billingEmail );
+
+	return url.href;
+};
diff --git a/includes/class-wc-payments-express-checkout-button-display-handler.php b/includes/class-wc-payments-express-checkout-button-display-handler.php
@@ -57,11 +57,11 @@ public function __construct( WC_Payment_Gateway_WCPay $gateway, WC_Payments_Paym
 			add_action( 'woocommerce_after_add_to_cart_form', [ $this, 'display_express_checkout_buttons' ], 1 );
 			add_action( 'woocommerce_proceed_to_checkout', [ $this, 'display_express_checkout_buttons' ], 21 );
 			add_action( 'woocommerce_checkout_before_customer_details', [ $this, 'display_express_checkout_buttons' ], 1 );
+		}
 
-			if ( $is_payment_request_enabled ) {
-				// Load separator on the Pay for Order page.
-				add_action( 'before_woocommerce_pay_form', [ $this, 'display_express_checkout_buttons' ], 1 );
-			}
+		if ( class_exists( '\Automattic\WooCommerce\Blocks\Package' ) && version_compare( \Automattic\WooCommerce\Blocks\Package::get_version(), '10.8.0', '>=' ) ) {
+			add_action( 'before_woocommerce_pay_form', [ $this, 'add_pay_for_order_params_to_js_config' ] );
+			add_action( 'woocommerce_pay_order_before_payment', [ $this, 'display_express_checkout_buttons' ], 1 );
 		}
 	}
 
@@ -111,4 +111,27 @@ public function display_express_checkout_buttons() {
 	public function is_woopay_enabled() {
 		return $this->platform_checkout_button_handler->is_woopay_enabled();
 	}
+
+	/**
+	 * Add the Pay for order params to the JS config.
+	 *
+	 * @param WC_Order $order The pay-for-order order.
+	 */
+	public function add_pay_for_order_params_to_js_config( $order ) {
+		// phpcs:disable WordPress.Security.NonceVerification.Recommended
+		if ( isset( $_GET['pay_for_order'] ) && isset( $_GET['key'] ) ) {
+			add_filter(
+				'wcpay_payment_fields_js_config',
+				function( $js_config ) use ( $order ) {
+					$js_config['order_id']      = $order->get_id();
+					$js_config['pay_for_order'] = sanitize_text_field( wp_unslash( $_GET['pay_for_order'] ) );
+					$js_config['key']           = sanitize_text_field( wp_unslash( $_GET['key'] ) );
+					$js_config['billing_email'] = $order->get_billing_email();
+
+					return $js_config;
+				}
+			);
+		}
+		// phpcs:enable WordPress.Security.NonceVerification.Recommended
+	}
 }
diff --git a/includes/class-wc-payments-woopay-button-handler.php b/includes/class-wc-payments-woopay-button-handler.php
@@ -529,10 +529,6 @@ public function should_show_woopay_button() {
 			return false;
 		}
 
-		if ( $this->is_pay_for_order_page() ) {
-			return false;
-		}
-
 		if ( ! is_user_logged_in() ) {
 			// On product page for a subscription product, but not logged in, making WooPay unavailable.
 			if ( $this->is_product() ) {