ReloadPi Browse SDK
Integration Guide

npm install @crossabc/reloadpi-browse-sdk

import { ShoppiBrowseSDK } from "@crossabc/reloadpi-browse-sdk";

const sdk = new ShoppiBrowseSDK({
  baseUrl: process.env.RELOADPI_API_BASE_URL!,
  apiKey: process.env.RELOADPI_API_KEY!,
  shopUrl: process.env.NEXT_PUBLIC_RELOADPI_SHOP_URL || "https://reloadpi.com",
  referralCode: process.env.NEXT_PUBLIC_RELOADPI_REFERRAL_CODE,
});

export default sdk;

import { NextRequest, NextResponse } from "next/server";
import sdk from "@/lib/reloadpi/sdk";

export async function GET(req: NextRequest) {
  try {
    const { searchParams } = new URL(req.url);
    const country = searchParams.get("country") || undefined;
    const brand   = searchParams.get("brand")   || undefined;
    const limit   = Number(searchParams.get("limit")  || 12);
    const offset  = Number(searchParams.get("offset") || 0);

    const result = await sdk.vouchers.searchOffers({ country, brand, limit, offset });

    return NextResponse.json({
      items: result.items ?? [],
      total: result.total ?? 0,
    });
  } catch (error) {
    const message = error instanceof Error ? error.message : "Failed to load catalog.";
    return NextResponse.json({ error: message }, { status: 500 });
  }
}

"use client";
import { useEffect, useState } from "react";

type Offer = { offerId: string; brandName?: string; brand?: string; name?: string; country?: string; };

export default function VoucherGrid() {
  const [items, setItems] = useState<Offer[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function load() {
      try {
        const res  = await fetch("/api/catalog/vouchers/offers?country=NG&limit=12", { cache: "no-store" });
        const data = await res.json();
        setItems(data.items ?? []);
      } finally { setLoading(false); }
    }
    load();
  }, []);

  if (loading) return <p>Loading offers…</p>;

  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
      {items.map((item) => (
        <div key={item.offerId} className="rounded-xl border p-4">
          <h3 className="font-semibold">{item.brandName ?? item.brand ?? item.name ?? item.offerId}</h3>
          {item.country ? <p className="mt-1 text-sm text-stone-500">{item.country}</p> : null}
        </div>
      ))}
    </div>
  );
}

import sdk from "@/lib/reloadpi/sdk";

const buyUrl = sdk.getBuyUrl("vouchers", "AMAZON_NG_001");
// → https://reloadpi.com/vouchers/offer/AMAZON_NG_001?ref=PARTNER_ABC

# Server-only — never expose to the browser
RELOADPI_API_BASE_URL=https://shoppi-backend.onrender.com/api/catalog/
RELOADPI_API_KEY=your_private_api_key

# Safe to expose to the browser
NEXT_PUBLIC_RELOADPI_SHOP_URL=https://reloadpi.com
NEXT_PUBLIC_RELOADPI_REFERRAL_CODE=PARTNER_ABC