Nuxt Affiliate Program Setup with Stripe Checkout

3 min read

This guide is for merchants running a program in their own Nuxt application. Nuxt provides the page shell; AffiliateBase attribution still requires a supported Stripe checkout and a deliberate browser-to-server handoff.

Load the tracking script through Nuxt head configuration, then submit the generated referral ID with the request that creates Checkout. Do not read window state in server code or substitute the public ?via token.

Nuxt documents external scripts through app.head and useHead. Continue with the Stripe integration guide and checkout verification.

Build the handoff around your actual Nuxt checkout route:

Identify the Client and Server Boundary

Find the page that launches checkout and the server/api route that creates the Stripe Checkout Session.

Install the Browser Script

Add the account-specific script through Nuxt app.head or useHead so it loads on affiliate landing and checkout-start 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 the Generated Referral ID

Include the generated referral ID in the client request. On the server, validate it and pass it to Stripe as client_reference_id with the documented metadata mirror.

Test the Deployed App

Use AffiliateBase’s generated test link on a reachable Nuxt deployment and complete Stripe test checkout.

Verify Business Records

Confirm referral capture, the Stripe identifier handoff, the sale, and the commission. A successful webhook without attribution is not completion.

What This Nuxt Setup Covers

Nuxt Head Installation

Place the tracking script in the app shell without inventing an AffiliateBase npm package.

Nitro Server Boundary

Keep Stripe credentials server-side while explicitly accepting the browser referral ID.

Checkout Verification

Test the completed payment outcome instead of treating script load as proof.

Ready to get started?

Use one fresh test referral to prove the full Nuxt-to-Stripe path.

Start for free

Nuxt Affiliate Tracking Questions

Can a Nuxt server route read browser referral state?

No. Send the generated referral ID from the browser in the checkout request.

Will useHead alone attribute a Stripe sale?

No. It loads the script; your checkout path must also receive the generated referral ID.

What should I verify?

Verify the test referral, completed Stripe checkout with the generated ID, and the resulting AffiliateBase 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.

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.

Test Your Nuxt Affiliate Checkout

Use one fresh test referral to prove the full Nuxt-to-Stripe path.

Start for free Open verification steps