Integrating square payment form in NextJS. Type Error: window.Square.payments is not a function

[woyin]

Hi there, I am currently creating an e-commerce website and trying to integrate the Square payment form. I am currently following the documentation @https://developer.squareup.com/docs/web-payments/take-card-payment and have added the square cdn “https://sandbox.web.squarecdn.com/v1/square.js” in a script tag in the head of the html document. When initializing the form as shown in the documentation I get the below error

Type Error: window.Square.payments is not a function

Please find a screenshot of my code below.

is there something i am doing wrong? Any assistance will be much appreciated.

[josh-square]

Hey there @woyin, welcome to the forums!

If you’re following along with the Web Payments Quick Start, can you verify if you have all the dependencies installed?

[woyin]

Hi Josh,

Thank for the quick response. Yes, I can confirm that all my dependencies have been installed. My current Node version is v14.18.0

Please let me know if I am missing any dependencies.

[josh-square]

I see that you do have the square package, but I’m not seeing the rest of the packages from the quickstart project’s dependencies. For reference, here’s the quickstart’s package.json.