Plugin d'intégration Flutterwave

📁 Structure du fichier du plugin

csharpCopierModifierflutterwave-payment-popup/ ├── flutterwave-payment-popup.php ├── admin/ │ └── settings-page.php ├── includes/ │ └── init.php ├── assets/ │ ├── js/ │ │ └── popup.js │ └── css/ │ └── popup.css

📜 Fichier du plugin principal : Flutterwave-payment-popup.php

phpCopyEdit<?php
/*
Plugin Name: Flutterwave Payment Popup
Description: Integrates Flutterwave payments with card, bank transfer, Apple Pay, and Google Pay using a responsive popup. Created by Frankline Y.
Version: 1.0
Author: Frankline Y
Author URI: https://joliechose.com
Plugin URI: https://joliechose.com/documentation/flutterwave-integration-plugin
*/

if (!defined('ABSPATH')) exit;

define('FLUTTERWAVE_POPUP_DIR', plugin_dir_path(__FILE__));
define('FLUTTERWAVE_POPUP_URL', plugin_dir_url(__FILE__));

// Include core plugin files
require_once FLUTTERWAVE_POPUP_DIR . 'includes/init.php';
require_once FLUTTERWAVE_POPUP_DIR . 'admin/settings-page.php';

// Add settings link on plugin page
add_filter('plugin_action_links_' . plugin_basename(__FILE__), function($links) {
    $settings_link = '<a href="/fr/admin.php/?page=flutterwave_popup_settings">&#039; . __(&#039;Paramètres&#039;) . &#039;</a>&#039;; array_unshift($links, $settings_link); return $links; });

🔧 Paramètres du backend : admin/settings-page.php

phpCopyEdit<?php
function flutterwave_popup_admin_menu() {
    add_menu_page(
        'Flutterwave Popup Settings',
        'Flutterwave Popup',
        'manage_options',
        'flutterwave_popup_settings',
        'flutterwave_popup_settings_page'
    );
}
add_action('admin_menu', 'flutterwave_popup_admin_menu');

function flutterwave_popup_settings_page() {
    if (isset($_POST['flutterwave_save_settings'])) {
        update_option('flutterwave_public_key', sanitize_text_field($_POST['flutterwave_public_key']));
        update_option('flutterwave_secret_key', sanitize_text_field($_POST['flutterwave_secret_key']));
        update_option('flutterwave_redirect_url', esc_url_raw($_POST['flutterwave_redirect_url']));
        update_option('flutterwave_enabled_methods', $_POST['flutterwave_enabled_methods'] ?? []);
        echo '<div class="updated"><p>Settings saved.</p></div>';
    }

    $methods = ['card' => 'Card', 'bank_transfer' => 'Bank Transfer', 'apple_pay' => 'Apple Pay', 'google_pay' => 'Google Pay'];
    ?>
    <div class="wrap">
        <h1>Paramètres de la fenêtre contextuelle de paiement Flutterwave</h1>
        <form method="post" action="">
            <table class="form-table">
                <tr><th>Clé publique</th><td><input type="text" name="flutterwave_public_key" value="<?= esc_attr(get_option('flutterwave_public_key')) ?>" size="50"/></td></tr>
                <tr><th>Clé secrète</th><td><input type="text" name="flutterwave_secret_key" value="<?= esc_attr(get_option('flutterwave_secret_key')) ?>" size="50"/></td></tr>
                <tr><th>URL de redirection après paiement</th><td><input type="url" name="flutterwave_redirect_url" value="<?= esc_attr(get_option('flutterwave_redirect_url')) ?>" size="50"/></td></tr>
                <tr><th>Méthodes de paiement activées</th>
                    <td>
                        <?php
                        $enabled_methods = get_option('flutterwave_enabled_methods', []);
                        foreach ($methods as $key => $label) {
                            echo '<label><input type="checkbox" name="flutterwave_enabled_methods[]" value="' . $key . '" ' . checked(in_array($key, $enabled_methods), true, false) . '/> ' . $label . '</label><br>';
                        }
                        ?>
                    </td>
                </tr>
            </table>
            <input type="submit" name="flutterwave_save_settings" class="button-primary" value="Enregistrer les paramètres"/>
        <input type="hidden" name="trp-form-language" value="fr"/></form>
    </div>
<?php
}

📦 Intégration WooCommerce + Scripts : includes/init.php

phpCopyEditget_option('flutterwave_public_key'), 'redirectURL' => get_option('flutterwave_redirect_url'), 'enabledMethods' => get_option('flutterwave_enabled_methods', []) ]); }); // Shortcode pour afficher le déclencheur de popup de paiement add_shortcode('flutterwave_payment_button', function () { return '  '; });

