SvelteKit项目Stripe支付按钮移动端点击无响应问题

1. 修复isLoading状态未更新的问题 #

你的按钮依赖isLoading控制禁用状态，但代码中没有在请求开始/结束时更新这个状态。移动端用户可能快速重复点击，导致请求阻塞或事件异常。

修改组件代码：

// 先声明isLoading状态
let isLoading = false;

async function handleClick() {
  if (!isCurrentPlan && !isLoading) {
    isLoading = true;
    try {
      await createCheckoutSession();
      if (checkoutUrl !== '#') {
        window.location.href = checkoutUrl;
      }
    } finally {
      // 无论请求成功失败，都重置isLoading
      isLoading = false;
    }
  }
}

async function createCheckoutSession() {
  try {
    const response = await fetch('/api/create-checkout-session', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        priceId,
        paymentType,
      }),
    });

    // 新增：检查响应是否正常
    if (!response.ok) {
      throw new Error(`请求失败: ${response.status}`);
    }

    const data = await response.json();

    if (data.url) {
      checkoutUrl = data.url;
    } else {
      throw new Error('未获取到支付链接');
    }
  } catch (e) {
    console.error('支付会话创建失败:', e);
    // 给用户显示错误提示
    alert('创建支付链接失败，请稍后重试');
  }
}

2. 兼容移动端触摸事件 #

部分移动端浏览器对click事件触发有延迟，或需要额外处理触摸事件。给按钮同时绑定touchstart事件（注意阻止默认行为避免重复触发）：

<button
  class={`checkout-button ${className}`}
  class:disabled={isCurrentPlan}
  on:click={handleClick}
  on:touchstart|preventDefault={handleClick}
  disabled={isCurrentPlan || isLoading}
>
  <slot>
    {#if isLoading}
      Processing...
    {:else if isCurrentPlan}
      Current Plan
    {:else}
      {paymentType === "subscription"
        ? "Upgrade To Pro"
        : "Upgrade To Lifetime"}
    {/if}
  </slot>
</button>

3. 排查元素遮挡问题 #

检查移动端页面是否有透明元素（如导航栏遮罩、绝对定位的容器）覆盖在按钮上方，导致点击事件被拦截。可以通过浏览器开发者工具的移动端模式，查看按钮的元素层级和点击区域。

4. 调试移动端请求状态 #

使用Chrome远程调试功能连接移动端设备，查看控制台是否有以下异常：

• /api/create-checkout-session请求失败（比如CORS错误、网络问题）
• 响应未返回有效的data.url
• JavaScript报错阻止了后续逻辑

5. 替换跳转方式尝试 #

如果window.location.href在移动端有兼容性问题，尝试用window.open替代：

// 在handleClick中替换跳转代码
window.open(checkoutUrl, '_self');

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