Know what must work before you launch
Connect client-side referral state to the backend that creates Stripe Checkout
- Best fit
- Teams evaluating AffiliateBase for a React 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 building their own affiliate program around a React storefront or SaaS app. React handles the browser UI; your backend still owns Stripe Checkout creation.
Install AffiliateBase in the document shell used by every affiliate landing page. When a buyer starts checkout, submit the generated referral ID with the request to your backend. The public ?via token is not the Stripe client_reference_id.
If your React application uses a framework, follow that framework’s script and server-route conventions. Then use the Stripe guide and verification checklist.
Wire the browser and checkout backend together:
Locate the Checkout Boundary
Identify the React action that begins checkout and the backend endpoint that creates the Stripe Checkout Session.
Install the Tracking Script
Add the account-specific script to the HTML document or framework layout so it loads before checkout begins.
<script async src="https://app.affiliatebase.io/track.js" data-account-id="YOUR_ACCOUNT_ID"></script>Send Referral State to the Backend
Read the generated referral ID after the script is ready and include it in the checkout request. Validate it server-side and pass it to Stripe as client_reference_id.
Test a Fresh Referral
Open the exact setup-test affiliate link in a fresh browser session, then complete Stripe test checkout.
Confirm the Commission
Check that the completed checkout updated the referral and created the expected sale and commission.
What React Owns in the Flow
Browser Capture
The React page is where the affiliate click becomes a generated referral ID.
Explicit API Handoff
Your checkout request carries referral state to protected server code.
Framework Flexibility
The same contract works with a custom backend or a React framework’s server routes.
React Affiliate Tracking Questions
Is there an AffiliateBase React package?
Can React create Stripe Checkout securely?
How do I verify attribution?
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 Remix
Capture referrals in a Remix app, submit the generated referral ID through an action, and verify Stripe checkout 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.
Prove Your React Checkout Handoff
Test the exact referral and checkout route customers will use.