Skip to main content
AffiliateBase
Features Pricing Compare Help
Log in Start for free

Nuxt Affiliate Program Setup with Stripe Checkout

Know what must work before you launch

Carry a browser referral through your Nuxt server route and Stripe Checkout

Best fit
Teams evaluating AffiliateBase for a Nuxt affiliate workflow.
Checkout handoff
The checkout path must receive the generated AffiliateBase referral ID.
Proof required
Complete one referred checkout and confirm the attributed sale and commission.
Open verification checklist Start for free

Follow the attribution evidence

Illustrative scenario · fictional values

  1. Referred visit

    ?via=partner

    AffiliateBase captures the visit and generates a referral record.

  2. Checkout handoff

    referral ID

    The checkout must carry the generated identifier into Stripe.

  3. Paid event

    $99 paid

    A supported Stripe event confirms the attributed payment.

  4. Commission

    $19.80 due

    An eligible attributed sale creates the commission record.

  5. Payout prep

    Payout ready

    Review the commission and prepare the next step with your payout provider.

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:

1

Identify the Client and Server Boundary

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

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 async src="https://app.affiliatebase.io/track.js" data-account-id="YOUR_ACCOUNT_ID"></script>
3

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.
4

Test the Deployed App

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

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.

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