React Affiliate Program Tracking with Stripe

3 min read

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.

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>

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.

Ready to get started?

Test the exact referral and checkout route customers will use.

Start for free

React Affiliate Tracking Questions

Is there an AffiliateBase React package?

This guide uses the browser tracking script. It does not require or claim an AffiliateBase npm package.

Can React create Stripe Checkout securely?

The browser should request checkout from your server. Keep Stripe secret-key work server-side and submit only the generated referral ID.

How do I verify attribution?

Complete a test checkout from the generated affiliate link and confirm the referral, sale, and commission in AffiliateBase.

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

Start for free Read the Stripe guide