如何获取URL参数传入Zapier webhook，生成Stripe新链接后重定向用户

核心错误点 #

• 语法错误：fetch的URL拼接逻辑存在语法问题，?不属于运算符，不能直接和字符串做相加运算，代码运行时会直接抛出语法错误中断执行，这是无法触发webhook的核心原因。同时GET传参需要符合参数名=参数值的格式，不能仅传入Stripe ID的数值。
• 缺少异步处理：fetch是异步API，原代码没有等待webhook返回结果，也没有对返回的新链接做重定向处理。
• 请求格式不规范：Zapier webhook默认更适配POST请求传参，直接用GET拼接参数容易触发缓存、参数长度限制等问题。

修复后的完整代码 #

const urlParams = new URLSearchParams(window.location.search);
const StripeConnectedAccount = urlParams.get('StripeConnectedAccount');

// 先校验Stripe ID是否存在
if (!StripeConnectedAccount) {
  alert('缺少Stripe关联账户ID，无法生成新链接');
  throw new Error('StripeConnectedAccount is empty');
}

// 用POST请求发送参数到Zapier webhook
fetch('https://hooks.zapier.com/hooks/catch/10517912/bthl3st', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    StripeConnectedAccount: StripeConnectedAccount
  })
})
.then(res => res.json()) // 适配Zapier返回的JSON格式响应
.then(data => {
  // 可根据Zapier实际返回的字段名调整读取逻辑
  if (data.newUrl) {
    window.location.href = data.newUrl;
  } else {
    alert('生成新链接失败，请稍后重试');
  }
})
.catch(err => {
  console.error('调用webhook失败：', err);
  alert('请求异常，请稍后重试');
});

额外校验注意事项 #

• 确认Zapier webhook的触发配置是否支持POST请求、是否允许接收JSON格式参数
• 确认Zapier自动化流程执行完成后，返回的响应格式包含新链接字段，和代码中读取的字段名保持一致
• 如果必须使用GET请求传参，正确的拼接方式为：
  fetch(https://hooks.zapier.com/hooks/catch/10517912/bthl3st?StripeConnectedAccount=${StripeConnectedAccount})

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