WooPay doesn't work in Pay For Order when Blocks Checkout is used

[danielmx-dev]

Describe the bug

When trying to use WooPay, the will attempt to extract the email field entered during checkout. For shortcode and blocks checkout, the way to retrieve that field differs, so that's why a getTargetElement function was implemented.

The Pay for Order page is a special use case, in which regardless of the usage of shortcode (classic) or blocks checkout, the Pay For Order page will always render the same elements. The flow for pay for order is in fact quite similar to the shortcode implementation, except that no billing information (name, email, address) is requested from the customer.

This particular behavior of Pay For Order is what causes getTargetElement to fail. The current implementation looks for the [data-block-name="woocommerce/checkout"] element to determine if the current checkout page is using blocks checkout, in the Pay For Order flow this element is present, however, inside the element the email field will never be rendered. This causes the execution to hang, and the WooPay iframe is never displayed.

To Reproduce

• Enable WooPay in the WooPayments settings.
• Use blocks checkout in your checkout page. If you have multiple checkout pages, make sure that the one using blocks is set in WooCommerce > Settings > Advanced > Checkout page.
• In WP Admin, manually add a new order, add any billing information and products.
• When the order is created, it should be in the Pending Payment status, click on the Customer payment page click (if you have issues you can copy the link and open it in an incognito window).
  

Actual behavior

• Once Pay For Order loads, click on the WooPay button.
• Even if you click it multiple times, nothing will happen.

Screenshots

Expected behavior

• Once Pay For Order loads, click on the WooPay button.
• The WooPay iframe should load in a modal.
  

Additional context

• Since Pay For Order won't render the billing details, we can omit getTargetElement when we detect we are inside the PayForOrder page (we are already using the window.wcpayConfig.pay_for_order value in other parts of the codebase). Instead, we could try to forward the billing_email set in the Order to the frontend, it should already be available in the window.wcpayCustomerData.email property (only in the pay for order flow). Please note that it may be empty.