@bjpay/react

Widget de paiement BjPay pour React.

Installation

npm install @bjpay/react

React ≥ 17 est une dépendance de pair : le paquet utilise celle de votre projet.

Usage

import { useBjPay } from "@bjpay/react";

function BoutonPayer({ token }) {
  const { pay, status, error } = useBjPay({
    baseUrl: "https://bjpay-staging.service-public.bj/widget/v2",
  });

  if (status === "error") return <p>Paiement indisponible : {error.message}</p>;

  return (
    <button
      disabled={status !== "ready"}
      onClick={() =>
        pay({
          token,
          merchant: "Direction Générale des Impôts",
          title: "Quittance — Impôt foncier 2026",
          ref: "BJ-2026-00482",
          amount: 5000,
          currency: "XOF",
          onSuccess: ({ transaction }) => confirmerCoteServeur(transaction),
          onError: ({ reason }) => afficher(reason),
        })
      }
    >
      {status === "ready" ? "Payer" : "Chargement…"}
    </button>
  );
}

Ce que le hook rend

| | | |---|---| | pay(config) | Ouvre le widget. Silencieux tant que le loader n'est pas prêt — un clic pendant le chargement ne lève pas | | close() | Ferme la modale depuis votre code | | status | "loading" · "ready" · "error" | | error | L'Error du chargement, ou null |

Pourquoi un hook plutôt qu'un useEffect écrit à la main

React monte, démonte et remonte chaque composant en StrictMode. Une intégration écrite à la main y ouvre deux widgets — et le développeur ne le voit qu'en développement, jamais en production, où StrictMode est absent.

Le hook garantit une seule balise et un seul chargement, quels que soient le nombre de composants et les remontages.

baseUrl n'a pas de valeur par défaut

C'est cette valeur qui décide vers quel déploiement part le paiement. Un défaut sur la production ferait engager de vrais débits à une intégration de recette qui l'aurait oubliée. C'est tout ce qui précède /bjpay.min.js, préfixe de chemin compris.

Next.js et le rendu côté serveur

L'import est sans effet sur le serveur ; le chargement n'a lieu qu'au montage. Aucun dynamic(… { ssr: false }) n'est nécessaire.

onSuccess ne vaut pas preuve de paiement

C'est un événement de navigateur, émis par une page que vous ne contrôlez pas. Confirmez toute transaction côté serveur auprès de TresorPay avant de livrer un service ou de marquer une commande comme réglée.

Licence

MIT