切换自定义按钮时更换Square密钥（Application ID/Location ID）及支付表单异常问题

完全可以实现点击按钮切换Square密钥的需求，你当前的问题是因为没有销毁旧的支付表单实例，导致新初始化时复用了之前的配置信息。具体解决方法如下：

1. 预先存储密钥配置组
   把两组Application ID和Location ID整理成配置对象，方便切换时调用：

const keyConfigs = {
  shopA: {
    appId: '你的第一组Application ID',
    locId: '你的第一组Location ID'
  },
  shopB: {
    appId: '你的第二组Application ID',
    locId: '你的第二组Location ID'
  }
};

2. 保留支付实例引用
   声明一个变量来保存当前的Square支付实例，这样切换时可以直接销毁旧实例：

let currentPayments = null;

3. 封装初始化/重置支付表单的函数
   写一个异步函数，负责销毁旧实例、用新配置初始化新表单，同时处理卡片绑定和提交逻辑：

async function setupPaymentForm(config) {
  // 先销毁旧的支付实例，避免残留配置
  if (currentPayments) {
    currentPayments.destroy();
  }

  // 用新配置创建支付实例
  currentPayments = await Square.payments(config.appId, config.locId);
  
  // 创建卡片表单并挂载到容器
  const cardForm = await currentPayments.card();
  await cardForm.attach('#card-container');

  // 处理表单提交：先移除旧事件再绑定新的，防止多次触发
  const paymentForm = document.getElementById('payment-form');
  paymentForm.removeEventListener('submit', handleSubmit);
  paymentForm.addEventListener('submit', (e) => handleSubmit(e, cardForm));
}

async function handleSubmit(event, cardForm) {
  event.preventDefault();
  // 执行卡片token化逻辑
  const tokenResult = await cardForm.tokenize();
  if (tokenResult.token) {
    // 这里处理拿到token后的逻辑，比如传给后端
    console.log('生成的支付Token:', tokenResult.token);
  } else {
    console.error('Token生成失败:', tokenResult.errors);
  }
}

4. 绑定按钮切换事件
   给两个按钮分别绑定点击事件，触发对应配置的表单初始化：

// 绑定第一组密钥按钮
document.getElementById('btn-shopA').addEventListener('click', () => {
  setupPaymentForm(keyConfigs.shopA);
});

// 绑定第二组密钥按钮
document.getElementById('btn-shopB').addEventListener('click', () => {
  setupPaymentForm(keyConfigs.shopB);
});

核心要点 #

• 必须调用destroy()销毁旧的payments实例，这是Square SDK切换配置的关键，否则旧配置会一直残留
• 表单提交事件要先移除再重新绑定，避免多次点击按钮后同一事件被触发多次
• 所有表单操作（创建卡片、token化）都要基于新初始化的currentPayments实例执行

内容的提问来源于stack exchange，提问作者Harleen Kaur Arora