Stripe Payment Elements gives Google Pay Error

The payment works for card and paypal. My code:

const form = document.getElementById('payment-form');
        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            elements.submit();

            const {error} = await stripe.confirmPayment({
                elements,
                clientSecret,
                confirmParams: {
                    return_url: 'https://.../payment.html',
                },
                redirect: "if_required",
            })

            if (error) {
                alert(error.message);
            }
            close()
        });

This error is logged in the console when I click the submit button:

Failed to execute 'postMessage' on 'Window': Delegation is not allowed without transient user activation.

The Google Pay dialog displays. I can click the pay button. When I click the button it shows a spinner for a while (20 secs), then this error occurs in the Google Pay dialog:

REQUEST_TIMEOUT

In the console:

DEVELOPER_ERROR in loadPaymentData: An error occurred in call back, please try to avoid this by setting structured error in callback response

It's because you have elements.submit();

It should be await elements.submit(); like all the Stripe documentation describes.

.submit() opens the Google Pay popup, the Promise resolves after the customer has interacted with it and pressed Pay. You can't call confirmPayment until after that, that's why you need to wait for this Promise to resolve.

https://docs.stripe.com/elements/express-checkout-element/accept-a-payment?client=html#create-and-mount