SDK React

Le SDK Novasend pour React propose des hooks optimisés pour intégrer facilement les paiements dans vos applications modernes. Il supporte nativement le suivi en temps réel via Server-Sent Events (SSE).

Installation

npm install novasend-react react

Configuration

Initialisez vos clés (disponibles sur le Portail Novasend), généralement via des variables d'environnement VITE_ ou NEXT_PUBLIC_.

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,
};

Hooks Disponibles

`useNovasend`

C'est le hook principal pour initier des actions de paiement ou de transfert.

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",
        },
      });
      // Redirection vers le portail Novasend
      window.location.href = paymentUrl;
    } catch (err) {
      console.error("Échec de l'initialisation", err);
    }
  };

  return (
    <button onClick={handlePay} disabled={loading}>
      {loading ? "Chargement..." : "Payer maintenant"}
    </button>
  );
}

`usePaymentStatus` (Temps Réel)

Ce hook utilise SSE (Server-Sent Events) pour recevoir instantanément les mises à jour de statut depuis votre backend (qui reçoit lui-même les webhooks Novasend).

import { usePaymentStatus } from "novasend-react";

function StatusWatcher({ reference }) {
  const { data, loading, isTerminal } = usePaymentStatus({
    reference,
    sseUrl: `/api/payments/stream?reference=${reference}`,
    onTerminal: (res) => {
      console.log("Statut final atteint :", res.status);
    },
  });

  return (
    <div>
      <p>Statut : {data?.status || "En attente..."}</p>
      {loading && <span>Connexion au flux en direct...</span>}
      {isTerminal && <b>Paiement terminé.</b>}
    </div>
  );
}

Sécurité

Ne partagez jamais votre secretKey côté client. Bien que le SDK soit conçu pour browser, la secretKey doit impérativement rester côté serveur. Pour une sécurité maximale, nous recommandons d'utiliser le SDK uniquement dans des environnements Server-Side (Next.js API Routes, Nuxt Server, etc.) ou via un proxy.

Support Navigateur

Le SDK est browser-native. Il utilise fetch et crypto.randomUUID, éliminant toute dépendance à Node.js (comme buffer ou crypto). Il est compatible avec les navigateurs modernes et les environnements Edge.