I'm getting an undefined error in the square.js file

[rentovault]

I've implemented the square payment just like the documentation indicated and I'm getting an error when loading the page and the card section does not come up.

It's a Django project, hosted in AWS EC2. We do use cloudflare but I've disabled it and it still doesn't work. Works perfectly in localhost.

Uncaught (in promise) TypeError: window.Square.payments is not a function

This is my implementation

<script type="text/javascript" src="https://web.squarecdn.com/v1/square.js"></script>

<!-- Square payment scripts -->
<script>
  const appId = "{{APPID}}";
  const locationId = "{{LOCATIONID}}";

   document.addEventListener('DOMContentLoaded', async function () {
    if (!window.Square) {
      throw new Error('Square.js failed to load properly');
    }

    const payments = window.Square.payments(appId, locationId); // This is where the error is thrown
    ...
    }

[frances_a]

Hello @rentovault 

And ✨WELCOME✨ to our Seller Community, we're always excited to see new faces. 

Although this is a great place to get a developer discussion started, you seem to have a specific question and there will be better chances of getting answers if you post here. 

Let me know how that goes! 

Thank you.