LatePoint Addon – Payments Flutterwave

Integración de Flutterwave en LatePoint: Una Guía Completa

Integrar un sistema de pago puede ser un desafío, pero con Flutterwave y LatePoint, puedes facilitar la aceptación de pagos en tu plataforma de reservas. En este artículo, te guiaré a través de los pasos necesarios para configurar el complemento de pagos de Flutterwave en LatePoint, asegurando una integración fluida y eficiente.

Configuración Inicial del Complemento

Para comenzar, lo primero que necesitas hacer es descargar el complemento base desde GitHub. Una vez que lo tengas en tu computadora, descomprímelo y renombra la carpeta a latepoint-payments-flutterwave. Es fundamental que, una vez renombrada la carpeta, se cambien todas las referencias de -addon-starter a -payments-flutterwave en los archivos correspondientes.

Abre el archivo principal latepoint-payments-flutterwave.php y modifica todos los nombres de variables y cadenas que correspondan al complemento original, asegurando que se adapten al nuevo nombre de plugin.

Implementación de Pagos

La integración del sistema de pago de Flutterwave en LatePoint se realizará a través de un “callback en línea”. Esto significa que cuando un cliente intente realizar un pago, se abrirá un modal de pago de Flutterwave utilizando JavaScript. Dependiendo del resultado (éxito o error), se llamará a una función de JavaScript que permitirá manejar la respuesta del pago.

Para que esto funcione, es imprescindible contar con las claves API pública y secreta de Flutterwave. Para generarlas, el propietario del negocio debe acceder a la configuración de Flutterwave y crear las claves necesarias. Una vez obtenidas, necesitamos un lugar en la configuración de LatePoint donde se puedan almacenar estas claves.

Aquí es donde registramos Flutterwave como un nuevo método de pago en la página de configuraciones de LatePoint. El código para esto se verá algo así:

“`php
class LatePointPaymentsFlutterwave {
public $version = ‘1.0.0’;
public $db_version = ‘1.0.0’;
public $addon_name = ‘latepoint-payments-flutterwave’;
public $processor_code = ‘flutterwave’;

public function init_hooks() {
    // Registrar flutterwave como un procesador de pagos
    add_filter('latepoint_payment_processors', [$this, 'register_payment_processor'], 10, 2);
    // Registrar métodos de pago disponibles para flutterwave
    add_filter('latepoint_all_payment_methods', [$this, 'register_payment_methods']);
    // Añadir métodos de pago a la lista de métodos habilitados en el frontend
    add_filter('latepoint_enabled_payment_methods', [$this, 'register_enabled_payment_methods']);
}

}
“`

En este fragmento de código, hemos establecido cómo registrar nuestro nuevo procesador de pagos y sus métodos asociados.

Registro de Métodos de Pago

Es necesario crear funciones que definan los métodos de pago que Flutterwave ofrecerá. A continuación, se registra el método inline_checkout para nuestro procesador:

php
public function get_supported_payment_methods() {
return ['inline_checkout' => [
'name' => __('Inline Checkout', 'latepoint-payments-flutterwave'),
'label' => __('Inline Checkout', 'latepoint-payments-flutterwave'),
'image_url' => LATEPOINT_IMAGES_URL . 'payment_cards.png',
'code' => 'inline_checkout',
'time_type' => 'now'
]];
}

Aquí, indicamos que el método de pago permitirá realizar los cobros de forma inmediata en el momento de la reserva.

Configuración del Formulario de API Keys

Ahora que hemos registrado nuestro método de pago, es tiempo de crear un formulario que recogerá las claves API y otros ajustes necesarios de parte del propietario del negocio. Este formulario incluirá campos para la clave pública, clave secreta, código de país, código de moneda y un logo.

Utilizamos las funciones de ayuda de formularios de LatePoint para construir los campos requeridos. Por ejemplo:

