Nom du projet

react-benin-payments

URL du dépôt

https://github.com/stvekoulo/react-benin-payments

Description

react-benin-payments est une librairie Open Source développée pour les environnements React et Next.js. Elle vise à standardiser et simplifier l'intégration technique des passerelles de paiement béninoises (FedaPay et KKiaPay).

L'objectif principal est de fournir une couche d'abstraction unifiée qui dispense les développeurs de la gestion manuelle des scripts externes, des iframes et des configurations redondantes.

Fonctionnalités techniques :

• Composants Prêts à l'emploi : Intégration rapide via des boutons pré-configurés (FedaPayButton, KkiaPayButton).
• Hooks Personnalisables : Logique de paiement découplée de l'interface (Headless UI) via useFedaPay et useKkiaPay pour une intégration sur mesure.
• Support TypeScript : Typage strict des props et des réponses d'API pour éviter les erreurs de développement.
• Compatibilité Next.js : Fonctionne nativement avec l'App Router (gestion des directives client/serveur).
• Sécurité : Mécanisme intégré pour déclencher une vérification de transaction côté backend avant de valider le paiement sur le frontend.

Installation

Pour installer le paquet via NPM :

bash
npm install react-benin-payments

Guide d'intégration

1. Configuration Globale (Context Provider)

Pour éviter de répéter les clés d'API sur chaque bouton, il est recommandé d'envelopper votre application (ou la partie gérant les paiements) avec le composant BeninPaymentProvider.

Ce composant permet de centraliser la configuration (clés publiques, mode test/live).

tsx
import { BeninPaymentProvider } from 'react-benin-payments';

export default function AppLayout({ children }) {
  return (
    <BeninPaymentProvider
      fedaPayPublicKey="pk_live_votre_cle_publique_feda"
      kkiaPayPublicKey="pk_votre_cle_publique_kkia"
      isTestMode={false} // Basculez sur true pour activer le mode Sandbox
    >
      {children}
    </BeninPaymentProvider>
  );
}

2. Utilisation des Composants

Une fois le Provider configuré, vous pouvez utiliser les composants de paiement directement dans vos pages. Ils récupéreront automatiquement les configurations globales.

tsx
import { FedaPayButton, KkiaPayButton } from 'react-benin-payments';

export default function CheckoutPage() {
  
  // Fonction de rappel exécutée uniquement en cas de succès
  const handleSuccess = (transaction) => {
    console.log("Paiement validé avec succès. ID :", transaction.transactionId);
    // Ici, vous pouvez rediriger l'utilisateur ou mettre à jour l'état de la commande
  };

  return (
    <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
      
      {/* Intégration du bouton FedaPay */}
      <FedaPayButton
        config={{
          amount: 5000, // Montant en FCFA
          description: "Achat de la formation React",
          customer: {
            email: "client@entreprise.com",
            lastname: "Doe",
            firstname: "John"
          }
        }}
        text="Payer via FedaPay"
        onSuccess={handleSuccess}
      />

      {/* Intégration du bouton KKiaPay */}
      <KkiaPayButton
        config={{
          amount: 5000,
          theme: "#000000", // Personnalisation de la couleur du widget
          paymentMethods: ["momo", "card"] // Restriction des méthodes de paiement
        }}
        text="Payer via KKiaPay"
        onSuccess={handleSuccess}
      />

    </div>
  );
}

𝐥’a𝐩𝐩 𝐪𝐮𝐢 𝐯𝐨𝐮𝐬 𝐞𝐦𝐩ê𝐜𝐡𝐞 𝐝’𝐨𝐮𝐛𝐥𝐢𝐞𝐫 𝐯𝐨𝐬 𝐝𝐨𝐜𝐮𝐦𝐞𝐧𝐭𝐬 𝐢𝐦𝐩𝐨𝐫𝐭𝐚𝐧𝐭𝐬 ! Cartes d’identité, passeport, assurance, abonnement, certification… tout ce qui expire est désormais centralisé au même endroit avec des rappels automatiques par email.

𝐏𝐥𝐮𝐬 𝐣𝐚𝐦𝐚𝐢𝐬 𝐝𝐞 𝐦𝐚𝐮𝐯𝐚𝐢𝐬𝐞 𝐬𝐮𝐫𝐩𝐫𝐢𝐬𝐞 ! 📋 𝐅𝐨𝐧𝐜𝐭𝐢𝐨𝐧𝐧𝐚𝐥𝐢𝐭é𝐬 𝐜𝐥é𝐬 : 👉 Dashboard clair avec calendrier et statistiques. 👉 Upload sécurisé de vos documents. 👉 Rappels personnalisables (30j, 7j, 1j avant l'échéance). 👉 100% gratuit pour commencer.

Portfolio — Refonte complète & mise en production

J’ai récemment finalisé la refonte complète de mon portfolio professionnel, avec un objectif clair : présenter mes projets de manière structurée, performante et moderne, tout en respectant les bonnes pratiques web actuelles.

👉 Le portfolio est accessible ici : https://octavebahoun-houtoukpe.vercel.app

---

🎯 Objectifs du projet

• Présenter mes réalisations de façon claire et professionnelle
• Offrir une expérience fluide sur desktop et mobile
• Mettre en valeur les projets sans surcharger l’interface
• Assurer de bonnes bases en performance, accessibilité et référencement

---

🛠️ Stack technique

• React
• Framer Motion (animations et transitions)
• Supabase (gestion et affichage dynamique des projets)
• React Hooks
• HTML / CSS / JavaScript
• Déploiement : Vercel

---

✨ Fonctionnalités clés

• Interface épurée et responsive

• Animations subtiles pour améliorer l’expérience utilisateur

• Chargement dynamique des projets depuis Supabase

• Liens directs vers :

  • Démonstrations en ligne
  • Dépôts GitHub

• Structure optimisée pour le référencement (SEO de base)

---

📱 Expérience utilisateur

• Conception mobile-first
• Zones interactives claires et accessibles
• Navigation simple et directe vers les projets
• Mise en avant du contenu sans distraction inutile

---

🔍 Pourquoi ce portfolio

Ce portfolio me permet de :

• Présenter concrètement mon travail
• Centraliser mes projets dans un espace maîtrisé
• Offrir aux recruteurs et collaborateurs une vision claire de mes compétences

---

🔗 Accès

• Je remercie aussi Mr Ben Ephraïm AGBANNON - Développeur Full-stack💻 •• Data Scientist qui m'aura inspiré par son travail

👉 Voir les projets https://octavebahoun-houtoukpe.vercel.app/projects/projects