Next.js集成Square Payments遇InvalidApplicationIdError：applicationId格式错误求助

可能的原因及解决步骤 #

1. 初始化代码参数混淆 #

Square的前端客户端SDK和后端服务端SDK初始化规则不同，最常见的错误是参数混用：

• 前端（@square/web-payments-sdk）：必须使用applicationId（对应你环境变量中的NEXT_PUBLIC_SQUARE_APPLICATION_ID）和environment初始化，示例代码：

  import { payments } from '@square/web-payments-sdk';
  
  const paymentInstance = await payments(
    process.env.NEXT_PUBLIC_SQUARE_APPLICATION_ID,
    process.env.NEXT_PUBLIC_SQUARE_ENVIRONMENT
  );
  

• 后端（@squareup/square）：只需要accessToken和environment，绝对不能传入applicationId参数，错误添加该参数会直接触发格式错误：

  import { Client, Environment } from '@squareup/square';
  
  const squareClient = new Client({
    accessToken: process.env.SQUARE_ACCESS_TOKEN,
    environment: process.env.SQUARE_ENVIRONMENT === 'sandbox' ? Environment.Sandbox : Environment.Production
  });
  

2. 环境变量未正确加载 #

验证环境变量是否被正确读取：

• 在代码中临时打印变量值，确认没有多余空格或拼写错误：

  // 前端代码
  console.log('App ID:', process.env.NEXT_PUBLIC_SQUARE_APPLICATION_ID);
  // 后端代码
  console.log('App ID:', process.env.NEXT_PUBLIC_SQUARE_APPLICATION_ID);
  

• 重启Next.js开发服务器，确保.env文件的修改被加载。

3. SDK版本问题 #

旧版本的Square SDK可能存在格式验证逻辑漏洞，更新到最新版本修复：

# 更新前端支付SDK
npm install @square/web-payments-sdk@latest
# 更新后端服务SDK
npm install @squareup/square@latest

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