Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Stripe Payment Button Not Triggering on Mobile

$
0
0

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.


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>