php
public function add_settings_fields($processor_code) {
if ($processor_code != $this->processor_code) return false;
?>
<h3><?php _e('API Keys', 'latepoint-payments-flutterwave'); ?></h3>
<?php echo OsFormHelper::text_field('settings[flutterwave_publishable_key]', __('Public Key', 'latepoint-payments-flutterwave'), OsSettingsHelper::get_settings_value('flutterwave_publishable_key')); ?>
<?php echo OsFormHelper::password_field('settings[flutterwave_secret_key]', __('Secret Key', 'latepoint-payments-flutterwave'), OsSettingsHelper::get_settings_value('flutterwave_secret_key')); ?>
<!-- Otros campos para country, currency y logo -->
<?php
}

El uso de OsFormHelper simplifica la creación de campos de formulario para capturar los datos del usuario de manera eficiente.

Encriptación de Datos Sensibles

Es crucial que ciertos campos sensibles, como la clave secreta, sean encriptados al almacenarse en la base de datos de LatePoint. Esto se logra usando el hook latepoint_encrypted_settings para añadir este campo a la lista de configuraciones que deben ser encriptadas.

“`php
public function init_hooks() {
add_filter(‘latepoint_encrypted_settings’, [$this, ‘add_encrypted_settings’]);
}

public function add_encrypted_settings($encrypted_settings) {
$encrypted_settings[] = ‘flutterwave_secret_key’;
return $encrypted_settings;
}
“`

Esto garantizará que cualquier información sensible esté protegida.

Pasando Variables al Frontend

Para que el formulario de reservas pueda utilizar las configuraciones recolectadas, necesitamos pasar dichas variables al frontend utilizando el objeto latepoint_helper. Esto se realiza a través del filtro latepoint_localized_vars_front.

php
public function localized_vars_for_front($localized_vars) {
if (OsPaymentsHelper::is_payment_processor_enabled($this->processor_code)) {
$localized_vars['is_flutterwave_active'] = true;
$localized_vars['flutterwave_key'] = OsSettingsHelper::get_settings_value('flutterwave_publishable_key', '');
$localized_vars['flutterwave_payment_options_route'] = OsRouterHelper::build_route_name('payments_flutterwave', 'get_payment_options');
} else {
$localized_vars['is_flutterwave_active'] = false;
}
return $localized_vars;
}

Este código permitirá que el frontend tenga acceso a las configuraciones necesarias para inicializar el proceso de pago.

Cargando Scripts y Estilos

Las bibliotecas de JavaScript y CSS deben ser cargadas adecuadamente para que todo funcione sin problemas. Utilizaremos el método latepoint_wp_enqueue_scripts para asegurarnos de que nuestros archivos estén disponibles en el frontend.

php
public function load_front_scripts_and_styles() {
wp_enqueue_style('latepoint-payments-flutterwave-front', $this->public_stylesheets() . 'latepoint-payments-flutterwave-front.css', false, $this->version);
wp_enqueue_script('flutterwave-checkout', 'https://checkout.flutterwave.com/v3.js', false, null);
wp_enqueue_script('latepoint-payments-flutterwave-front', $this->public_javascripts() . 'latepoint-payments-flutterwave-front.js', array('jquery', 'flutterwave-checkout', 'latepoint-main-front'), $this->version);
}

Aquí enlazamos la biblioteca de Flutterwave y nuestro propio archivo JavaScript donde manejaríamos la lógica de los eventos de pago.

Lógica de Procesamiento de Pagos

La lógica para procesar los pagos se implementa en un controlador dentro del directorio del complemento. Al recibir una solicitud de pago, gestionamos la creación de la intención de reserva y la validación del pago.

Aquí está el método del controlador que genera las opciones de pago que serán necesarias al interactuar con Flutterwave:

