LatePoint Addon – Payments Flutterwave

Integrating Flutterwave with LatePoint: A Detailed Guide

Flutterwave has emerged as a leading payment processor, particularly in Africa, simplifying online transactions for businesses. Integrating Flutterwave into the LatePoint system can significantly enhance the payment options available for users. In this guide, we’ll take a comprehensive look at how to integrate the Flutterwave payment processor into LatePoint efficiently. This involves creating a specific addon that will manage payment methods via Flutterwave, allowing users to handle transactions seamlessly.

Setting Up the LatePoint Addon for Flutterwave

To begin integrating Flutterwave, you first need to set up the foundation for your addon. The integration process starts with downloading the LatePoint addon starter plugin from the GitHub repository. After downloading, unzip the folder and rename it to latepoint-payments-flutterwave. It’s crucial to replace any instances of -addon-starter with -payments-flutterwave across the files.

Next, locate the main add-on file, which is now latepoint-payments-flutterwave.php. Here, you will need to adjust all variables and strings, commonly replacing addon-starter with payments-flutterwave. This renaming convention helps maintain consistency across your codebase.

An important aspect during this setup is renaming the primary addon object $LATEPOINT_ADDON_ADDON_STARTER to avoid conflicts and ensure that everything aligns correctly with your new structure.

Implementing Flutterwave Payment Processing

This integration utilizes the “inline callback” payment processing method offered by Flutterwave, where a payment modal appears when customers attempt to complete their booking. This modal, generated by JavaScript, communicates payment success or failure back to your application through defined callback functions.

Collecting API Keys

To facilitate payments through Flutterwave, you’ll require a public and a secret API key. These keys can be generated from the Flutterwave settings within your admin dashboard. It’s essential to capture these keys within the LatePoint settings, allowing you to register Flutterwave as a new payment method on the Payments page.

php
class LatePointPaymentsFlutterwave {
public $version = '1.0.0';
public $db_version = '1.0.0';
public $addon_name = 'latepoint-payments-flutterwave';
public $processor_code = 'flutterwave';
}

By creating a unique code for your processor, you ensure that the corresponding methods remain distinct and well-defined.

Registering Payment Processor and Methods

In order to enable the Flutterwave payment options, we need to hook into certain WordPress filters crucial for payment processing. This allows LatePoint to recognize Flutterwave as a valid payment processor:

“`php
public function init_hooks(){
// Register flutterwave as a payment processor
add_filter(‘latepoint_payment_processors’, [$this, ‘register_payment_processor’], 10, 2);

// Register available payment methods
add_filter('latepoint_all_payment_methods', [$this, 'register_payment_methods']);

// Enable payment methods if the processor is active
add_filter('latepoint_enabled_payment_methods', [$this, 'register_enabled_payment_methods']);

}
“`

Following this, define the appropriate functions that register the payment methods:

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

By specifying the time_type attribute, you define the timing of the payment—whether it must be executed immediately upon booking (as in this case with “inline_checkout”).

Creating Settings Form for the Processor

It’s imperative that business owners can manage their payment settings easily. Thus, we create a form that captures the necessary API keys, country, currency, and logo with the following:

“`php
public function add_settings_fields($processor_code){
if($processor_code !== $this->processor_code) return false;

// Form fields for Flutterwave settings
echo OsFormHelper::text_field('settings[flutterwave_publishable_key]', __('Public Key', 'latepoint-payments-flutterwave'), OsSettingsHelper::get_settings_value('flutterwave_publishable_key'));

echo OsFormHelper::password_field('settings[flutterwave_secret_key]', __('Secret Key', 'latepoint-payments-flutterwave'), OsSettingsHelper::get_settings_value('flutterwave_secret_key'));

// Options for country and currency selection
echo OsFormHelper::select_field('settings[flutterwave_country_code]', __('Country', 'latepoint-payments-flutterwave'), OsPaymentsFlutterwaveHelper::load_countries_list(), OsSettingsHelper::get_settings_value('flutterwave_country_code', 'NG'));

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

}
“`

User-friendly forms will allow business owners to easily input their information, with fields for sensitive data like the flutterwave_secret_key being encrypted for security.

Passing Variables to Frontend

After capturing these settings, it becomes essential to transmit this data to the front end of your application. Utilizing the latepoint_localized_vars_front filter lets you append additional properties to the latepoint_helper object for access through your JavaScript:

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');
}
return $localized_vars;
}

This integration ensures that your frontend JavaScript can utilize the Flutterwave API, making direct calls to their service during the payment transaction.

Enqueuing Scripts and Styles

For the payment modal to function effectively, your integration needs to include necessary JavaScript and CSS files. Their responsibilities include handling front-end actions and applying styles:

“`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);

// Adding Flutterwave library
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);

}
“`

By including these resources, you’re essentially preparing your frontend to respond to user interactions and execute the payments effectively.

Processing Payments

Lastly, it’s time to handle the payment submission and verify transactions. You must hook into the latepoint_process_payment_for_booking filter to execute final payment processing:

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){
// API call to verify the payment
$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()
]
]);
// Handle the response
if (!is_wp_error($remote) && isset($remote['response']['code']) && $remote['response']['code'] == 200) {
$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']);
}
} else {
$result['status'] = LATEPOINT_STATUS_ERROR;
$result['message'] = __('Connection error', 'latepoint-payments-flutterwave');
}
} else {
$result['status'] = LATEPOINT_STATUS_ERROR;
$result['message'] = __('Payment token not set', 'latepoint-payments-flutterwave');
$booking->add_error('payment_error', $result['message']);
}
break;
}
}
return $result;
}

This script connects to Flutterwave’s API and verifies whether the transaction was successful. If all checks pass, the system indicates a successful payment; otherwise, it handles errors effectively, ensuring that users are informed of any issues.

Incorporating Flutterwave into LatePoint provides a robust solution for managing payments, streamlining the process for business owners and improving the overall user experience. Following these steps allows for a straightforward integration that secures and simplifies transactions for all parties involved. This solution not only enhances the service offerings of LatePoint but also strengthens customer trust by providing reliable, efficient payment processing through Flutterwave.