Why isn’t my Stripe Checkout Button Triggering on Mobile in SvelteKit?

It turns out that mobile browsers (and particularly iOS/Safari) are very strict about what counts as a “user-initiated” navigation. When you wait for an asynchronous call (to fetch your checkout session) before doing the redirection, the browser may not consider the redirect as directly triggered by the user’s tap. As a result, it silently blocks the navigation.

One common workaround is to open (or “reserve”) a new window immediately in the tap handler so that the browser sees a direct response to the user’s action, then update that window’s URL after your async call finishes. For example:

SVELTECopied
<script>
  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) {
      // Open a new window immediately to capture the user gesture.
      const newWindow = window.open('', '_self');
      
      await createCheckoutSession();
      if (checkoutUrl !== '#') {
        newWindow.location.href = checkoutUrl;
      } else {
        newWindow.close();
      }
    }
  }
</script>

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

What’s Happening

• User Tap: Immediately triggers the click handler and opens a new window (even if it’s blank).
• Async Call: The async function fetches the checkout URL.
• Update Window: Once you have the URL, setting newWindow.location.href navigates it to Stripe’s payment page.

This pattern ensures that the mobile browser treats the navigation as user initiated because the new window was opened directly in response to the tap.

Give this approach a try and see if it resolves the mobile navigation issue.