When a product is added via Order Bump, Use a new Payment Method doesn't work

[jacoswan]

Describe the bug

Not sure if a Payments bug or Order Bump bug (hence type: question). Starting here (have pinged Order Bump devs for a look too).

When starting off with a free product, then adding a product on the checkout page via Order Bump for WooCommerce, the Use a New Payment Method option doesn't render the credit card fields.

To Reproduce

1. Create a simple, virtual, free product
2. Create a simple, virtual $100 product
3. Under WP Admin > Order Bump > Settings, Enable Order Bump
4. Also set Order Bump Display Location on Checkout Page to Before Order Summary
5. Under WP Admin > Order Bump > Order Bumps > Add New, create a new Order Bump
6. Under General tab set Offer Product to product at No. 2 above
7. Under Criteria tab set Order > contains > product at No. 1 above. Save.
8. With WooCommerce Payments active, add product at No.1 to basket.
9. Go to the checkout page, no payment options as it's a free product.
10. Accept the offer to add product at No.2 to the order.
11. See Credit / Debit card option and offer to Use a new payment method, but no credit card fields.

Actual behavior

Credit card fields are not rendered when starting from a free product, the order is bumped to includ a paid product.

Screenshots

Expected behavior

Expected the credit card fields to render, especially when new payment method is selected. It does render if a paid product is in the cart, or in the cart together with the free product. Using a gateway with similar features, such as Stripe, also works as expected.

Desktop (please complete the following information):

• OS: Mac OS Big Sur 11.6.1 (20G224)
• Browser: Chrome
• Version: 99.0.4844.83 (Official Build) (x86_64)

Additional context

Reported in 4907820-zen

Pressable site: Jetpack |   | by Automattic – 10.8-beta Order Bump for WooCommerce by FantasticPlugins – 2.0 WooCommerce Payments by Automattic – 3.9.1 WooCommerce by Automattic – 6.3.1

[htdat]

Thanks @jacoswan for the detailed report!

I've tested with the latest develop branch, and confirmed the issue with some notes:

• Order Bump for WooCommerce has not supported Block Checkoutyet. So I can not confirm the issue, but when fixing this bug, we may be mindful about it.
• For classic checkout, confirm the issue happens with UPE too.
• Following all steps in the To Reproduce section above, then reloading the full checkout page and choosing Use a new payment method, the card fields are rendered properly.

[pierorocca]

Noting this needs testing against the new dUPE to test if this is still reproducable.

[zmaglica]

This issue impacts accounts domain, so assigning to Heisenberg (based on team responsibilities Pc2DNy-3z-p2) @FangedParakeet. . Assigning as part of Gamma Triage process PcreKM-yM-p2.

[frosso]

I just verified the behavior, and the issue doesn't seem to be present anymore. It might have been affecting older versions of the Payment Element. Here's a screencap of the current behavior. I ensured that a similar setup was done (free product w/ free shipping, and addition of new product requiring a payment method).

https://github.com/Automattic/woocommerce-payments/assets/273592/f7b226f9-a325-4114-b7fa-d7408e9eb44e