php
public function get_payment_options() {
OsStepsHelper::set_booking_object($this->params['booking']);
$customer = OsAuthHelper::get_logged_in_customer();
$amount = OsStepsHelper::$booking_object->specs_calculate_price_to_charge();
try {
if ($amount > 0) {
$booking_intent = OsBookingIntentHelper::create_or_update_booking_intent($this->params['booking'], $this->params['restrictions'], ['payment_method' => $this->params['booking']['payment_method']], '');
$options = [
"public_key" => OsSettingsHelper::get_settings_value('flutterwave_publishable_key'),
"tx_ref" => $booking_intent->intent_key,
"amount" => $amount,
"currency" => OsSettingsHelper::get_settings_value('flutterwave_currency_iso_code', 'NGN'),
"country" => OsSettingsHelper::get_settings_value('flutterwave_country_code', 'NG'),
"customer" => [
"email" => $customer->email,
"phone_number" => $customer->phone,
"name" => $customer->full_name
],
"customizations" => [
"name" => OsSettingsHelper::get_settings_value('flutterwave_company_name', 'Company'),
"description" => $booking->service->name,
"logo" => OsImageHelper::get_image_url_by_id(OsSettingsHelper::get_settings_value('flutterwave_logo_image_id', false))
]
];
$this->send_json(['status' => LATEPOINT_STATUS_SUCCESS, 'options' => $options, 'amount' => $amount, 'booking_intent_key' => $booking_intent->intent_key]);
} else {
$this->send_json(['status' => LATEPOINT_STATUS_SUCCESS, 'message' => __('Nothing to pay', 'latepoint-payments-flutterwave'), 'amount' => $amount]);
}
} catch(Exception $e) {
error_log($e->getMessage());
$this->send_json(['status' => LATEPOINT_STATUS_ERROR, 'message' => $e->getMessage()]);
}
}

Este método maneja la conversación con Flutterwave y proporciona la respuesta adecuada al frontend para la visualización.

Verificación y Procesamiento Final del Pago

La etapa final en el flujo de trabajo es verificar el estado de la transacción en el backend y registrar el resultado adecuado. Usamos la función latepoint_process_payment_for_booking para realizar esta validación.

“`php
public function process_payment($result, $booking, $customer) {
if (OsPaymentsHelper::is_payment_processor_enabled($this->processor_code)) {
switch ($booking->payment_method) {
case ‘inline_checkout’:
if ($booking->payment_token) {
$remote = wp_remote_get(“https://api.flutterwave.com/v3/transactions/” . $booking->payment_token . “/verify”, [
‘timeout’ => 10,
‘headers’ => [
‘Accept’ => ‘application/json’,
‘Authorization’ => ‘Bearer ‘ . self::get_secret_key()
]
]);

                if (!is_wp_error($remote) && isset($remote['response']['code']) && $remote['response']['code'] === 200 && !empty($remote['body'])) {
                    $response_body = json_decode($remote['body']);
                    if ($response_body->status === 'success' && $response_body->data->status === 'successful') {
                        $result['status'] = LATEPOINT_STATUS_SUCCESS;
                        $result['charge_id'] = $response_body->data->id;
                        $result['processor'] = $this->processor_code;
                        $result['funds_status'] = LATEPOINT_TRANSACTION_FUNDS_STATUS_CAPTURED;
                    } else {
                        $result['status'] = LATEPOINT_STATUS_ERROR;
                        $result['message'] = __('Payment Error', 'latepoint-payments-flutterwave');
                    }
                } else {
                    $result['status'] = LATEPOINT_STATUS_ERROR;
                    $result['message'] = __('Connection error', 'latepoint-payments-flutterwave');
                }
            } else {
                $result['status'] = LATEPOINT_STATUS_ERROR;
                $result['message'] = __('Payment Error', 'latepoint-payments-flutterwave');
            }
            break;
    }
}
return $result;

}
“`

Este bloque se encarga de validar el token del pago y de gestionar los estados según la respuesta recibida de Flutterwave.

Conclusión

Integrar el procesador de pagos Flutterwave con LatePoint no solo es un proceso técnico, sino que también abre un abanico de posibilidades para mejorar la experiencia del cliente. Siguiendo los pasos descritos, podrás ofrecer a tus usuarios un método de pago efectivo y seguro, facilitando así la gestión de reservas y pagos online.

La combinación de Flutterwave y LatePoint te permitirá no solo gestionar las reservas, sino también transformarlas en una experiencia más profesional para tus clientes. Así que adelante, ¡da el siguiente paso y pon en práctica esta integración!