SvelteKit Affiliate Program Setup with Stripe

3 min read

This guide is for merchants running an affiliate program in their own Svelte or SvelteKit app. A plain Svelte site can load the script in its HTML shell; SvelteKit projects can use app.html or an appropriate layout.

The generated referral ID exists in the browser. Submit it to the SvelteKit server route or form action that creates Stripe Checkout. A store can hold client state, but it does not attribute a payment by itself.

Use the Stripe checkout requirements and complete the verification checklist on a reachable deployment.

Connect the app shell, checkout request, and Stripe event:

Choose the Checkout Route

Locate the Svelte component that starts checkout and the SvelteKit server route or action that creates the session.

Install the Browser Script

Add the account-specific script to app.html, a shared layout, or the plain Svelte HTML shell so it loads on affiliate landing pages.

html

<script>(function(w,r){w._abq=w._abq||[];w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)}})(window,'affiliatebase');</script>
<script async src="https://app.affiliatebase.io/track.js" data-account-id='YOUR_ACCOUNT_ID'></script>

Pass Referral State Server-Side

Send the generated referral ID in the checkout request, validate it, and set Stripe client_reference_id with the documented metadata mirror.

Test the Published Flow

Open the generated test affiliate link and complete Stripe test checkout through the deployed app.

Confirm the Commission

Verify the completed checkout identifier, sale, and commission. A successful script load or webhook alone is incomplete.

What the SvelteKit Path Provides

Small Client Boundary

Only referral capture and checkout initiation need browser state.

Protected Checkout Creation

Stripe secret-key work remains in a server route or action.

Full-Path Verification

The test follows the buyer from affiliate link through commission creation.

Ready to get started?

Test the same client and server path your customers use.

Start for free

SvelteKit Affiliate Tracking Questions

Does a Svelte store create attribution?

No. It can hold the generated referral ID, which must still be sent to the checkout server route.

Can server code read the browser global?

No. Submit the generated referral ID from the client.

How should I test?

Use the generated test link on a deployed app, complete checkout, and confirm the sale and commission.

Related Platform Guides

Add an Affiliate Program to Next.js

Install affiliate tracking in Next.js, hand the generated referral ID to a server-created Stripe Checkout Session, and verify attribution.

Add an Affiliate Program to Nuxt

Load affiliate tracking in Nuxt, pass the generated referral ID to a server route, and verify a Stripe sale and commission.

Create an Affiliate Program with WordPress

Install AffiliateBase on WordPress, choose a supported Stripe checkout, and verify referral attribution without assuming WooCommerce or plugin compatibility.

Create an Affiliate Program with Webflow

Add affiliate tracking to a published Webflow site, pair it with a supported Stripe checkout, and verify referral attribution before launch.

Add Affiliate Tracking to a React Checkout

Capture affiliate referrals in a React app, send the generated referral ID to your checkout backend, and verify Stripe attribution.

Verify Your SvelteKit Checkout

Test the same client and server path your customers use.

Start for free Open verification steps