React Integration

​

Before you start

• Set the program website in AgentRef to the same root domain your React app uses.
• Copy the exact AgentRef script snippet from Settings -> Integration.
• If checkout happens on a sibling subdomain, install AgentRef there too.

​

Recommended installation

<!-- public/index.html or index.html -->
<script
  defer
  src="https://www.agentref.co/api/tracking/script.js?pid=YOUR_PROGRAM_ID"
></script>

import { useEffect } from 'react';

export function AgentRefTracking() {
  useEffect(() => {
    if (document.querySelector('script[src*="/api/tracking/script.js"]')) {
      return;
    }

    const script = document.createElement('script');
    script.defer = true;
    script.src = 'https://www.agentref.co/api/tracking/script.js?pid=YOUR_PROGRAM_ID';
    document.head.appendChild(script);
  }, []);

  return null;
}

​

Checkout compatibility in React

​

SPA-specific notes

• AgentRef does not need to be reloaded on every route change.
• Hosted Stripe surfaces that render after navigation are still covered because the script watches the DOM.
• If you gate cookies behind consent, call window.AgentRef.setConsent('granted') after the visitor accepts.

​

Verify the installation

1. Land on the app through a real affiliate link.
2. Confirm agentref_cid and agentref_pid in DevTools.
3. Add ?agentref_debug=1 and inspect the console.
4. Complete one supported checkout flow and confirm AgentRef records the conversion.

​

Troubleshooting

• The script appears multiple times in the DOM: move the install into index.html or add a duplicate guard.
• Referral cookies are missing after a route transition: the problem is usually that the script never loaded on first render.
• Payment Links work but custom checkout does not: that means your React frontend is fine and your Stripe backend still needs the metadata bridge.

​

Related docs