Description of the Issue

When using Stripe payment gateway on WooCommerce checkout (wc-block-components-form wc-block-checkout__form), customers experience a severe usability issue where input fields lose focus after each keystroke. This makes completing the checkout form almost impossible as users must constantly re-click the field to continue typing. The issue affects all standard checkout fields (email, name, address, etc.) but does not affect Stripe’s own payment fields.

The error is resolved if you refresh the page after the complete checkout page is loaded and also if you disable the stripe plugin.

Reproduction Steps

1. Use incognito/private mode in Chrome or Safari
2. After each testing session, clear browser cache
3. Also clear “customer sessions” in WooCommerce > Status > Tools

If you don’t clear both the cache and customer sessions, the error will not appear as the page refresh fix remains in effect. The error will only reappear based on the WooCommerce site setting for resetting customer sessions and browser caching of the user.

Root Cause Analysis

Through debugging and console monitoring, we identified the exact sequence causing the issue:

When a user types in a regular checkout field (e.g., shipping-first_name), the field loses focus
Focus briefly shifts to Stripe’s hidden input element (wc-stripe-hidden-input)
Focus then moves to the body element
This sequence repeats after each keystroke

Console output when monitoring blur events shows:

Blur event on: input type=”text” id=”shipping-first_name”…
Focus going to: body class=…
Event triggered by: <input type=”text” id=”wc-stripe-hidden-input”…>
The issue appears to originate from Stripe’s UPE (Unified Payment Element) implementation in the file upe_blocks.js, which is managing state by temporarily shifting focus to its hidden input but failing to return focus properly.

Temporary Workaround

The issue mysteriously resolves itself when the checkout page is refreshed. This indicates a potential initialization issue or state management problem in the Stripe UPE code.

For now, we have implemented a minor fix where we are running a small JavaScript script on the checkout page to refresh only once after the page has loaded completely. A key finding during implementation was that we had to wait a minimum of 300ms after complete load before triggering the refresh. If the refresh occurs too soon (less than 300ms after complete page load), the error persists.

Environment:

1. WordPress version: 6.7.2
2. WooCommerce version: 9.7.1
3. Woocommerce Stripe plugin version: 9.3.1
4. Checkout implementation: WooCommerce Blocks (form class: “wc-block-components-form wc-block-checkout__form”)
5. Affects all browsers and devices (desktop and mobile)
6. Issue started after updating the Stripe plugin from 9.1 to latest
7. If we disable stripe plugin issue is not present.

Additional Information

1. The issue does not appear in the browser console as a JavaScript error
2. Creating a JavaScript fix to force focus back to the original field works but causes typing lag
3. Multiple users have reported abandoning checkout due to this issue
4. The problem affects conversion rates as it makes completing the form extremely frustrating
5. The issue reproduces consistently across all tested environments

We would appreciate a prompt investigation into this issue as it’s significantly impacting our checkout conversion rate.

Thank you

Link to the error log:

https://quickforget.com/s/2ebfd0a127559937201c6df397afb67d43929b72a6ec1508

Response body
{
  "error": {
    "code": "parameter_invalid_empty",
    "doc_url": "https://stripe.com/docs/error-codes/parameter-invalid-empty",
    "message": "You passed an empty string for 'payment_method'. We assume empty values are an attempt to unset a parameter; however 'payment_method' cannot be unset. You should remove 'payment_method' from your request or supply a non-empty value.",
    "param": "payment_method",
    "type": "invalid_request_error"
  }
}

We have created a form with Stripe integration & used checkboxes with calculations to offer several payment amounts. All works perfectly unless more than checkbox is checked. In which case, we get the “Unrecognized request URL (GET: /v1/payment_intents/). If you are trying to list objects, remove the trailing slash. If you are trying to retrieve an object, make sure you passed a valid (non-empty) identifier in your code.” error.

We are wondering if there is something obvious we need to do to allow for multiple choices? We’d like to but, if too tricky, we can ditch the checkboxes & use radio btns

Thank you for your great form builder!

2021-09-15T05:38:38+00:00 DEBUG 
====Stripe Version: 5.4.1====
====Start Log====
sources/src_1JZqpLSBv1zjt6OzdQnQikos
====End Log====

2021-09-15T05:38:39+00:00 DEBUG 
====Stripe Version: 5.4.1====
====Start Log====
customers request: Array
(
    [email] => [email protected]
    [description] => Name: test test, Guest
    [name] => test test
    [metadata] => Array
        (
        )

    [preferred_locales] => Array
        (
            [0] => en-US
        )

)

====End Log====

2021-09-15T05:38:40+00:00 DEBUG 
====Stripe Version: 5.4.1====
====Start Log====
Info: Begin processing payment for order 6944 for the amount of 24.99
====End Log====

