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

Vue Affiliate Program Tracking with Stripe

Know what must work before you launch

Carry browser referral state into the server that creates Stripe Checkout

Best fit
Teams evaluating AffiliateBase for a Vue 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 Vue application. Vue owns the checkout UI; a backend or full-stack framework must create Stripe Checkout securely.

Load AffiliateBase in the app’s HTML shell, then submit the generated referral ID when the customer starts checkout. A composable or Pinia store may hold the value, but it does not replace the server handoff.

Nuxt users should also see the Nuxt-specific guide. Every implementation should follow the Stripe handoff and verification steps.

Build around the actual checkout request:

1

Identify the Checkout Backend

Locate the Vue event that starts checkout and the protected endpoint that creates the Stripe Checkout Session.
2

Install the Tracking Script

Add the account-specific script to index.html or the framework layout so affiliate landing pages capture the visit.
html 
<script async src="https://app.affiliatebase.io/track.js" data-account-id="YOUR_ACCOUNT_ID"></script>
3

Submit the Generated Referral ID

Send the generated UUID to the backend, validate it, and pass it to Stripe as client_reference_id with the documented metadata mirror.
4

Run a Fresh Test

Open the generated test affiliate link, start checkout in Vue, and complete a Stripe test-mode payment.
5

Verify AffiliateBase Records

Confirm the referral, payment event, sale, and commission. Test renewals separately for recurring programs.

What This Vue Setup Clarifies

Client State

Vue can expose the generated referral ID to the checkout action.

Server Security

Stripe secrets and session creation remain outside the browser.

Verified Attribution

The final check confirms a business outcome rather than only page tracking.

Vue Affiliate Tracking Questions

Do I need a Vue plugin?
No. This guide uses the AffiliateBase browser script and your existing checkout request.
Can Pinia make Stripe attribution automatic?
No. It can retain the generated referral ID, which your code must still submit to the backend.
What proves the integration?
A completed Stripe checkout with the generated referral 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.

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.

Test Your Vue Affiliate Checkout

Verify one referral through the exact route buyers use.

Start for free Read the Stripe guide