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.
Follow the attribution evidence
Illustrative scenario · fictional values
-
Referred visit
?via=partner
AffiliateBase captures the visit and generates a referral record.
-
Checkout handoff
referral ID
The checkout must carry the generated identifier into Stripe.
-
Paid event
$99 paid
A supported Stripe event confirms the attributed payment.
-
Commission
$19.80 due
An eligible attributed sale creates the commission record.
-
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:
Identify the Checkout Backend
Locate the Vue event that starts checkout and the protected endpoint that creates the Stripe Checkout Session.
Install the Tracking Script
Add the account-specific script to index.html or the framework layout so affiliate landing pages capture the visit.
<script async src="https://app.affiliatebase.io/track.js" data-account-id="YOUR_ACCOUNT_ID"></script>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.
Run a Fresh Test
Open the generated test affiliate link, start checkout in Vue, and complete a Stripe test-mode payment.
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?
Can Pinia make Stripe attribution automatic?
What proves the integration?
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.
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.
Stripe Affiliate Tracking Made Simple
Create an affiliate program for your Stripe business. Set up Payment Links or Checkout, track recurring commissions, and verify referral attribution.
Test Your Vue Affiliate Checkout
Verify one referral through the exact route buyers use.