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 <head> section of your website.
Script Parameters:
data-program-id - Your affiliate program ID (required)
<script
async
src="https://www.refindie.com/refindie.js"
data-program-id="YOUR_PROGRAM_ID"
></script>
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)
- Connect your Stripe account in Settings > Integration
- Pass the referral metadata to Stripe Checkout using the
metadata field (exactly the object from window.refindie_metadata)
One-time Payment
Subscription
const session = await stripe.checkout.sessions.create({
// ... your items and config
mode: 'payment',
metadata: window.refindie_metadata,
});
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: <YOUR_PROGRAM_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)
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)
"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 <button onClick={handleCheckout}>Pay Now</button>;
};
API Route (app/api/checkout/route.ts)
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 <head> section:
<script async src="https://www.refindie.com/refindie.js" data-program-id="YOUR_PROGRAM_ID"></script>
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 or consult our documentation.