how can I get Stripe's checkout.js to work on Edge and Chrome (mobile)

Background

We have a site that processes payments through Stripe using Stripe's checkout.js functionality. It's very straightforward and we've been using it for years. It works fine on all major desktop browsers. It also works fine on mobile, with Firefox, Safari and Opera.

Expected behavior

A modal containing fields for credit card info flies down from the top of the screen and waits to be interacted with. It can be closed or it can be completed and submitted.

Behavior on Edge and Chrome (mobile)

On those browsers, instead of the modal flying down, an entirely new page is opened. The new page goes to some variation of: https://checkout.stripe.com/v3/oixxxxxxxxxxxQFpDfA.html?distinct_id=xxxxxd79-6dd5-xx7f-xxf7-39xxxxxxfe1 (obfuscated)

Question

What can I do to get this functionality working on those browsers?

Here's what the working version looks like:

And here's what the error looks like:

This UI is what Stripe's legacy checkout UI that they deprecated over 5 years ago now when they built their new product called Checkout. It's highly unlikely they would maintain compatibility with certain browsers at this point and new integrations should never be using that deprecated product as it doesn't support newer features such as 3D Secure for example

You should read their migration guide https://docs.stripe.com/payments/checkout/migration and move to that newer version of Checkout instead. Alternatively, you can use their PaymentElement UI feature: https://stripe.com/docs/js/element/payment_element