💸 FeexPay React SDK

SDK officiel pour intégrer les paiements FeexPay dans vos applications React de manière simple et rapide.

🚀 Installation

npm install @feexpay/react-sdk

ou

yarn add @feexpay/react-sdk

📆 Importation

Ajoutez les composants et le fichier CSS dans votre application :

import React from 'react';
import { FeexPayProvider, FeexPayButton } from '@feexpay/react-sdk';
import '@feexpay/react-sdk/style.css';

💻 Exemple d'utilisation

function App() {
  return (
    <div className="App">
      <h1>Intégration de FeexPay dans React</h1>

      <FeexPayProvider>
        <FeexPayButton
          amount={10}
          description="Test Payment"
          id="Votre id id"
          token="Votre api token"
          customId="23455"
          callback_url="https://example.com/callback"
          callback_info={{
            description: "Test Payment",
            fullname: "John Doe",
            email: "[email protected]",
            phone: "12345678"
          }}
          mode="LIVE"
          currency="XOF"
          buttonClass="bg-primary-blue hover:bg-blue-900 text-white font-bold py-3 px-4 rounded-md transition-colors duration-300 flex items-center justify-center"
          callback={(response) => {
            console.log(response);
          }}
        />
      </FeexPayProvider>
    </div>
  );
}

export default App;

🛠 Props du composant FeexPayButton

| Prop | Type | Requis | Description | | | -------------------- | ---------- | -------- | -------------------------------------------- | ---------------------- | | amount | number | ✅ | Montant à payer | | | description | string | ✅ | Description du paiement Ne pas mettre de caractères spéciaux | | | id | string | ✅ | ID du id fourni par FeexPay | | | token | string | ✅ | Token API d'authentification | | | customId | string | ✅ | ID personnalisé de la transaction | | | callback_url | string | ✅ | URL de redirection post-paiement | | | callback_info | object | ✅ | Infos utilisateur (nom, email, téléphone...) | | | mode | `"LIVE" | "SANDBOX"` | ✅ | Mode de fonctionnement | | currency | string | ❌ | Devise (XOF, USD, etc.) | | | buttonClass | string | ❌ | Classe CSS personnalisée pour le bouton | | | buttonText | string | ❌ | Texte personnalisé du bouton | | | fields_to_hide | string[] | ❌ | Champs à masquer ("email", "name") | | | callback | function | ❌ | Callback JavaScript à la fin du paiement | | | error_callback_url | string | ❌ | URL de redirection en cas d'erreur | |

🔐 Sécurité

• Ne jamais exposer de tokens sensibles dans des environnements publics.
• Utilisez le mode SANDBOX pour vos intégrations de test.

🧰 Dépendances

• React 18 ou 19 compatible
• Tailwind CSS recommandé pour la personnalisation

🧠 Aide et Support

En cas de besoin ou d'intégration personnalisée, contactez l'équipe FeexPay ou ouvrez une issue sur GitHub.

© FeexPay - 2025