Invalid token error when saving payment method on checkout prevents redirecting to order received page

[csmcneill]

Describe the bug
When saving a payment method on checkout (shortcode or Blocks), an error is displayed after placing the order:

Invalid or missing payment token fields.

If the shortcode checkout is used, the ?wc-ajax=checkout response is 200, but it includes the following:

{
    "result": "failure",
    "messages": "\n<div class=\"wc-block-components-notice-banner is-error\" role=\"alert\">\n\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t<path d=\"M12 3.2c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8 0-4.8-4-8.8-8.8-8.8zm0 16c-4 0-7.2-3.3-7.2-7.2C4.8 8 8 4.8 12 4.8s7.2 3.3 7.2 7.2c0 4-3.2 7.2-7.2 7.2zM11 17h2v-6h-2v6zm0-8h2V7h-2v2z\"><\/path>\n\t<\/svg>\n\t<div class=\"wc-block-components-notice-banner__content\">\n\t\tInvalid or missing payment token fields.\t<\/div>\n<\/div>\n",
    "refresh": false,
    "reload": false
}

If the Blocks checkout is used, the checkout?_locale=user response is 400, and it includes the following:

{
    "code": "woocommerce_rest_checkout_process_payment_error",
    "message": "Invalid or missing payment token fields.",
    "data": {
        "status": 400
    }
}

My tests suggest that this only affects the new checkout experience.

When reproducing this issue, the events occur

• The error prevents the customer from being directed to the order received page.
• The order is successful.
• Payment is charged.
• Order emails are sent out.
• The product is not removed from the cart.
• Since the customer sees an error, they may attempt to place the order multiple times. Additional attempts to place the order result in duplicate orders and payments.

To Reproduce
Steps to reproduce the behavior:

1. Ensure the legacy checkout experience is disabled.
2. Enable the Enable payments via saved cards option.
3. Add a product to your cart.
4. Navigate to the checkout page.
5. Add a card number.
6. Select the Save payment information to my account for future purchases. option.
7. Select Place order.
8. Note the error.
9. Note the network response.
10. Navigate to WooCommerce > Orders.
11. Note a new order has been created.
12. Navigate to your Stripe dashboard.
13. Note that payment has been authorized (and captured if configured) successfully.

Expected behavior

1. The token information is saved correctly when saving card details at checkout.
2. An error that prevents the user from being directed to the order received page will also prevent payment from being authorized/captured.

Screenshots

Environment (please complete the following information):

• WordPress Version: 6.5.3
• WooCommerce Version: 8.9.3
• Stripe Plugin Version: 8.4.0
• Browser [e.g. chrome, safari] and Version: Arc (Chromium) 1.46.0 (Chromium engine 125.0.6422.142)
• Any other plugins installed: Just WooCommerce, Stripe, and Woo Update Manager. See
  SystemStatusReport_2024-06-16T04-42-23.txt

Additional context
Discovered while investigating another issue in p1718493178460639-slack-C3NCP7ZJ6

This may be priority: critical.

[shohanhossainnab]

8360728-zen

[mdtanjid0]

Another one: 836072-zen