From b31489f8a7c3b2e41829e9eeec18fcd34b816f2a Mon Sep 17 00:00:00 2001 From: Hsing-yu Flowers Date: Tue, 12 Sep 2023 18:36:58 -0700 Subject: [PATCH] Add the WooPay Express button to the Pay for order page (#5903) --- changelog/add-pay-for-order | 4 +++ client/checkout/woopay/email-input-iframe.js | 10 ++++-- .../express-button/express-checkout-iframe.js | 14 +++++++-- client/checkout/woopay/utils.js | 19 ++++++++++++ ...xpress-checkout-button-display-handler.php | 31 ++++++++++++++++--- ...lass-wc-payments-woopay-button-handler.php | 4 --- 6 files changed, 69 insertions(+), 13 deletions(-) create mode 100644 changelog/add-pay-for-order diff --git a/changelog/add-pay-for-order b/changelog/add-pay-for-order new file mode 100644 index 00000000000..b44cf523113 --- /dev/null +++ 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 index 6c17b14fc3e..47ae94dff85 100644 --- 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 index 7ac6bfcb275..95b49e62091 100644 --- 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 index 48b25423d0b..a7b9a3a6152 100644 --- 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 index 57465be523c..b5cc5b1b55b 100644 --- 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 index 168ab5ee8f3..eabaa7d1cac 100644 --- 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() ) {