I have a Sveltekit, supabase & stripe project. When going to my pricing page and clicking on one of the payment buttons it doesn't seem to do anything, not even open the stripe payment page but this problem only exists when on a mobile device, at desktop it works as intented
I've tried using a buttons with onclick events, using anchor tags with hrefs and even some dom manipulation but nothing seems to work for mobile. I feel like I'm missing a small detail as to why its not working
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; } }}<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>That code is a component and this is how it looks on my pricing page for the button
<CheckoutButton priceId={$page.data.priceIds.PRO_YEARLY} paymentType="subscription" class="upgrade-button btn-popout btn-text-large"> Upgrade To Pro</CheckoutButton>