使用Square .NET API的SqPaymentForm无法返回nonce问题咨询

问题核心 #

你的网站使用的Square-DotNet-SDK/11.0.0属于已废弃的v2版本，Square早已停止对v2支付表单（SqPaymentForm）的维护支持。经过大半年未使用，浏览器环境更新或Square后端服务调整，直接导致了无法生成支付nonce的问题。

分步排查与解决 #

1. 先查脚本加载是否正常 #

你的代码只初始化了sqPaymentForm，但要确认页面里是否还能正常加载Square的v2脚本。旧版脚本引用一般是：

<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>

打开浏览器F12控制台，看是否有脚本加载失败（404/500）、跨域或安全报错——如果这个地址已经失效，那表单肯定无法工作。

2. 验证应用ID的有效性 #

• 检查applicationId是否对应正确的环境：沙箱ID只能在沙箱环境用，生产环境必须用生产ID，别搞混了。
• 登录Square商家后台，确认这个应用没有被禁用，权限也没被改动。

3. 看控制台的具体报错信息 #

打开开发者工具的Console标签，找有没有这些错误：

• sqPaymentForm未定义（脚本没加载成功）
• 安全策略报错（比如CSP阻止了脚本运行）
• 回调函数执行时的异常（比如找不到TextBoxError这类元素）

4. 彻底解决：升级到Web Payments SDK（推荐） #

Square的v2支付方案已经被完全淘汰，官方现在只维护Web Payments SDK，这是解决问题的根本办法，避免后续再出兼容性问题。

给你适配原有功能的迁移示例：

第一步：替换脚本引用

把原来的v2脚本换成最新的Web Payments SDK：

<!-- 沙箱环境 -->
<script src="https://sandbox.web.squarecdn.com/v1/square.js"></script>
<!-- 生产环境用这个 -->
<!-- <script src="https://web.squarecdn.com/v1/square.js"></script> -->

第二步：重构支付表单代码

// 初始化Square客户端，替换成你的应用ID和位置ID
const payments = Square.payments('你的应用ID', '你的位置ID');

// 初始化卡片支付组件
async function initCardPayment() {
  const card = await payments.card();
  // 把卡片输入组件挂载到页面的容器里（需要在HTML里加个<div id="card-container"></div>）
  await card.attach('#card-container');

  // 监听支付按钮或者表单提交事件，生成nonce
  document.getElementById('ButtonChargeCard').addEventListener('click', async () => {
    const result = await card.tokenize();
    const errorDiv = document.getElementById('TextBoxError');
    const nonceField = document.getElementById('cardNonce');
    const nonceTextBox = document.getElementById('TextBoxNonce');

    if (result.status === 'OK') {
      // 成功拿到nonce，赋值到对应字段
      nonceField.value = result.token;
      nonceTextBox.value = result.token;
      document.getElementById('ButtonChargeCard').disabled = false;
      errorDiv.value = '';
    } else {
      // 处理错误
      errorDiv.value = result.errors.map(err => err.message).join(' ');
      document.getElementById('ButtonChargeCard').disabled = true;
    }
  });
}

// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', initCardPayment);

第三步：调整HTML结构

原来的分散的卡号、CVV等输入框可以删掉，换成一个容器：

<div id="card-container"></div>
<!-- 保留原来的错误提示、nonce隐藏字段和支付按钮 -->
<input type="text" id="TextBoxError" readonly>
<input type="hidden" id="cardNonce">
<input type="text" id="TextBoxNonce" readonly>
<button id="ButtonChargeCard" disabled>Charge Card</button>

5. 临时应急方案（不推荐长期用） #

如果暂时没时间升级，可以试试：

• 用Chrome旧版本测试，看是不是浏览器新特性阻止了旧脚本运行
• 确认Square官方归档文档里有没有v2服务终止的通知，有没有临时修复办法

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