💳 Intégration JS : assets/js/popup.js

javascriptCopierModifierjQuery(document).ready(function ($) { $('#flutterwave-pay-btn').on('click', function () { FlutterwaveCheckout({ public_key: flutterwavePopupData.publicKey, tx_ref: "TX-" + Date.now(), amount: 100, currency: "USD", payment_options: flutterwavePopupData.enabledMethods.join(','), customer: { email: "user@example.com", name: "John Doe", }, callback: function (data) { if (data.status === "successful") { window.location.href = flutterwavePopupData.redirectURL; } else { alert("Le paiement a échoué ou a été annulé."); } }, onclose: function () { console.log("Modal fermé"); } }); }); });

🛒 Facultatif : extrait d’intégration WooCommerce (si nécessaire)

Ajouter à includes/init.php pour créer une passerelle de paiement WooCommerce :

phpCopyEditadd_filter('woocommerce_payment_gateways', function($methods) { $methods[] = 'WC_Gateway_Flutterwave_Popup'; return $methods; }); add_action('plugins_loaded', function() { class WC_Gateway_Flutterwave_Popup extends WC_Payment_Gateway { public function __construct() { $this->id = 'flutterwave_popup'; $this->method_title = 'Flutterwave Popup'; $this->title = 'Paiement Flutterwave (Popup)'; $this->has_fields = false; $this->init_settings(); $this->enabled = $this->get_option('enabled'); } public function process_payment($order_id) { return ['result' => 'success', 'redirect' => wc_get_checkout_url()]; } } });

🌟 Pourquoi utiliser le plugin Flutterwave Payment Popup pour WordPress et WooCommerce ?

Le Plugin de paiement contextuel Flutterwave est une solution d'intégration de paiement légère, flexible et conviviale pour les développeurs, destinée aux sites WordPress et WooCommerce. Conçue pour simplifier le processus de paiement, cette extension offre une expérience fluide. paiements sur place en utilisant un fenêtre contextuelle réactive—pas de rechargement de page ni de redirection.

🔑 Principaux avantages

1. Expérience de paiement fluide et intégrée à la page

Contrairement aux passerelles traditionnelles qui redirigent les utilisateurs vers des pages externes, ce plugin utilise la fenêtre contextuelle sécurisée de Flutterwave pour gérer les transactions directement sur votre site, réduisant ainsi l'abandon du panier et augmentant les conversions.

2. Prend en charge plusieurs méthodes de paiement

Prêt à l'emploi, il prend en charge :

  • 💳 Paiements par carte (Visa, Mastercard, etc.)
  • 🏦 Virements bancaires
  • 🍏 Apple Pay
  • 🤖 Google Pay

Vous pouvez activer ou désactiver ces options dans les paramètres du plugin en un seul clic.

3. Intégration facile des clés API

Depuis le panneau d'administration de WordPress, vous pouvez :

  • Définissez votre Clés API publiques et secrètes de Flutterwave
  • Définir un URL de redirection personnalisée après un paiement réussi
  • Choisissez les options de paiement disponibles

4. Compatibilité WooCommerce

Si WooCommerce est actif, le plugin :

  • S'enregistre comme moyen de paiement lors du paiement
  • Utilise le flux WooCommerce pour le traitement et les mises à jour du statut des commandes
  • Vous permet de contrôler les paiements directement depuis les paramètres WooCommerce

5. Shortcode personnalisable

Vous pouvez placer un bouton de paiement n'importe où sur votre site à l'aide d'un simple shortcode :

phpCopyEdit[flutterwave_payment_button]

Cela génère un bouton « Payer maintenant » qui lance la fenêtre contextuelle pour les paiements directs, idéal pour les pages de destination, les offres de produits ou les formulaires de paiement personnalisés.

6. Entièrement réactif et léger

Avec un minimum de CSS et de JS, le plugin assure un chargement rapide et une réactivité mobile, offrant une expérience fluide sur tous les appareils.

7. Conçu pour les développeurs

Ce plugin suit les normes de codage WordPress, est modulaire et peut être facilement étendu pour des flux de travail personnalisés ou des hooks supplémentaires.

🔧 Métadonnées du plugin

💡 Cas d'utilisation idéaux

  • Indépendants ou entreprises acceptant des dons ou des paiements personnalisés.
  • Boutiques WooCommerce qui souhaitent une passerelle de paiement rapide et contextuelle.
  • Développeurs créant des flux de paiement personnalisés à l'aide de Flutterwave.
  • Les propriétaires de sites recherchent une alternative non intrusive aux redirections pleine page.