Payments API Error

I just set up an account and tried following this video:
Sandbox 101: End to End Payments with Web Payments SDK - YouTube

but I get an error when I run the page:
main-iframe.js:3

GET https://pci-connect.squareupsandbox.com/payments/hydrate?applicationId=&hostname=localhost&locationId=&version=1.60.5 401 (Unauthorized)

square.js:3 Initializing Card failed UnexpectedError: An unexpected error occurred while initializing the payment method.
at Object. (square.js:3:298322)
at Generator.throw ()
at hh (square.js:3:296633)
at a (square.js:3:296874)

:wave: I’m Square Dev AI, here to help answer your question!
Based on the information you’ve provided, the following documentation will help answer your question:

Additional Documentation

Square Sandbox
Get Started
Make your First API Call

If this documentation helped you find a solution, please check the box indicating that this reply solves the problem.
Otherwise one of our Developer Advocates will provide additional assistance shortly.

The error message you’re seeing indicates that there’s an issue with the authorization. This usually happens when the application ID or location ID you’re using is incorrect or not properly configured.

Please ensure that you’re using the correct Sandbox application ID and location ID. These can be found in your Square Developer Dashboard under the Sandbox section.

Also, make sure that you’re using the correct Sandbox URL (https://connect.squareupsandbox.com) in your code.

If you’ve checked these and the issue persists, it might be worth double-checking your entire setup process to ensure all steps have been correctly followed.

This answer was reviewed by @Bryan-Square.

I followed the steps exactly, not sure what else I can do? I tried to attach files but got an error, grab screens here:

Square3.zip