Square SCA VerifyBuyer JS代码语法错误排查求助

你遇到的控制台语法错误（Edge的Expected ')'、Firefox的missing ) after argument list），根源是**paymentform.verifyBuyer方法里的回调函数写法不符合JavaScript语法规则**。

错误原因分析 #

你在调用verifyBuyer时，错误地写了callback(err,verification) {——这不是合法的匿名函数定义方式。JavaScript中传递匿名回调作为参数时，应该直接使用函数表达式（不带callback这个前缀），或者箭头函数。

另外，你的代码还有一个潜在问题：当前逻辑里会在调用verifyBuyer后立刻提交表单，但verifyBuyer是异步操作，这会导致买家验证token还没写入隐藏字段就完成了表单提交，后续后端无法获取到验证信息。

修正后的代码方案 #

方案1：修复回调函数写法，确保等待验证完成后再提交表单

/* * callback function: cardNonceResponseReceived * Triggered when: SqPaymentForm completes a card nonce request */
cardNonceResponseReceived: function (errors, nonce, cardData) {
  // Assign the nonce value to the hidden form field
  document.getElementById('card-nonce').value = nonce;
  const verificationDetails = {
    amount: '100.00',
    intent: "CHARGE", //Allowed values: "CHARGE", "STORE"
    billingContact: {
      familyName: "Smith",
      givenName: "John",
      email: "jsmith@example.com",
      country: "GB",
      city: "London",
      postalCode: "SW7 4JA",
      phone: "020 7946 0532"
    }
  };
  try {
    paymentform.verifyBuyer(
      nonce,
      verificationDetails,
      // 修正：直接定义匿名函数，去掉多余的"callback"前缀
      function (err, verification) {
        if (err == null) {
          document.getElementById('buyerVerification-token').value = verification.token; // 注意：这里应该取verification.token，不是整个verification对象
        }
        // 修正：在回调里执行表单提交，确保验证完成后再提交
        document.getElementById('nonce-form').submit();
      }
    );
  } catch (typeError) {
    // TypeError thrown if illegal arguments are passed
    console.error('Verification error:', typeError);
    // 可以在这里添加错误提示，告知用户支付验证失败
  }
}

方案2：使用async/await（推荐，代码更清晰）

如果你的环境支持ES6+特性，可以用Promise+async/await的写法替代回调：

/* * callback function: cardNonceResponseReceived * Triggered when: SqPaymentForm completes a card nonce request */
cardNonceResponseReceived: async function (errors, nonce, cardData) {
  // Assign the nonce value to the hidden form field
  document.getElementById('card-nonce').value = nonce;
  const verificationDetails = {
    amount: '100.00',
    intent: "CHARGE", //Allowed values: "CHARGE", "STORE"
    billingContact: {
      familyName: "Smith",
      givenName: "John",
      email: "jsmith@example.com",
      country: "GB",
      city: "London",
      postalCode: "SW7 4JA",
      phone: "020 7946 0532"
    }
  };
  try {
    // Square的verifyBuyer方法返回Promise，可直接用await
    const verification = await paymentform.verifyBuyer(nonce, verificationDetails);
    document.getElementById('buyerVerification-token').value = verification.token;
    // 验证完成后提交表单
    document.getElementById('nonce-form').submit();
  } catch (err) {
    console.error('Verification error:', err);
    // 处理错误，比如显示给用户
  }
}

额外注意点 #

1. 验证token的取值：Square返回的verification对象里，实际需要的token是verification.token，不是整个对象，所以要注意赋值时的正确路径。
2. 作用域检查：确保paymentform变量是当前作用域内可访问的SqPaymentForm实例，避免出现paymentform is not defined的错误。
3. 环境兼容性：如果需要兼容旧浏览器（比如IE11），建议用方案1的回调写法；现代浏览器环境优先选择方案2的async/await。

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