Before you start
- Set the program website in AgentRef to the same root domain your Vue app serves.
- Copy the exact script snippet from
Settings -> Integration. - If your marketing site and checkout app live on different subdomains, install on both when both can start the conversion path.
Recommended installation
- index.html
- main.ts fallback
For Vue apps built with Vite, install the script in the shared HTML shell.
Checkout compatibility in Vue
| Checkout pattern | Recommendation |
|---|---|
| Stripe Payment Links, Buy Buttons, or Pricing Tables | Supported directly. Keep the script on the page that renders them. |
| Vue frontend calls an API that creates Stripe Checkout Sessions | Supported, but you must pass window.AgentRef.getCheckoutMetadata() to that API first. |
| Separate root-domain checkout | Not automatic. Cookies are first-party and stay on one root. |
Notes for Vue SPAs
- AgentRef does not need to be re-mounted on route changes.
- Late-rendered Stripe elements are still instrumented automatically.
- If you use a cookie banner component, call
window.AgentRef.setConsent('granted')after the visitor accepts.
Verify the installation
Troubleshooting
window.AgentRefnever appears: install the script earlier, ideally inindex.html.- Conversions are missing while clicks arrive: your Stripe session creation path still needs the Stripe guide.
- Cookies disappear between domains: use one shared root domain or install deliberately on every participating subdomain.
Related docs
Stripe Checkout
Metadata handoff for custom checkout sessions.
JavaScript Snippet
Cookie, parameter, and DOM API reference.
Debug Mode
Runtime inspection and warnings.