Stripe Payment Button Not Triggering on Mobile

I’m working on a SvelteKit project with Supabase and Stripe. On my pricing page, I’ve got buttons for users to pay and upgrade their plans. Everything works great on desktop when I click the button, it redirects to Stripe’s payment page like it’s supposed to.

But on mobile, nothing happens when I click the button. It doesn’t even try to open Stripe’s payment page.

What I’ve Tried: Using with on:click events. Switching to tags with href set to the Stripe URL. Messing around with some DOM manipulation to try to manually navigate to the checkout URL. No matter what I try, it still doesn’t work on mobile. I feel like I’m missing something simple here.

My Code: Here’s the button component I’m using:

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;
    }
  }
}

And here's how im rendering the button in 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>

Finally, here's how im using the component on the pricing page.

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

What I Expected:
When I click the button on mobile, it should navigate to Stripe’s payment page, just like it does on desktop.

What’s Actually Happening:
On mobile, clicking the button does nothing. It’s like the click event isn’t being triggered or the URL navigation isn’t working.

I would start by adding this code:

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

And then try running it on the smartphone again. Debugging webpages on smartphones is a bit tedious, but you should be able to use that small piece of code to see if you have an uncaught error.