Svelte 5 Upgrade

[joshnuss]

• Convert state management to Runes
• Remove svelte/legacy
• Remove createEventDispatcher and replace on:event -> onevent
• Convert code to TypeScript
• Update docs
• Ensure All wrapper <div>'s use CSS display: contents
• Simplify Props types, use Stripe's option types directly when possible.
• Use onMount for initializing components
• Use $effect() to sync prop changes with Stripe via element.update()
• Check each component to confirm is supports of all Stripe's attributes and events
• Add <Elements.Deferred> component for creating payment intent later.
• Lint and prettify
• Manually test all components
• Create changelog of breaking changes

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
svelte-stripe-js	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 10, 2025 6:04pm

[niemyjski]

I'd be willing to help test a pre-release of this.

[joshnuss]

Thanks @niemyjski!

[Aylay]

any news here ?

[buhodev]

Thanks for the awesome work! I would like to bring up that using the new async svelte branch (PR, discussion) produces this error:

Uncaught Svelte error: set_context_after_init
setContext must be called when a component first initializes, not in a subsequent effect or after an await expression.

in the Elements.svelte, because the context is being set in the onMount function.

[buhodev]

I was able to fix the set_context_after_init error locally with getters:

Elements.svelte before

onMount(() => {
	elements = stripe.elements({
		mode,
		currency,
		amount,
		appearance,
		clientSecret,
		fonts,
		loader,
		locale
	});

	register(stripe);
	setContext('stripe', { stripe, elements });
});

Elements.svelte after

onMount(() => {
	register(stripe);
});

$effect(() => {
	if (stripe) {
		elements = stripe?.elements({
			mode,
			currency,
			amount,
			appearance,
			clientSecret,
			fonts,
			loader,
			locale
		});
	}
});

setContext('stripe', {
	get stripe() {
		return stripe;
	},
	get elements() {
		return elements;
	}
});