Flutterwave Integration Plugin

📁 Plugin File Structure

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

📜 Main Plugin File: 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="admin.php?page=flutterwave_popup_settings">' . __('Settings') . '</a>';
    array_unshift($links, $settings_link);
    return $links;
});

🔧 Backend Settings: 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>Flutterwave Payment Popup Settings</h1>
        <form method="post">
            <table class="form-table">
                <tr><th>Public Key</th><td><input type="text" name="flutterwave_public_key" value="<?= esc_attr(get_option('flutterwave_public_key')) ?>" size="50"/></td></tr>
                <tr><th>Secret Key</th><td><input type="text" name="flutterwave_secret_key" value="<?= esc_attr(get_option('flutterwave_secret_key')) ?>" size="50"/></td></tr>
                <tr><th>Redirect URL After Payment</th><td><input type="url" name="flutterwave_redirect_url" value="<?= esc_attr(get_option('flutterwave_redirect_url')) ?>" size="50"/></td></tr>
                <tr><th>Enabled Payment Methods</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="Save Settings"/>
        </form>
    </div>
<?php
}

📦 WooCommerce Integration + Scripts: includes/init.php

phpCopyEdit<?php
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('flutterwave-popup-style', FLUTTERWAVE_POPUP_URL . 'assets/css/popup.css');
    wp_enqueue_script('flutterwave-popup-script', FLUTTERWAVE_POPUP_URL . 'assets/js/popup.js', ['jquery'], null, true);
    wp_localize_script('flutterwave-popup-script', 'flutterwavePopupData', [
        'publicKey' => get_option('flutterwave_public_key'),
        'redirectURL' => get_option('flutterwave_redirect_url'),
        'enabledMethods' => get_option('flutterwave_enabled_methods', [])
    ]);
});

// Shortcode to show payment popup trigger
add_shortcode('flutterwave_payment_button', function () {
    return '<button id="flutterwave-pay-btn">Pay Now</button>';
});

💳 JS Integration: assets/js/popup.js

javascriptCopyEditjQuery(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("Payment failed or was cancelled.");
                }
            },
            onclose: function () {
                console.log("Modal closed");
            }
        });
    });
});

🛒 Optional: WooCommerce Integration Snippet (if needed)

Add to includes/init.php to create a WooCommerce payment gateway:

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 = 'Flutterwave Payment (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()];
        }
    }
});

🌟 Why Use the Flutterwave Payment Popup Plugin for WordPress & WooCommerce?

The Flutterwave Payment Popup Plugin is a lightweight, flexible, and developer-friendly payment integration solution for WordPress and WooCommerce websites. Built to streamline the checkout process, this plugin offers seamless in-site payments using a responsive popup—no page reloads or redirections.

🔑 Key Benefits

1. In-Page, Seamless Payment Experience

Unlike traditional gateways that redirect users to external pages, this plugin uses Flutterwave’s secure popup modal to handle transactions right on your site—reducing cart abandonment and boosting conversions.

2. Supports Multiple Payment Methods

Out of the box, it supports:

  • 💳 Card Payments (Visa, Mastercard, etc.)
  • 🏦 Bank Transfers
  • 🍏 Apple Pay
  • 🤖 Google Pay

You can toggle these options on or off in the plugin settings with just a click.

3. Easy API Key Integration

From the WordPress admin panel, you can:

  • Set your Flutterwave Public and Secret API keys
  • Define a custom redirect URL after successful payment
  • Choose which payment options are available

4. WooCommerce Compatibility

If WooCommerce is active, the plugin:

  • Registers as a payment method at checkout
  • Uses the WooCommerce flow for processing and order status updates
  • Allows you to control payments directly from WooCommerce settings

5. Customizable Shortcode

You can place a payment button anywhere on your site using a simple shortcode:

phpCopyEdit[flutterwave_payment_button]

This renders a “Pay Now” button which launches the popup for direct payments—ideal for landing pages, product offers, or custom payment forms.

6. Fully Responsive & Lightweight

With minimal CSS and JS, the plugin ensures fast loading and mobile responsiveness, delivering a smooth experience on all devices.

7. Built with Developers in Mind

This plugin follows WordPress coding standards, is modular, and can be easily extended for custom workflows or additional hooks.

🔧 Plugin Metadata

💡 Ideal Use Cases

  • Freelancers or businesses accepting donations or custom payments.
  • WooCommerce stores that want a fast, popup-based payment gateway.
  • Developers building custom checkout flows using Flutterwave.
  • Site owners looking for a non-intrusive alternative to full-page redirects.