SDKs & Integrations
React Hooks

React SDK

The Novasend React SDK provides optimized hooks to easily integrate payments into your modern applications. It natively supports real-time tracking via Server-Sent Events (SSE).

Installation

npm install novasend-react react

Configuration

Initialize your keys (available on the Novasend Portal (opens in a new tab)), typically via VITE_ or NEXT_PUBLIC_ environment variables.

const config = {
  apiKey: import.meta.env.VITE_NOVASEND_API_KEY,
  secretKey: import.meta.env.VITE_NOVASEND_SECRET_KEY,
  baseUrl: import.meta.env.VITE_NOVASEND_BASE_URL,
};

Available Hooks

useNovasend

The main hook for initiating payment or transfer actions.

import { useNovasend } from "novasend-react";
 
function Checkout() {
  const { initiateWalletPayment, loading, error } = useNovasend(config);
 
  const handlePay = async () => {
    try {
      const paymentUrl = await initiateWalletPayment({
        reference: crypto.randomUUID(),
        amount: 5000,
        msisdn: "+2250102030405",
        customerName: "Kouassi Yao",
        country: "CI",
        action: {
          successUrl: window.location.origin + "/success",
          failureUrl: window.location.origin + "/cancel",
        },
      });
      // Redirect to the Novasend portal
      window.location.href = paymentUrl;
    } catch (err) {
      console.error("Initialization failed", err);
    }
  };
 
  return (
    <button onClick={handlePay} disabled={loading}>
      {loading ? "Loading..." : "Pay Now"}
    </button>
  );
}

usePaymentStatus (Real-time)

This hook uses SSE (Server-Sent Events) to instantly receive status updates from your backend (which receives Novasend webhooks).

import { usePaymentStatus } from "novasend-react";
 
function StatusWatcher({ reference }) {
  const { data, loading, isTerminal } = usePaymentStatus({
    reference,
    sseUrl: `/api/payments/stream?reference=${reference}`,
    onTerminal: (res) => {
      console.log("Final status reached:", res.status);
    },
  });
 
  return (
    <div>
      <p>Status: {data?.status || "Waiting..."}</p>
      {loading && <span>Connecting to live stream...</span>}
      {isTerminal && <b>Payment completed.</b>}
    </div>
  );
}

Security

🚫

Never share your secretKey on the client side. Even though the SDK is designed for the browser, the secretKey must remain server-side. For maximum security, we recommend using the SDK only in Server-Side environments (Next.js API Routes, Nuxt Server, etc.) or via a proxy.

Browser Support

The SDK is browser-native. It uses fetch and crypto.randomUUID, eliminating any dependence on Node.js (like buffer or crypto). It is compatible with modern browsers and Edge environments.

GoPrestaShop