📁 Estrutura do arquivo de plugin
csharpCópiaEditarflutterwave-payment-popup/ ├── flutterwave-payment-popup.php ├── admin/ │ └── settings-page.php ├── includes/ │ └── init.php ├── assets/ │ ├── js/ │ │ └── popup.js │ └── css/ │ └── popup.css
📜 Arquivo principal do plugin: 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="/pt/admin.php/?page=flutterwave_popup_settings">' . __('Configurações') . '</a>'; array_unshift($links, $settings_link); retornar $links; });
🔧 Configurações de backend: admin/página-de-configurações.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>Configurações de pop-up de pagamento do Flutterwave</h1>
<form method="post" action="">
<table class="form-table">
<tr><th>Chave 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>Chave 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 redirecionamento após o pagamento</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 pagamento 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="Salvar configurações"/>
<input type="hidden" name="trp-form-language" value="pt"/></form>
</div>
<?php
}
📦 Integração com WooCommerce + Scripts: inclui/init.php
phpCopyEditget_option('flutterwave_public_key'), 'redirectURL' => get_option('flutterwave_redirect_url'), 'enabledMethods' => get_option('flutterwave_enabled_methods', []) ]); }); // Código de acesso para mostrar o gatilho pop-up de pagamento add_shortcode('flutterwave_payment_button', function () { return ' '; });
💳 Integração JS: ativos/js/popup.js
javascriptCopiarEditarjQuery(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("O pagamento falhou ou foi cancelado."); } }, onclose: function () { console.log("Modal fechado"); } }); }); });
🛒 Opcional: Snippet de integração do WooCommerce (se necessário)
adicionar à inclui/init.php para criar um gateway de pagamento WooCommerce:
phpCopyEditadd_filter('woocommerce_payment_gateways', função($methods) { $methods[] = 'WC_Gateway_Flutterwave_Popup'; retornar $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 = 'Pagamento Flutterwave (Popup)'; $this->has_fields = false; $this->init_settings(); $this->enabled = $this->get_option('enabled'); } public function process_payment($order_id) { return ['result' => 'sucesso', 'redirecionamento' => wc_get_checkout_url()]; } } });
🌟 Por que usar o plugin Flutterwave Payment Popup para WordPress e WooCommerce?
O Plugin de pop-up de pagamento Flutterwave é uma solução de integração de pagamento leve, flexível e amigável para desenvolvedores em sites WordPress e WooCommerce. Desenvolvido para otimizar o processo de checkout, este plugin oferece integração perfeita pagamentos no local usando um pop-up responsivo—sem recarregamentos ou redirecionamentos de página.
🔑 Principais benefícios
1. Experiência de pagamento integrada e integrada
Diferentemente dos gateways tradicionais que redirecionam os usuários para páginas externas, este plugin usa o modal pop-up seguro do Flutterwave para lidar com transações diretamente no seu site, reduzindo o abandono de carrinho e aumentando as conversões.
2. Suporta vários métodos de pagamento
Pronto para uso, ele suporta:
- 💳 Pagamentos com cartão (Visa, Mastercard, etc.)
- 🏦 Transferências bancárias
- 🍏 Apple Pay
- 🤖 Google Pay
Você pode ativar ou desativar essas opções nas configurações do plugin com apenas um clique.
3. Integração fácil de chaves de API
No painel de administração do WordPress, você pode:
- Defina o seu Chaves de API públicas e secretas do Flutterwave
- Defina um URL de redirecionamento personalizado após pagamento bem-sucedido
- Escolha quais opções de pagamento estão disponíveis
4. Compatibilidade com WooCommerce
Se o WooCommerce estiver ativo, o plugin:
- Registra-se como método de pagamento no checkout
- Utiliza o fluxo WooCommerce para processamento e atualizações de status de pedidos
- Permite controlar pagamentos diretamente nas configurações do WooCommerce
5. Código de acesso personalizável
Você pode colocar um botão de pagamento em qualquer lugar do seu site usando um código de acesso simples:
phpCopyEdit[botão_de_pagamento_flutterwave]
Isso cria um botão “Pagar agora” que abre o pop-up para pagamentos diretos, ideal para landing pages, ofertas de produtos ou formulários de pagamento personalizados.
6. Totalmente responsivo e leve
Com o mínimo de CSS e JS, o plugin garante carregamento rápido e capacidade de resposta em dispositivos móveis, proporcionando uma experiência tranquila em todos os dispositivos.
7. Construído com os desenvolvedores em mente
Este plugin segue os padrões de codificação do WordPress, é modular e pode ser facilmente estendido para fluxos de trabalho personalizados ou ganchos adicionais.
🔧 Metadados do plugin
- Nome do plugin: Pop-up de pagamento Flutterwave
- Autor: Frankline Y
- Versão: 1.0
- Documentação: https://joliechose.com/documentation/flutterwave-integration-plugin
💡 Casos de uso ideais
- Freelancers ou empresas que aceitam doações ou pagamentos personalizados.
- Lojas WooCommerce que desejam um gateway de pagamento rápido baseado em pop-up.
- Desenvolvedores criando fluxos de checkout personalizados usando Flutterwave.
- Proprietários de sites que procuram uma alternativa não intrusiva aos redirecionamentos de página inteira.