WooPay OTP modal does not render on the shortcode checkout if BNPL methods are available

[csmcneill]

Describe the bug

If a customer has an existing WooPay account, we expect there to be an OTP modal after the customer enters their email address on the checkout page:

However, if the site is using the shortcode checkout and offering BNPL methods, this modal will not render. I can confirm that this occurs with Klarna and Afterpay are available on the checkout page, but I have not yet confirmed that this occurs when Affirm is enabled.

To Reproduce

1. Create a site.
2. Install and activate WooCommerce.
3. Create a new page with the [woocommerce_shortcode] checkout.
4. Install and activate WooPayments.
5. Onboard WooPayments as a US merchant.
6. Enable WooPay.
7. Enable at least one BNPL payment method.
8. Save your settings.
9. Create a product that is less than the maximum requirement for the particular BNPL method(s) enabled in step 5.
10. Add enough of the product created in step 9 to your cart that the total cart value meets the price requirements for the BNPL method(s) enabled in step 7.
11. Navigate to the checkout page created in step 3.
12. On the checkout page, add the email address of a valid WooPay account (e.g., woopay@example.com).
13. Note that the OTP modal does not display.
14. Disable the BNPL methods in your WooPayments settings.
15. Repeat steps 11 and 12.
16. Note that the OTP modal displays as expected.

Actual behavior

If a merchant is offering WooPay and BNPL methods via the shortcode checkout experience, the OTP modal does not render for WooPay customers when they enter their email address on the checkout page. This can result in reduced usage of WooPay.

Expected behavior

The WooPay OTP modal renders on the shortcode checkout regardless of whether or not the merchant is offering BNPL methods.

Additional context

p1716368611870019-slack-C022WMN88KG

[csmcneill]

I tested this a bit more and can confirm that Stripe Link is not affected.

[bborman22]

Please add your planning poker estimate with Zenhub @ricardo

[ricardo]

@bborman22 This applies to other payment methods other than BNPL as well.

I'm still trying to estimate this properly as I'm testing a fix, but I found the root cause of the issue.

Since we moved UPE APMs into separate WC payment methods (which I believe was before WooPayments 5.8.0), we're enqueuing a couple of scripts several times now.

So when looking for the isWooPayEnabled prop in wcpay_upe_config, it takes the value from the last defined global variable which doesn't come from the credit card payment method.

So the source code looks like this when not only credit card is available:

<script id="woocommerce-tokenization-form-js-extra">
var wc_tokenization_form_params = ...
var wc_tokenization_form_params = ...
var wc_tokenization_form_params = ...
</script>
...
<script id="wcpay-upe-checkout-js-extra">
var wcpay_upe_config = ...
var wcpay_upe_config = ...
var wcpay_upe_config = ...
</script>

I'm surprised that this has been an issue for so long and apparently we didn't find other side effects related to it.