Complemento de integración de Flutterwave

Estructura del archivo del complemento

csharpCopiarEditarventana emergente de pago de flutterwave/ ├── ventana emergente de pago de flutterwave.php ├── admin/ │ └── configuración-página.php ├── incluye/ │ └── init.php ├── activos/ │ ├── js/ │ │ └── popup.js │ └── css/ │ └── popup.css

📜 Archivo del complemento principal: ventana emergente de pago de flutterwave.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="/es/admin.php/?page=flutterwave_popup_settings">&#039; . __(&#039;Ajustes&#039;) . &#039;</a>&#039;; array_unshift($links, $settings_link); devolver $links; });

🔧Configuración del backend: admin/página-de-configuración.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>Configuración de la ventana emergente de pago de Flutterwave</h1>
        <form method="post" action="">
            <table class="form-table">
                <tr><th>Clave pública</th><td><input type="text" name="flutterwave_public_key" value="<?= esc_attr(get_option('flutterwave_public_key')) ?>" size="50"/></td></tr>
                <tr><th>Clave secreta</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 redirección después del pago</th><td><input type="url" name="flutterwave_redirect_url" value="<?= esc_attr(get_option('flutterwave_redirect_url')) ?>" size="50"/></td></tr>
                <tr><th>Métodos de pago habilitados</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="Guardar configuración"/>
        <input type="hidden" name="trp-form-language" value="es"/></form>
    </div>
<?php
}

Integración con WooCommerce + Scripts: incluye/init.php

phpCopyEditget_option('flutterwave_public_key'), 'redirectURL' => get_option('flutterwave_redirect_url'), 'enabledMethods' => get_option('flutterwave_enabled_methods', []) ]); }); // Código corto para mostrar el disparador de la ventana emergente de pago add_shortcode('flutterwave_payment_button', function () { return '  '; });

💳 Integración JS: activos/js/popup.js

javascriptCopiarEditarjQuery(document).ready(function ($) { $('#flutterwave-pay-btn').on('click', function () { FlutterwaveCheckout({ clave_pública: flutterwavePopupData.publicKey, tx_ref: "TX-" + Date.now(), importe: 100, moneda: "USD", opciones_de_pago: flutterwavePopupData.enabledMethods.join(','), cliente: { correo electrónico: "usuario@ejemplo.com", nombre: "John Doe", }, devolución de llamada: function (datos) { if (datos.status === "exitoso") { window.location.href = flutterwavePopupData.redirectURL; } else { alert("El pago falló o fue cancelado."); } }, onclose: function () { console.log("Modal cerrado"); } }); }); });

🛒 Opcional: Fragmento de integración de WooCommerce (si es necesario)

añadir incluye/init.php Para crear una pasarela de pago WooCommerce:

phpCopyEditadd_filter('woocommerce_payment_gateways', function(métodos$) { métodos$[] = 'WC_Gateway_Flutterwave_Popup'; return métodos$; }); add_action('plugins_loaded', function() { clase WC_Gateway_Flutterwave_Popup extiende WC_Payment_Gateway { función pública __construct() { $this->id = 'flutterwave_popup'; $this->method_title = 'Ventana emergente de Flutterwave'; $this->title = 'Pago de Flutterwave (ventana emergente)'; $this->has_fields = false; $this->init_settings(); $this->enabled = $this->get_option('enabled'); } función pública proceso_pago($order_id) { devolver ['resultado' => 'éxito', 'redirección' => wc_get_checkout_url()]; } } });

🌟 ¿Por qué utilizar el complemento emergente de pago Flutterwave para WordPress y WooCommerce?

El Plugin emergente de pago de Flutterwave Es una solución de integración de pagos ligera, flexible y fácil de usar para desarrolladores, ideal para sitios web de WordPress y WooCommerce. Diseñado para agilizar el proceso de pago, este plugin ofrece una experiencia fluida. pagos en el sitio usando un ventana emergente adaptable—sin recargas de páginas ni redirecciones.

🔑 Beneficios clave

1. Experiencia de pago fluida en la página

A diferencia de las pasarelas tradicionales que redirigen a los usuarios a páginas externas, este complemento utiliza el modal emergente seguro de Flutterwave para manejar las transacciones directamente en su sitio, lo que reduce el abandono del carrito y aumenta las conversiones.

2. Admite múltiples métodos de pago

De fábrica admite:

  • 💳 Pagos con tarjeta (Visa, Mastercard, etc.)
  • 🏦 Transferencias bancarias
  • 🍏 Apple Pay
  • 🤖 Google Pay

Puede activar o desactivar estas opciones en la configuración del complemento con solo un clic.

3. Fácil integración de claves API

Desde el panel de administración de WordPress, puedes:

  • Establezca su Claves API públicas y secretas de Flutterwave
  • Definir una URL de redireccionamiento personalizada después del pago exitoso
  • Elija qué opciones de pago están disponibles

4. Compatibilidad con WooCommerce

Si WooCommerce está activo, el complemento:

  • Se registra como método de pago en el momento del pago.
  • Utiliza el flujo de WooCommerce para procesar y actualizar el estado de los pedidos.
  • Le permite controlar los pagos directamente desde la configuración de WooCommerce

5. Código corto personalizable

Puedes colocar un botón de pago en cualquier lugar de tu sitio usando un código corto simple:

phpCopyEditbotón de pago de flutterwave

Esto genera un botón "Pagar ahora" que inicia la ventana emergente para pagos directos, ideal para páginas de destino, ofertas de productos o formularios de pago personalizados.

6. Totalmente responsivo y ligero

Con un mínimo de CSS y JS, el complemento garantiza una carga rápida y capacidad de respuesta móvil, brindando una experiencia fluida en todos los dispositivos.

7. Creado pensando en los desarrolladores

Este complemento sigue los estándares de codificación de WordPress, es modular y se puede ampliar fácilmente para flujos de trabajo personalizados o ganchos adicionales.

🔧 Metadatos del complemento

💡 Casos de uso ideales

  • Autónomos o empresas que aceptan donaciones o pagos personalizados.
  • Tiendas WooCommerce que desean una pasarela de pago rápida basada en ventanas emergentes.
  • Desarrolladores que crean flujos de pago personalizados utilizando Flutterwave.
  • Propietarios de sitios que buscan una alternativa no intrusiva a las redirecciones de página completa.