Integracja Flutterwave z LatePoint
Integracja systemu płatności Flutterwave z LatePoint to kluczowy proces umożliwiający łatwe przetwarzanie płatności dla rezerwacji. W tym przewodniku szczegółowo opiszemy, jak przeprowadzić tę integrację, obejmując niezbędne kroki oraz kod. Naszym celem jest stworzenie dodatku LatePoint Payments Flutterwave, który pozwoli na wykorzystanie Flutterwave jako metody płatności.
Rozwój
Przygotowanie dodatku
Rozpoczynamy od pobrania dodatku latepoint-addon-starter z GitHub. Po rozpakowaniu plików należy zmienić nazwę folderu na latepoint-payments-flutterwave. Następnie otwieramy główny plik, który zmieniliśmy na latepoint-payments-flutterwave.php, i zmieniamy wszystkie wystąpienia -addon-starter na -payments-flutterwave. To istotny krok, aby nasz dodatek działał poprawnie.
Przykład definicji klasy dla nowego dodatku:
php
class LatePointPaymentsFlutterwave {
public $version = '1.0.0';
public $db_version = '1.0.0';
public $addon_name = 'latepoint-payments-flutterwave';
public $processor_code = 'flutterwave';
}
Implementacja płatności
W ramach integracji z Flutterwave, wdrażamy “inline callback”, co oznacza, że podczas próby zapłaty przez klienta, otwiera się modal płatności Flutterwave przy użyciu JavaScriptu. Niezbędne jest utworzenie par kluczy API: publicznego i prywatnego, które można wygenerować w ustawieniach Flutterwave.
Aby umożliwić wprowadzenie kluczy API w ustawieniach LatePoint, zarejestrujemy Flutterwave jako nową metodę płatności. W tym celu musimy użyć filtrów do rejestracji metod płatności:
php
public function init_hooks() {
add_filter('latepoint_payment_processors', [$this, 'register_payment_processor'], 10, 2);
add_filter('latepoint_all_payment_methods', [$this, 'register_payment_methods']);
add_filter('latepoint_enabled_payment_methods', [$this, 'register_enabled_payment_methods']);
}
Rejestracja metod płatności
W naszym nowym dodatku zdefiniujemy również metody, które będą rejestrować i wspierać nową metodę płatności:
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'
]
];
}
Metoda ta dodaje wsparcie dla metody “Inline Checkout”. Ustawienie atrybutu time_type na ‘now’ oznacza, że płatność jest wymagana w momencie rezerwacji.
Ustawienia w panelu administracyjnym
Następnie stworzymy formularz, który zbiera klucze API oraz inne ustawienia od właściciela biznesu, takie jak kod kraju, kod waluty i logo. Nasze formularze będą wykorzystać pomocnicze metody LatePointa do budowy pól, takie jak text_field, password_field, oraz select_field.
W naszym pliku dodamy poniższe pole do ustawień:
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
}
Przekazywanie ustawień do front-endu
Po zarejestrowaniu metod płatności, musimy również przesłać zebrane ustawienia do JavaScriptu, aby formularz rezerwacji mógł z nich korzystać. W tym celu wykorzystujemy filtr latepoint_localized_vars_front, aby dodać nowe zmienne:
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;
}
Inicjalizacja płatności w JavaScript
Kontynuując, musimy załadować bibliotekę JavaScript Flutterwave oraz nasze własne pliki JavaScript i CSS, aby umożliwić korzystanie z funkcji płatności na frontendzie naszej aplikacji. W tym celu tworzymy plik latepoint-payments-flutterwave-front.js i definiujemy, jak obsługiwać zdarzenia płatności:
“`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;
}
}
});
});
}
initPaymentModal($booking_form_element, payment_method) {
// ... implementacja modalnej logiki płatności
}
}
let latepointPaymentsFlutterwaveAddon = new LatepointPaymentsFlutterwaveAddon();
“`
W powyższym kodzie, monitorujemy zdarzenie przesłania formularza rezerwacji oraz inicjujemy płatność w modalu Flutterwave. Wartości takie jak klucz publiczny, informacje o kliencie i szczegóły płatności będą przesyłane do Flutterwave.
Przetwarzanie płatności w backendzie
Na koniec musimy zaimplementować funkcję przetwarzania płatności, która weryfikuje transakcję po jej przeprowadzeniu. Użyjemy filtra latepoint_process_payment_for_booking, aby zrealizować tę funkcjonalność:
“`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()
]
]);
// Weryfikacja odpowiedzi
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 {
// Obsługa błędów płatności
$result['status'] = LATEPOINT_STATUS_ERROR;
$result['message'] = __('Payment Error', 'latepoint-payments-flutterwave');
$booking->add_error('payment_error', $result['message']);
}
} else {
// Obsługa błędów połączenia z API
$result['status'] = LATEPOINT_STATUS_ERROR;
$result['message'] = __('Connection error', 'latepoint-payments-flutterwave');
$booking->add_error('payment_error', $result['message']);
}
} else {
// Jeśli token płatności nie jest ustawiony
$result['status'] = LATEPOINT_STATUS_ERROR;
$result['message'] = __('Payment Error', 'latepoint-payments-flutterwave');
$booking->add_error('payment_error', $result['message']);
}
break;
}
}
return $result;
}
“`
W tej funkcji, weryfikujemy, czy transakcja została pomyślnie przeprowadzona, korzystając z klucza płatności. Jeśli weryfikacja zakończy się sukcesem, ustawiamy status na LATEPOINT_STATUS_SUCCESS. W przeciwnym razie obsługujemy odpowiednie błędy.
Podsumowanie
Integracja Flutterwave z LatePoint przy użyciu dodatku LatePoint Payments Flutterwave stanowi elastyczne i skuteczne rozwiązanie do przetwarzania płatności w systemach rezerwacji. Dbanie o prawidłową implementację poszczególnych kroków jest kluczowe, aby zapewnić użytkownikom bezproblemowe doświadczenie płatności. Dzięki zastosowanym technikom, jak wykorzystanie JavaScriptu do interakcji z API Flutterwave oraz zgrabnie zaprojektowanym formularzom w panelu administracyjnym, otrzymujemy solidne fundamenty do tworzenia i zarządzania płatnościami online w LatePoint.
Opinie
Na razie nie ma opinii o produkcie.