> ## Documentation Index > Fetch the complete documentation index at: https://docs.refindie.com/llms.txt > Use this file to discover all available pages before exploring further. # Adding Refindie to Your Website > Install tracking script and integrate with your payment system # Adding Refindie to Your Website Install tracking script and integrate with your payment system. ## Integration Steps ### 1. Add the tracking script Copy and paste the script below in the `` section of your website. **Script Parameters:** * `data-program-id` - Your affiliate program ID (required) ```html theme={null} ``` ### 2. Get referral data The script sets a global object with referral information: * `refindie_metadata.program_id` (string | number) * `refindie_metadata.ref_code` (string) * `refindie_metadata.is_new_visit` (boolean) ### 3. Send data during payment Include referral data in your payment API calls to attribute commissions. ## Integration Options ### Option 1: Stripe Connect (Recommended) 1. Connect your Stripe account in Settings > Integration 2. Pass the referral metadata to Stripe Checkout using the `metadata` field (exactly the object from `window.refindie_metadata`) ```typescript theme={null} const session = await stripe.checkout.sessions.create({ // ... your items and config mode: 'payment', metadata: window.refindie_metadata, }); ``` ```typescript theme={null} const session = await stripe.checkout.sessions.create({ // ... your items and config mode: 'subscription', metadata: window.refindie_metadata, // ⚠️ Must be here, NOT in subscription_data }); ``` **For subscriptions:** Always pass `window.refindie_metadata` in the checkout session's `metadata` field. Do **NOT** use `subscription_data: { metadata: window.refindie_metadata }` — this places metadata on the subscription object instead of the checkout session, which prevents commission tracking from working. * Professional payment processing * Commission tracking via Stripe metadata * Payment history and manual payout verification ### Option 2: Referral API Use the server-to-server endpoint when you use a custom payment provider or want to record a referral manually. * Endpoint: `POST /api/referral` * Headers: `x-api-key: ` * Body (JSON): * `ref_code` (string) * `program_id` (string | number) * `spent_amount` (number, in cents) * `currency` (string, e.g. "USD") * `transaction_id` (string, unique) ```typescript theme={null} await fetch("/api/referral", { method: "POST", headers: { "Content-Type": "application/json", "x-api-key": process.env.NEXT_PUBLIC_REFINDIE_API_KEY!, }, body: JSON.stringify({ ref_code: window.refindie_metadata.ref_code, program_id: window.refindie_metadata.program_id, spent_amount: 5000, // amount in cents currency: "USD", transaction_id: "order_12345", // unique idempotency key }), }); ``` ## Implementation Examples ### React Component (Next.js) ```jsx theme={null} "use client"; const CheckoutButton = () => { const handleCheckout = async () => { try { const response = await fetch("/api/checkout", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ amount: 1000, currency: "eur", metadata: window.refindie_metadata, // ⭐️ Referral data }), }); const { url } = await response.json(); if (url) window.location.href = url; } catch (error) { console.error("Error:", error); } }; return ; }; ``` ### API Route (app/api/checkout/route.ts) ```typescript theme={null} import { NextResponse } from "next/server"; import Stripe from "stripe"; const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, { apiVersion: "2024-06-20", }); export async function POST(req: Request) { try { const { amount, currency, metadata } = await req.json(); const session = await stripe.checkout.sessions.create({ line_items: [ { price_data: { currency: currency, product_data: { name: "Product", }, unit_amount: amount, }, quantity: 1, }, ], mode: "payment", success_url: `${process.env.NEXT_PUBLIC_APP_URL}/success`, cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}/cancel`, metadata: metadata, // ⭐️ Referral data }); return NextResponse.json({ url: session.url }); } catch (error) { return NextResponse.json({ error: "Payment error" }, { status: 500 }); } } ``` ## AI Assistant Prompt Copy this prompt into your AI assistant to implement this feature: ```` I need to integrate the Refindie affiliate tracking system into my website. Here's what I need to implement: 1. Add the tracking script to my website's section: 2. In my checkout/payment flow, include the referral data from window.refindie_metadata. Example implementation for payment: ```javascript const handlePayment = async () => { const response = await fetch('/api/checkout', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ amount: 1000, currency: 'eur', metadata: window.refindie_metadata // Include affiliate data }) }); } ``` Please implement this affiliate tracking integration on my website, making sure the referral data is properly passed to my payment system. ```` ## Tips and Help ### 💡 Important Tips * Add the script to all your pages to never miss a referral * Referral data is available as soon as the script is loaded * Test the integration in development mode before production * **Subscriptions:** The first payment is tracked via the checkout session metadata. Renewal payments are tracked automatically using the subscription ID — no extra work needed * **Never** put referral metadata in `subscription_data.metadata` — always use the checkout session's `metadata` field ### ✅ Verification To verify that the integration works, open your browser console and type `window.refindie_metadata`. You should see the referral data. ## Support If you encounter any difficulties, contact us at [contact@refindie.com](mailto:contact@refindie.com) or consult our documentation. * Email: [contact@refindie.com](mailto:contact@refindie.com) * Check our [Program Creation](program-creation) guide