BiFlashPay SDK Javascript : Guide d'Intégration

Qu'est-ce que le SDK Javascript de BiFlashPay ?

Le SDK Javascript de BiFlashPay vous permet d'intégrer facilement les paiements Mobile Money dans votre application web. Ce SDK est conçu pour être intégré de manière fluide dans votre projet.

L'intégration du SDK BiFlashPay se fait en deux étapes principales :

  • L'intégration du SDK Javascript côté client pour lancer l'opération de paiement.
  • La vérification de la transaction côté serveur à l'aide du SDK serveur correspondant à votre technologie.

Création du compte et accès au SDK

Avant de commencer à utiliser le SDK, vous devez disposer d'un compte marchand valide chez BiFlashPay. Si ce n'est pas encore fait, vous pouvez créer un compte marchand directement sur notre plateforme. Une fois votre compte créé, vous recevrez les informations nécessaires pour intégrer le SDK.

Pour ajouter le SDK à votre application web, il vous suffit d'importer le script suivant avant la balise fermante "head" de votre page : 

<script src="https://cdn.biflashpay.me/bfp.js"></script>

Après avoir ajouté le script, vous pouvez utiliser les fonctionnalités du SDK de BiFlashPay pour gérer les paiements.

Configuration du token CSRF

Pour sécuriser vos transactions et prévenir les attaques CSRF (Cross-Site Request Forgery), vous devez inclure un token CSRF dans les méta-données de votre page. Ce token doit être placé dans la section <head> de votre page HTML.

Ajoutez le meta tag suivant dans la section head de votre page : 

<meta name="csrf-token" content="exemple_token">

Note : Le token CSRF devra être généré par votre application. Dans l'exemple ci-dessus, exemple_token est un exemple de syntaxe qui devra être remplacé par la méthode de génération de token appropriée selon votre framework ou technologie backend.

Ce token sera automatiquement utilisé par le SDK pour authentifier les requêtes effectuées vers nos serveurs.

Préparation du conteneur de paiement

Avant d’initier un paiement avec le SDK de BiFlashPay, il est important de préparer un espace dédié dans votre page web où le formulaire de paiement apparaîtra. Pour cela, créez une <div> avec l’identifiant #biflashpay_container. Cette approche permet de mieux contrôler l’apparition et le style de la fenêtre de paiement au sein de votre application.

Exemple : 

<div id="biflashpay-container"></div>

En utilisant cet identifiant, le SDK saura où injecter le contenu du popup de paiement, ce qui vous permettra d’adapter le design selon les besoins de votre site. Vous pouvez également personnaliser davantage ce conteneur en modifiant son style CSS pour une meilleure intégration visuelle.

Méthode via Javascript

Une fois le script importé, vous pouvez configurer et ouvrir la fenêtre de paiement directement depuis votre code Javascript en utilisant la balise biflashpay. Voici comment procéder : 

    <script>
        BiFlashPay.init({
            apiKey: "VOTRE_API_KEY",    // Votre clé API fournie par BiFlashPay
            mode: "mode",          // Mode sandbox ou live
            amount: "montant",          // Montant de la transaction
            currency: "devise",          // Devise de la transaction
            buttonText: "Payer maintenant",  // Texte affiché sur le bouton de paiement
            description: "Achat de produits",  // Description de la transaction
            email: "exemple@gmail.com",  // Email du client effectuant le paiement
            callback: "https://exemple.com/callback",  // URL de redirection après le paiement
            customData: {}              // Données personnalisées pour la transaction (optionnel)
        });
    </script>

Assurez-vous de remplacer les valeurs des attributs avec vos informations spécifiques :

  • apiKey : Votre clé API fournie par BiFlashPay.
  • mode : Le mode de la transaction (sandbox; live).
  • email : L'email du client.
  • customdata : Données personnalisées que vous souhaitez envoyer avec la transaction (ex: ID de commande, etc.).
  • amount : Montant de la transaction.
  • currency : Devise de la transaction.
  • callback : URL vers laquelle l'utilisateur sera redirigé après le paiement.
  • description : Description du produit ou service pour lequel le paiement est effectué.
  • buttonText : Texte du bouton de paiement (ex : "Payer 1000 XOF").

Vérification côté serveur

Afin de garantir la sécurité des transactions et éviter les fraudes, il est crucial de vérifier la transaction côté serveur. Après l'initiation du paiement via le SDK, vous devrez utiliser le SDK serveur associé pour valider l'opération.

Consultez la documentation sur le SDK serveur pour intégrer cette vérification dans votre système.

Sur cette page