📁 Plugin-Dateistruktur
csharpCopyEditflutterwave-payment-popup/ ├── flutterwave-payment-popup.php ├── admin/ │ └── settings-page.php ├── beinhaltet/ │ └── init.php ├── Vermögenswerte/ │ ├── js/ │ │ └── popup.js │ └── css/ │ └── popup.css
📜 Haupt-Plugin-Datei: 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="/de/admin.php/?page=flutterwave_popup_settings">' . __('Einstellungen') . '</a>'; array_unshift($links, $settings_link); return $links; });
🔧 Backend-Einstellungen: admin/einstellungen-seite.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-Zahlungs-Popup-Einstellungen</h1>
<form method="post" action="">
<table class="form-table">
<tr><th>Öffentlicher Schlüssel</th><td><input type="text" name="flutterwave_public_key" value="<?= esc_attr(get_option('flutterwave_public_key')) ?>" size="50"/></td></tr>
<tr><th>Geheimer Schlüssel</th><td><input type="text" name="flutterwave_secret_key" value="<?= esc_attr(get_option('flutterwave_secret_key')) ?>" size="50"/></td></tr>
<tr><th>Umleitungs-URL nach der Zahlung</th><td><input type="url" name="flutterwave_redirect_url" value="<?= esc_attr(get_option('flutterwave_redirect_url')) ?>" size="50"/></td></tr>
<tr><th>Aktivierte Zahlungsmethoden</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="Einstellungen speichern"/>
<input type="hidden" name="trp-form-language" value="de"/></form>
</div>
<?php
}
📦 WooCommerce-Integration + Skripte: enthält/init.php
phpCopyEditget_option('flutterwave_public_key'), 'redirectURL' => get_option('flutterwave_redirect_url'), 'enabledMethods' => get_option('flutterwave_enabled_methods', []) ]); }); // Shortcode zum Anzeigen des Zahlungs-Popup-Triggers add_shortcode('flutterwave_payment_button', function () { return ' '; });
💳 JS-Integration: assets/js/popup.js
javascriptKopierenBearbeitenjQuery(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("Zahlung fehlgeschlagen oder wurde abgebrochen."); } }, onclose: function () { console.log("Modal geschlossen"); } }); }); });
🛒 Optional: WooCommerce Integration Snippet (falls erforderlich)
Hinzufügen zu enthält/init.php So erstellen Sie ein WooCommerce-Zahlungsgateway:
phpCopyEditadd_filter('woocommerce_payment_gateways', Funktion($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-Zahlung (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()]; } } });
🌟 Warum das Flutterwave Payment Popup-Plugin für WordPress und WooCommerce verwenden?
Der Flutterwave Zahlungs-Popup-Plugin ist eine leichte, flexible und entwicklerfreundliche Zahlungsintegrationslösung für WordPress- und WooCommerce-Websites. Dieses Plugin wurde entwickelt, um den Checkout-Prozess zu optimieren und bietet nahtlose Zahlungen vor Ort mit einem reaktionsschnelles Popup– kein Neuladen oder Weiterleiten der Seite.
🔑 Hauptvorteile
1. Nahtlose Zahlungserfahrung auf der Seite
Im Gegensatz zu herkömmlichen Gateways, die Benutzer auf externe Seiten umleiten, verwendet dieses Plugin das sichere Popup-Modal von Flutterwave, um Transaktionen direkt auf Ihrer Site abzuwickeln. Dadurch wird die Zahl der abgebrochenen Warenkörbe reduziert und die Konvertierungen gesteigert.
2. Unterstützt mehrere Zahlungsmethoden
Es unterstützt standardmäßig:
- 💳 Kartenzahlungen (Visa, Mastercard usw.)
- 🏦 Banküberweisungen
- 🍏 Apple Pay
- 🤖 Google Pay
Sie können diese Optionen in den Plugin-Einstellungen mit nur einem Klick ein- oder ausschalten.
3. Einfache API-Schlüsselintegration
Über das WordPress-Administrationsbereich können Sie:
- Stellen Sie Ihre Öffentliche und geheime API-Schlüssel von Flutterwave
- Definieren Sie eine benutzerdefinierte Weiterleitungs-URL nach erfolgreicher Zahlung
- Wählen Sie die verfügbaren Zahlungsoptionen
4. WooCommerce-Kompatibilität
Wenn WooCommerce aktiv ist, führt das Plugin Folgendes aus:
- Wird als Zahlungsmethode an der Kasse registriert
- Verwendet den WooCommerce-Flow zur Verarbeitung und Aktualisierung des Bestellstatus
- Ermöglicht Ihnen, Zahlungen direkt über die WooCommerce-Einstellungen zu steuern
5. Anpassbarer Shortcode
Mit einem einfachen Shortcode können Sie überall auf Ihrer Site eine Zahlungsschaltfläche platzieren:
phpCopyEdit[flutterwave_payment_button]
Dadurch wird eine Schaltfläche „Jetzt bezahlen“ erstellt, die das Popup für Direktzahlungen öffnet – ideal für Zielseiten, Produktangebote oder benutzerdefinierte Zahlungsformulare.
6. Vollständig reaktionsfähig und leicht
Mit minimalem CSS und JS sorgt das Plugin für schnelles Laden und mobile Reaktionsfähigkeit und bietet ein reibungsloses Erlebnis auf allen Geräten.
7. Für Entwickler entwickelt
Dieses Plugin folgt den WordPress-Codierungsstandards, ist modular und kann problemlos für benutzerdefinierte Workflows oder zusätzliche Hooks erweitert werden.
🔧 Plugin-Metadaten
- Plugin-Name: Flutterwave-Zahlungs-Popup
- Autor: Frankline Y
- Version: 1.0
- Dokumentation: https://joliechose.com/documentation/flutterwave-integration-plugin
💡 Ideale Anwendungsfälle
- Freiberufler oder Unternehmen, die Spenden oder Sonderzahlungen annehmen.
- WooCommerce-Shops, die ein schnelles, Popup-basiertes Zahlungsgateway wünschen.
- Entwickler erstellen benutzerdefinierte Checkout-Flows mit Flutterwave.
- Websitebesitzer, die nach einer nicht aufdringlichen Alternative zu ganzseitigen Weiterleitungen suchen.