Intégration du CheckoutJS de Fedapay dans un projet Frontend (React, Vue, VanillaJS, etc...)

how-to-implement-fedapay-JS.md

Intégration de FedaPay en JavaScript

1. Introduction

Ce guide vous explique comment intégrer un système de paiement avec FedaPay en JavaScript.

2. Pré-requis

Avant de commencer, assurez-vous d’avoir :

• Un compte FedaPay
• Votre clé publique FedaPay

3. Ajout du SDK FedaPay

Ajoutez ce script dans votre fichier HTML de base :

<!-- https://docs.fedapay.com/introduction/fr/checkoutjs-fr-->
<script src="https://cdn.fedapay.com/checkout.js?v=1.1.7"></script>

4. Création de la fonction de paiement

Ajouter cette fonction dans votre fichier JavaScript pour lancer le processus de paiement avec FedaPay :

const FedaPay = window["FedaPay"];
const FEDAPAY_PUBLIC_KEY = "YOUR_FEDAPAY_PUBLIC_KEY";
const ENVIRONMENT = "sandbox"; // "live" en production

/**
 * Lance le processus de paiement avec FedaPay.
 *
 * @param {Object} customer - Informations du client.
 * @param {string} customer.email - Email du client.
 * @param {string} customer.lastname - Nom de famille du client.
 * @param {string} customer.firstname - Prénom du client.
 * @param {string} customer.phone_number - Numéro de téléphone du client.
 * @param {number} amount - Montant de la transaction.
 * @param {string} description - Description de la transaction.
 * @param {Object|null} [metadata={}] - Métadonnées personnalisées.
 * @param {string} [currency="XOF"] - Devise de la transaction.
 * @param {string} [country="BJ"] - Code du pays du client.
 * @returns {Promise<Object>} - Transaction approuvée ou rejetée.
 */
export const launchFedapayCheckout = (customer, amount, description, metadata = {}, currency = "XOF", country = "BJ") => {
  return new Promise((resolve, reject) => {
    if (!FedaPay) {
      return reject("FedaPay SDK non chargé.");
    }

    if (!customer || !customer.email || !customer.phone_number) {
      return reject("Informations client incomplètes.");
    }

    if (!amount || amount <= 0) {
      return reject("Le montant doit être supérieur à 0.");
    }

    try {
      const widget = FedaPay.init({
        public_key: FEDAPAY_PUBLIC_KEY,
        environment: ENVIRONMENT,
        locale: "fr",
        transaction: {
          amount: Math.round(amount),
          description: description,
          custom_metadata: metadata,
        },
        customer: {
          email: customer.email,
          lastname: customer.lastname || "N/A",
          firstname: customer.firstname || "N/A",
          phone_number: {
            number: customer.phone_number,
            country: country,
          },
        },
        currency: currency,
        onComplete: ({ reason, transaction }) => {
          if (transaction.status === "approved") {
            resolve(transaction);
          } else {
            reject(reason || "Paiement non approuvé.");
          }
        },
      });

      widget.open();
    } catch (error) {
      reject("Erreur lors de l'initialisation de FedaPay : " + error.message);
    }
  });
};

5. Utilisation de la fonction de paiement

Utilisez la fonction launchFedapayCheckout pour lancer le processus de paiement avec FedaPay :

const customer = {
	email: "client@example.com", 
    lastname: "Doe", 
    firstname: "John", 
    phone_number: "97000000",
};

launchFedapayCheckout(customer, 5000, "Achat de produit A")
    .then((transaction) => {
		console.log("Paiement réussi :", transaction);
	})
    .catch((error) => {
		console.error("Échec du paiement :", error);
	});

6. Intégration avec un framework (React)

import React from "react";
import { launchFedapayCheckout } from "./fedapay";

const PayButton = () => {
  const handlePayment = async () => {
    const customer = {
      email: "client@example.com",
      lastname: "Doe",
      firstname: "John",
      phone_number: "97000000",
    };

    await launchFedapayCheckout(customer, 5000, "Achat de produit A")
      .then((transaction) => {
        console.log("Paiement réussi :", transaction);
      })
      .catch((error) => {
        console.error("Échec du paiement :", error);
      });
  };

  return <button onClick={handlePayment}>Payer 5000 XOF</button>;
};

export default PayButton;

8. Conclusion

Grâce à cette fonction, vous pouvez intégrer FedaPay dans votre projet JavaScript ou React. Suivez ces étapes pour garantir un processus de paiement fluide et sécurisé.

🔗 Référence : Documentation officielle FedaPay