React (Vite, CRA, Remix)

For React apps without a framework script component, load the SDK from index.html and consume it with a hook.

Add the script to index.html

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My app</title>
    <script
      src="https://sdk.cashbackhive.com/sdk.js"
      data-key="cbh_pk_your_publishable_key"
      async
    ></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

For Remix, put the tag in app/root.tsx inside <head> or <body>.

Add type declarations

Copy the declaration file from the Types reference into src/types/cashback-hive.d.ts.

Create a hook

src/hooks/useCashbackHive.ts

import { useSyncExternalStore } from "react";
import type { CashbackHiveSdk } from "../types/cashback-hive";

function subscribe(onStoreChange: () => void) {
  window.addEventListener("cbh:ready", onStoreChange);
  return () => window.removeEventListener("cbh:ready", onStoreChange);
}

function getSnapshot(): CashbackHiveSdk | null {
  const sdk = window.CashbackHive;
  return sdk?.initialized ? sdk : null;
}

export function useCashbackHive(): CashbackHiveSdk | null {
  return useSyncExternalStore(subscribe, getSnapshot, () => null);
}

Using useSyncExternalStore (rather than useEffect + useState) handles the case where the SDK finished initialising before your component mounted.

Use it

src/App.tsx

import { useCashbackHive } from "./hooks/useCashbackHive";

export default function App() {
  const sdk = useCashbackHive();

  if (!sdk) return <p>Loading…</p>;

  return (
    <button onClick={() => sdk.auth.signIn()}>
      Activate cashback
    </button>
  );
}

Loading the script from JavaScript

If you can’t edit index.html (for example in an embedded widget), inject the tag at runtime. Guard against loading it twice.

export function loadCashbackHive(key: string) {
  if (document.querySelector('script[src="https://sdk.cashbackhive.com/sdk.js"]')) {
    return;
  }
  const script = document.createElement("script");
  script.src = "https://sdk.cashbackhive.com/sdk.js";
  script.async = true;
  script.dataset.key = key;
  document.head.appendChild(script);
}

data-key is read from document.currentScript when the SDK executes, so set dataset.key before appending the element to the DOM.

Content Security Policy

See Content Security Policy if your app sets one.

Get started

Installation

Widgets

Guides

API reference

Resources

React (Vite, CRA, Remix)

Loading the script from JavaScript

Content Security Policy

​Loading the script from JavaScript

​Content Security Policy

Loading the script from JavaScript

Content Security Policy