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.