FedaPay : La solution de paiement tout-en-un pour vos projets web au Bénin et en Afrique

Aujourd'hui, on va parler d'un sujet crucial pour beaucoup de nos applications : les paiements en ligne. Plus spécifiquement, on va plonger dans l'univers de FedaPay, une solution béninoise qui simplifie énormément l'acceptation des paiements mobiles et par carte bancaire.

Que vous soyez un freelance qui a besoin de facturer un client ou une startup qui lance son e-commerce, FedaPay est une option super intéressante. On va voir ensemble ce que c'est, pourquoi c'est cool, et surtout, comment l'intégrer dans nos projets préférés : Laravel et React/Next.js.

C'est quoi FedaPay au juste ?

Pour faire simple, FedaPay est une plateforme qui agit comme un pont entre votre site web ou application et les différents services de paiement (MTN, Moov, Visa, Mastercard, etc.). Au lieu de devoir te connecter à chaque service un par un (un vrai casse-tête !), FedaPay te donne un point d'entrée unique.

Les avantages sont clairs :

Simplicité : Une seule intégration pour accepter plein de moyens de paiement.

Documentation claire : Leur documentation pour les développeurs est plutôt bien faite.

Sécurité : Ils gèrent toute la partie sensible des transactions pour toi.

Adapté au marché local : Parfait pour les clients au Bénin et dans la sous-région.

Intégration dans un projet Laravel

Pour notre backend en Laravel, FedaPay met à notre disposition un package PHP qui rend les choses super simples.

Étape 1 : Installation du package

Comme d'habitude avec Laravel, on commence par installer le package via Composer. Ouvre ton terminal à la racine de ton projet et lance la commande :

composer require fedapay/fedapay-php

Étape 2 : Configuration des clés d'API

Pour que ton application puisse parler à FedaPay, il te faut des clés d'API. Tu les trouveras dans ton tableau de bord FedaPay (il y a un mode "test" pour faire tes essais sans argent réel, c'est parfait pour le développement).

Le mieux, c'est de mettre ces clés dans ton fichier .env. C'est plus sécurisé.

FEDAPAY_SECRET_KEY="sk_test_..."
FEDAPAY_PUBLIC_KEY="pk_test_..."

Ensuite, pour initialiser FedaPay au démarrage de ton application, tu peux ajouter ça dans le boot() de ton AppServiceProvider (app/Providers/AppServiceProvider.php) :

use FedaPay\FedaPay;

public function boot()
{
    FedaPay::setApiKey(config('services.fedapay.secret_key'));
    FedaPay::setEnvironment(config('app.env') === 'production' ? 'live' : 'sandbox'); // ou 'sandbox' / 'live'
}

N'oublie pas de référencer tes clés du .env dans config/services.php !

Étape 3 : Créer une transaction

Maintenant, le moment fun : la création d'une transaction. Imaginons que tu as un contrôleur qui gère une commande.

use Illuminate\Http\Request;
use FedaPay\Transaction;

class OrderController extends Controller
{
    public function createPayment(Request $request)
    {
        try {
            $transaction = Transaction::create([
                "description" => "Achat de mon super produit",
                "amount" => 2000, // Le montant en CFA
                "currency" => ["iso" => "XOF"],
                "callback_url" => route('payment.callback'), // L'URL où FedaPay te redirigera après
                "customer" => [
                    "firstname" => "John",
                    "lastname" => "Doe",
                    "email" => "john.doe@example.com",
                    "phone_number" => [
                        "number" => "90000000",
                        "country" => "bj"
                    ]
                ]
            ]);

            // Générer le lien de paiement
            $token = $transaction->generateToken();

            // Rediriger l'utilisateur vers la page de paiement FedaPay
            return redirect($token->url);

        } catch(\Exception $e) {
            return back()->with('error', 'Une erreur est survenue: ' . $e->getMessage());
        }
    }

    public function handleCallback(Request $request)
    {
        $transactionId = $request->input('id');
        // Tu peux ici vérifier le statut de la transaction et mettre à jour ta base de données
        // ...
        return view('payment-success');
    }
}

Intégration dans un projet React ou Next.js

Côté frontend, l'approche est un peu différente. On va utiliser Feda Checkout, leur module JavaScript qui affiche une jolie pop-up de paiement directement sur notre site, sans redirection. C'est plus propre pour l'expérience utilisateur !

Étape 1 : Ajouter le script Feda Checkout

Le plus simple est d'ajouter le script FedaPay dans le <head> de ton application. Pour un projet Next.js, tu peux utiliser le composant Script dans ton _app.js ou _document.js.

// Dans pages/_document.js (pour Next.js)
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script src="https://cdn.fedapay.com/checkout.js?v=1.1.7"></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Étape 2 : Créer le bouton de paiement

Maintenant, créons un composant pour notre bouton de paiement. Quand on clique dessus, ça ouvrira la pop-up FedaPay.

// components/FedaPayButton.js
import React from 'react';

const FedaPayButton = () => {
  const handlePayment = () => {
    FedaPay.init('.pay-btn', { // '.pay-btn' est le sélecteur de ton bouton
      public_key: 'pk_test_...', // Ta clé publique ici
      transaction: {
        amount: 500,
        description: 'Paiement pour mon service'
      },
      customer: {
        email: 'test@example.com',
        lastname: 'Koulo',
        firstname: 'Steve'
      },
      onComplete(resp) {
        // Cette fonction est appelée quand le paiement est terminé
        console.log(resp.reason, resp.status);
        if (resp.status === 'approved') {
          // Le paiement a réussi !
          // Ici, tu peux appeler ton backend pour vérifier et enregistrer la commande.
          alert('Transaction réussie !');
        } else {
          alert('La transaction a échoué.');
        }
      }
    });
  };

  return (
    <button className="pay-btn" onClick={handlePayment}>
      Payer 500 FCFA
    </button>
  );
};

export default FedaPayButton;

Explication du code :

On utilise la fonction FedaPay.init() qui est maintenant disponible globalement grâce au script qu'on a ajouté.

On lui passe la public_key (la clé secrète ne doit JAMAIS être dans le frontend !).

On définit les détails de la transaction et du client.

La fonction onComplete est le plus important : c'est le callback. Elle se déclenche après la tentative de paiement et te donne le statut. C'est ici que tu dois logiquement vérifier auprès de ton backend que tout s'est bien passé avant de valider la commande.