生产环境（AWS EC2）Squareup报错：TypeError: window.Square.payments不是函数

核心问题 #

你当前加载的是Square旧版v1的square.js，这个版本的SDK并不提供window.Square.payments方法——该方法属于**Square Payments SDK（新版v2）**的API，这就是报错的根本原因。本地环境可能因为缓存或其他巧合让新版脚本生效，但线上部署时旧脚本的问题彻底暴露了出来。

修复步骤 #

1. 替换SDK脚本地址
   将原有的旧版脚本：

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

   替换为新版Square Payments SDK的脚本：

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

2. 完善加载校验逻辑
   增强脚本加载后的校验，确保payments方法存在再执行后续代码，同时添加错误捕获：

   <!-- Square payment scripts -->
   <script>
     const appId = "{{APPID}}";
     const locationId = "{{LOCATIONID}}";
   
     document.addEventListener('DOMContentLoaded', async function () {
       // 严格校验SDK是否正确加载
       if (typeof window.Square === 'undefined' || typeof window.Square.payments !== 'function') {
         throw new Error('Square Payments SDK未正确加载');
       }
   
       try {
         // 初始化支付服务（注意await关键字）
         const payments = await window.Square.payments(appId, locationId);
         // 这里继续编写支付组件的初始化代码（比如创建卡片支付表单等）
       } catch (error) {
         console.error('支付服务初始化失败:', error);
       }
     });
   </script>
   

3. 环境配置排查

   • 确认EC2服务器的安全组/防火墙未限制对web.squarecdn.com的出站请求，确保SDK脚本能正常加载
   • 检查Django模板变量{{APPID}}和{{LOCATIONID}}在生产环境是否渲染为有效值：可以查看页面源码，确认这两个变量被替换成了Square后台对应的生产环境ID（沙箱ID不能用于生产环境）
   • 清空浏览器缓存或使用无痕模式测试，避免旧脚本缓存导致的问题

内容的提问来源于stack exchange，提问作者Istiak Ahmed