LatePoint Addon – Payments Flutterwave

Integrando Flutterwave ao LatePoint com o Addon de Pagamentos

A integração do processador de pagamento Flutterwave ao LatePoint é um processo que envolve algumas etapas significativas, mas não é tão complicado quanto parece. O Flutterwave é amplamente reconhecido e utilizado na África, oferecendo soluções de pagamento que mantém o fluxo de receita para negócios. Neste guia, vamos explorar o passo a passo para implementar a funcionalidade ‘LatePoint Addon Payments Flutterwave’, que permitirá que os usuários façam pagamentos online de maneira rápida e fácil durante o processo de reserva.

Configurando o Addon

Para começar, o primeiro passo é obter o plugin básico que servirá como base para nossa integração. Você deve baixar o plugin latepoint-addon-starter do GitHub e descompactá-lo. Renomeie a pasta para latepoint-payments-flutterwave e substitua todas as instâncias de -addon-starter por -payments-flutterwave. Abra o arquivo principal, agora chamado latepoint-payments-flutterwave.php, e renomeie todas as variáveis e strings correspondentes.

Uma parte crucial desse processo é não esquecer de renomear o objeto principal do addon identificado como $LATEPOINT_ADDON_ADDON_STATER para a nova nomenclatura.

Implementando Pagamentos

Nós implementaremos o processamento de pagamento do Flutterwave utilizando o tipo de callback “inline”. Com isso, quando um cliente tenta realizar o pagamento de uma reserva, será exibido um modal de pagamento do Flutterwave através do JavaScript. Esse modal irá chamar uma função JavaScript de nossa própria autoria para lidar com a resposta, tanto em caso de sucesso quanto de erro.

Para que isso funcione, são necessários as chaves de API pública e secreta do Flutterwave, que o proprietário do negócio pode obter nas configurações da sua conta Flutterwave. Uma vez em mãos, precisamos capturar essas chaves nas configurações do LatePoint. Para isso, vamos registrar o Flutterwave como um novo método de pagamento na página de Configurações do LatePoint.

Registrando o Método de Pagamento

Ao registrar o processador, devemos criar uma classe para gerenciar isso:

“`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 processador de pagamento
    add_filter('latepoint_payment_processors', [$this, 'register_payment_processor'], 10, 2);
    // Registrar métodos de pagamento disponíveis
    add_filter('latepoint_all_payment_methods', [$this, 'register_payment_methods']);
    // Adicionar métodos de pagamento à lista de métodos habilitados na interface
    add_filter('latepoint_enabled_payment_methods', [$this, 'register_enabled_payment_methods']);
}

}
“`

Na função get_supported_payment_methods, vamos definir o método de pagamento:

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'
]
];
}

O atributo time_type definido como ‘now’ significa que o pagamento deve ser realizado no momento da reserva, ao contrário de um método “Pay Later” que utilizaria ‘later’.

Configurando o Formulário de Configurações

Agora que temos o método de pagamento registrado, precisamos criar um formulário que irá coletar as chaves de API e outras configurações do proprietário da empresa. O formulário deve capturar a chave pública, a chave secreta, o código do país, o código da moeda e um logotipo. A chave secreta deve ser armazenada de forma criptografada nas configurações do LatePoint.

Usaremos os “form helpers” do LatePoint para construir os campos:

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')); ?>
<h3><?php _e('Other Settings', 'latepoint-payments-flutterwave'); ?></h3>
<?php echo OsFormHelper::select_field('settings[flutterwave_country_code]', __('Country', 'latepoint-payments-flutterwave'), OsPaymentsFlutterwaveHelper::load_countries_list(), OsSettingsHelper::get_settings_value('flutterwave_country_code', 'NG')); ?>
<?php echo OsFormHelper::select_field('settings[flutterwave_currency_iso_code]', __('Currency Code', 'latepoint-payments-flutterwave'), OsPaymentsFlutterwaveHelper::load_currencies_list(), OsSettingsHelper::get_settings_value('flutterwave_currency_iso_code', 'NGN')); ?>
<?php echo OsFormHelper::media_uploader_field('settings[flutterwave_logo_image_id]', 0, __('Logo for Payment Modal', 'latepoint-payments-flutterwave'), __('Remove Logo', 'latepoint-payments-flutterwave'), OsSettingsHelper::get_settings_value('flutterwave_logo_image_id')); ?>
<?php
}

O método load_countries_list deve retornar uma lista de países que serão utilizados para configurar a integração.

Passando Variáveis para o Frontend

Após capturar essas configurações no backend, devemos fazer com que essas informações sejam acessíveis no frontend. Usaremos o objeto latepoint_helper, que contém todas as variáveis passadas do backend como propriedades de objeto. Para fazer isso, utilizaremos o filtro latepoint_localized_vars_front:

php
public function localized_vars_for_front($localized_vars) {
// Verifique se o Flutterwave está ativo
if (OsPaymentsHelper::is_payment_processor_enabled($this->processor_code)) {
$localized_vars['is_flutterwave_active'] = true;
// Passar variáveis do backend para o frontend
$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;
}

Isso garante que as configurações do Flutterwave estejam disponíveis para os scripts JavaScript no frontend, permitindo uma integração perfeita ao preencher dados no modal do Flutterwave.

Carregando Scripts e Estilos

Agora, precisamos conectar a biblioteca JavaScript do Flutterwave e criar os arquivos JavaScript e CSS necessários para linkar com as ações do LatePoint. Esses arquivos devem estar em ADDON/public/javascripts/ e ADDON/public/stylesheets/, respectivamente. Vamos carregá-los usando o hook latepoint_wp_enqueue_scripts:

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);
}

Vamos agora criar o arquivo JavaScript que processará os eventos de pagamento para o Flutterwave.

Processando Pagamentos com JavaScript

O script JavaScript deve iniciar o modal de pagamento do Flutterwave, gerenciando a interação do usuário e lidando com a resposta do servidor. Você deve criar as funções necessárias para manter a lógica do processamento limpa e organizada.

javascript
class LatepointPaymentsFlutterwaveAddon {
constructor() {
this.ready();
}
ready() {
jQuery(document).ready(() => {
jQuery('body').on('latepoint:submitBookingForm', '.latepoint-booking-form-element', (e, data) => {
if (!latepoint_helper.demo_mode && data.is_final_submit && data.direction === 'next') {
let payment_method = jQuery(e.currentTarget).find('input[name="booking[payment_method]"]').val();
switch (payment_method) {
case 'inline_checkout':
latepoint_add_action(data.callbacks_list, () => {
return this.initPaymentModal(jQuery(e.currentTarget), payment_method);
});
break;
}
}
});
});
}
}

Aqui, estamos escutando o evento de envio do formulário de reserva e inicializando o modal de pagamento conforme o método de pagamento selecionado pelo usuário.

Controlador para Opções de Pagamento

Como último passo, precisamos criar um controlador que irá gerar as opções de pagamento necessárias para o inline checkout. Este controlador será responsável por comunicar-se com as APIs do Flutterwave e retornar os dados necessários ao frontend.

php
class OsPaymentsFlutterwaveController extends OsController {
public function get_payment_options() {
$amount = OsStepsHelper::$booking_object->specs_calculate_price_to_charge();
if ($amount > 0) {
$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'),
];
$this->send_json(array('status' => LATEPOINT_STATUS_SUCCESS, 'options' => $options, 'amount' => $amount));
} else {
$this->send_json(array('status' => LATEPOINT_STATUS_SUCCESS, 'message' => __('Nothing to pay', 'latepoint-payments-flutterwave'), 'amount' => $amount));
}
}
}

Aqui estamos calculando o valor a ser cobrado e gerando as opções que serão passadas para o modal de checkout do Flutterwave.

Processando a Submissão da Reserva

Finalmente, precisamos processar a submissão da reserva e criar um registro da transação no backend. Para isso, vamos utilizar o filtro latepoint_process_payment_for_booking:

php
public function process_payment($result, $booking, $customer) {
if ($booking->payment_method === 'inline_checkout') {
if ($booking->payment_token) {
// Verifica a transação com a API do Flutterwave
$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()
]
]);
// Processa a resposta
if (is_wp_error($remote) || !isset($remote['response']['code']) || $remote['response']['code'] !== 200 || empty($remote['body'])) {
$result['status'] = LATEPOINT_STATUS_ERROR;
$result['message'] = __('Connection error', 'latepoint-payments-flutterwave');
$booking->add_error('payment_error', $result['message']);
} else {
$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;
} else {
$result['status'] = LATEPOINT_STATUS_ERROR;
$result['message'] = __('Payment Error', 'latepoint-payments-flutterwave');
$booking->add_error('payment_error', $result['message']);
}
}
}
}
return $result;
}

Este trecho final garante que as transações sejam verificadas com segurança, e se a confirmar que o pagamento foi bem-sucedido, o resultado é atualizado adequadamente.

A integração do ‘LatePoint Addon Payments Flutterwave’ permite que as empresas aceitem pagamentos de forma prática, aumentando a eficiência e a satisfação dos clientes. Com o processo bem documentado e implementado, os proprietários de negócios podem se concentrar em oferecer um excelente serviço, enquanto a gestão de pagamentos se torna um aspecto contínuo e confiável de suas operações.