I'm designing 'sad path' scenarios for checkout and I'm trying to design for helping customers when a connection timeout occurs when the checkout hangs trying to connect to our 3rd party credit card payment form.

When this happens the credit payment form could not get loaded in our checkout environment.

A simple solution is to reload the page.

The UX/UI solution I'm putting forward is an alert message that appears on the page and asks the customer to reload the page.

This is my attempt at making the error message more 'user-friendly':

---

A connection error occurred

An error occurred when we were trying to connect to the system.

Please reload the page to try connecting again.

[ Reload page ] <--- button

---

How do people feel about the above message? Any other solutions you can think of?

Thanks.