Next.js Affiliate Program Setup with Stripe Checkout

3 min read

This guide is for teams building their own merchant affiliate program in a Next.js application. It covers the App Router and the same client/server boundary also applies to Pages Router projects.

AffiliateBase captures the generated referral ID in the browser. A Route Handler, Server Action, or API route cannot read that browser value unless the client submits it. The server then creates Stripe Checkout with that generated ID, not the public token in the affiliate link.

Next.js documents sitewide third-party scripts in the root layout. Pair that placement with the Stripe handoff instructions and the verification checklist.

Implement and test the browser-to-server handoff:

Map the Checkout Request

Identify the Client Component that starts checkout and the server boundary that creates the Stripe Checkout Session. Hosted checkout alone does not preserve affiliate state.

Load the Tracking Script

Use Next.js’s supported Script component in the root or sales-route layout, preserving the account ID and data attributes from your AffiliateBase snippet.

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>

Submit the Generated Referral ID

Read the generated referral ID in the browser and include it in the checkout request. Validate it on the server, set Stripe client_reference_id, and mirror it to the documented AffiliateBase metadata fields.

Test a Fresh Browser Session

Open the exact generated test affiliate link, start checkout from the tracked page, and complete a test-mode payment through the same server route used in production.

Confirm Sale and Commission

Verify the checkout event contains the generated UUID and that AffiliateBase creates the expected sale and commission. Test recurring billing separately.

What the Next.js Integration Separates

Client Referral Capture

The browser owns the affiliate click and generated referral state.

Server Checkout Creation

Your protected Stripe secret and Checkout Session creation remain server-side.

End-to-End Proof

A completed test checks the handoff, webhook processing, sale, and commission together.

Ready to get started?

Test one referral through the same client and server path your customers use.

Start for free

Next.js Affiliate Tracking Questions

Can a Server Component read window.AffiliateBase?

No. Browser globals are available only on the client. Send the generated referral ID to your server checkout action or route.

Should client_reference_id contain the ?via value?

No. The ?via value is the public affiliate-link token. Stripe should receive the generated AffiliateBase referral ID.

Does loading the script prove checkout attribution?

No. Verify a test click, the generated referral ID on the completed Checkout Session, and the resulting sale and commission.

Related Platform Guides

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.

Add Affiliate Tracking to a Vue Checkout

Capture affiliate referrals in Vue, send the generated referral ID to your checkout backend, and verify the Stripe sale and commission.

Verify Your Next.js Checkout Path

Test one referral through the same client and server path your customers use.

Start for free Read the Stripe guide