2021-09-15T05:38:40+00:00 DEBUG 
====Stripe Version: 5.4.1====
====Start Log====
payment_intents request: Array
(
     => src_1JZqpLSBv1zjt6OzdQnQikos
    [amount] => 2499
    [currency] => usd
    [description] => FashionMaddy - Order 6944
    [metadata] => Array
        (
            [customer_name] => test test
            [customer_email] => [email protected]
            [order_id] => 6944
            [site_url] => https://fashionmaddy.com
        )

    [capture_method] => automatic
    [payment_method_types] => Array
        (
            [0] => card
        )

    [customer] => cus_KEJSqay4Msx8r0
    [shipping] => Array
        (
            [name] => test test
            [address] => Array
                (
                    [line1] => stet
                    [line2] => 
                    [city] => set
                    [country] => US
                    [postal_code] => 65445
                    [state] => CA
                )

        )

)

====End Log====

2021-09-15T05:38:41+00:00 DEBUG 
====Stripe Version: 5.4.1====
====Start Log====
Stripe PaymentIntent pi_3JZqpQSBv1zjt6Oz0RCWufXG initiated for order 6944
====End Log====

2021-09-15T05:38:41+00:00 DEBUG 
====Stripe Version: 5.4.1====
====Start Log====
payment_intents/pi_3JZqpQSBv1zjt6Oz0RCWufXG/confirm request: Array
(
     => src_1JZqpLSBv1zjt6OzdQnQikos
)

====End Log====

2021-09-15T05:38:42+00:00 DEBUG 
====Stripe Version: 5.4.1====
====Start Log====
Stripe PaymentIntent pi_3JZqpQSBv1zjt6Oz0RCWufXG requires authentication for order 6944
====End Log====

2021-09-15T05:38:46+00:00 DEBUG 
====Stripe Version: 5.4.1====
====Start Log====
payment_intents/pi_3JZqpQSBv1zjt6Oz0RCWufXG request: Array
(
)

====End Log====

2021-09-15T05:43:37+00:00 DEBUG 
====Stripe Version: 5.4.1====
====Start Log====
sources/src_1JZquASBv1zjt6OzNyBsdiA3
====End Log====

2021-09-15T05:43:37+00:00 DEBUG 
====Stripe Version: 5.4.1====
====Start Log====
customers request: Array
(
    [email] => [email protected]
    [description] => Name: Ghanshyam Pala, Username: kanu
    [name] => Ghanshyam Pala
    [metadata] => Array
        (
        )

    [preferred_locales] => Array
        (
            [0] => en-US
        )

)

====End Log====

2021-09-15T05:43:38+00:00 DEBUG 
====Stripe Version: 5.4.1====
====Start Log====
Info: Begin processing payment for order 6946 for the amount of 44.98
====End Log====

2021-09-15T05:43:38+00:00 DEBUG 
====Stripe Version: 5.4.1====
====Start Log====
payment_intents request: Array
(
     => src_1JZquASBv1zjt6OzNyBsdiA3
    [amount] => 4498
    [currency] => usd
    [description] => FashionMaddy - Order 6946
    [metadata] => Array
        (
            [customer_name] => Ghanshyam Pala
            [customer_email] => [email protected]
            [order_id] => 6946
            [site_url] => https://fashionmaddy.com
        )

    [capture_method] => automatic
    [payment_method_types] => Array
        (
            [0] => card
        )

    [customer] => cus_KEJXgyd1PvlnPp
    [shipping] => Array
        (
            [name] => Ghanshyam Pala
            [address] => Array
                (
                    [line1] => Street 1
                    [line2] => 
                    [city] => New york
                    [country] => US
                    [postal_code] => 10001
                    [state] => NY
                )

        )

)

====End Log====

2021-09-15T05:43:39+00:00 DEBUG 
====Stripe Version: 5.4.1====
====Start Log====
Stripe PaymentIntent pi_3JZquESBv1zjt6Oz0BRbT4rl initiated for order 6946
====End Log====

2021-09-15T05:43:39+00:00 DEBUG 
====Stripe Version: 5.4.1====
====Start Log====
payment_intents/pi_3JZquESBv1zjt6Oz0BRbT4rl/confirm request: Array
(
     => src_1JZquASBv1zjt6OzNyBsdiA3
)

====End Log====

2021-09-15T05:43:40+00:00 DEBUG 
====Stripe Version: 5.4.1====
====Start Log====
Stripe PaymentIntent pi_3JZquESBv1zjt6Oz0BRbT4rl requires authentication for order 6946
====End Log====

2021-09-15T05:43:45+00:00 DEBUG 
====Stripe Version: 5.4.1====
====Start Log====
payment_intents/pi_3JZquESBv1zjt6Oz0BRbT4rl request: Array
(
)

====End Log====

2021-09-15T06:31:37+00:00 DEBUG 
====Stripe Version: 5.4.1====
====Start Log====
customers/cus_KEJXgyd1PvlnPp/sources request: Array
(
    [limit] => 100
)

====End Log====

I added a Stripe field,
On phone, chrome shows a message that explain the form is not secured and can’t fill automatically the card numbers.
When you type the card number manually, there is the same message.
Despite the site being in https.

You can test it, I’m on Stripe Test Mode
What to do ?
Thanks