Stripe 支付按钮在移动设备上未触发

Question

我正在与 Supabase 和 Stripe 一起开发 SvelteKit 项目。在我的定价页面上，我有供用户支付和升级计划的按钮。当我点击按钮时，桌面上的一切都运行良好，它会像预期的那样重定向到 Stripe 的支付页面。

但是在移动设备上，当我单击按钮时没有任何反应。它甚至不会尝试打开 Stripe 的支付页面。

我尝试过的： 与 on:click 事件一起使用。 切换到 href 设置为 Stripe URL 的标签。 通过一些 DOM 操作来尝试手动导航到结帐 URL。 无论我如何尝试，它仍然无法在移动设备上运行。我觉得我在这里错过了一些简单的东西。

我的代码： 这是我正在使用的按钮组件：

let checkoutUrl = '#';

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

    const data = await response.json();

    if (data.url) {
      checkoutUrl = data.url;
    }
  } catch (e) {
    console.error('Checkout error:', e);
  }
}

async function handleClick() {
  if (!isCurrentPlan) {
    await createCheckoutSession();
    if (checkoutUrl !== '#') {
      window.location.href = checkoutUrl;
    }
  }
}

这是我在 Sveltekit 中渲染按钮的方式

<button
  class={`checkout-button ${className}`}
  class:disabled={isCurrentPlan}
  on:click={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>

最后，这是我如何在定价页面上使用该组件。

<CheckoutButton
  priceId={$page.data.priceIds.PRO_YEARLY}
  paymentType="subscription"
  class="upgrade-button btn-popout btn-text-large"
>
  Upgrade To Pro
</CheckoutButton>

我的期望：
当我在移动设备上单击按钮时，它应该导航到 Stripe 的支付页面，就像在桌面上一样。

实际发生的情况：
在移动设备上，单击该按钮不会执行任何操作。就像点击事件没有被触发或者 URL 导航不起作用一样。

Answer 1

我首先添加以下代码：

window.addEventListener(
    `error`,
    e => alert(e.toString()),
)

然后再次尝试在智能手机上运行它。在智能手机上调试网页有点乏味，但是您应该能够使用这一小段代码来查看是否有未捕获的错误。