Streamlining Payments in gymflow: A React Hook-Based Approach

Introduction

The gymflow project focuses on managing fitness memberships and related services. A critical component of any membership system is a robust and user-friendly payment process. Previously, managing user payments involved a less integrated approach, which often meant manual steps or reliance on external communication channels. To enhance the user experience and internal operational efficiency, we undertook an initiative to revamp the payment flow.

The Problem

Our existing payment process in gymflow presented several challenges. The primary method for handling payments often involved ad-hoc communication, such as through WhatsApp, to guide users through payment steps. This created a fragmented experience, lacked immediate feedback for users, and was prone to delays and manual errors. For instance, updating membership status after a payment often required manual intervention, leading to potential discrepancies and a less professional user journey.

The Solution: A Seamless Payment Flow with React Hooks

To address these issues, we implemented a dedicated user payment flow, leveraging React hooks for state management and logic encapsulation. The core of this solution revolves around a custom usePayments hook and a PaymentMethodSelector modal. This approach significantly streamlined the process, moving away from fragmented communication to a unified, in-app experience.

The usePayments Hook

The usePayments hook centralizes all payment-related logic, making it reusable across different parts of the application. It manages the selected payment method, loading states, and any errors during the payment process. This abstraction allows components to interact with the payment system through a clean, declarative interface.

import { useState, useCallback } from 'react';

type PaymentMethod = 'credit_card' | 'bank_transfer' | 'qr_code';

interface UsePaymentsResult {
    selectedMethod: PaymentMethod | null;
    setSelectedMethod: (method: PaymentMethod) => void;
    handlePayment: (amount: number) => Promise<boolean>;
    isLoading: boolean;
    error: string | null;
}

export const usePayments = (): UsePaymentsResult => {
    const [selectedMethod, setSelectedMethod] = useState<PaymentMethod | null>(null);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    const handlePayment = useCallback(async (amount: number): Promise<boolean> => {
        if (!selectedMethod) {
            setError('Please select a payment method.');
            return false;
        }
        setIsLoading(true);
        setError(null);
        try {
            // In a real application, this would interact with a payment gateway or Supabase functions
            const response = await fetch('/api/process-payment', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ method: selectedMethod, amount }),
            });
            const data = await response.json();

            if (!response.ok) {
                throw new Error(data.message || 'Payment failed. Please try again.');
            }
            return true; // Payment successful
        } catch (err: any) {
            setError(err.message || 'An unexpected error occurred.');
            return false;
        } finally {
            setIsLoading(false);
        }
    }, [selectedMethod]);

    return { selectedMethod, setSelectedMethod, handlePayment, isLoading, error };
};

The PaymentMethodSelector Modal

Complementing the hook is a PaymentMethodSelector modal, providing users with three distinct payment options: credit card, bank transfer, and QR code. This modal replaces previous ad-hoc methods, offering a consistent and clear interface for users to choose how they wish to pay. By centralizing payment method selection, we've improved both user clarity and data collection for analytics.

Moreover, this update involved removing direct WhatsApp integration from key components like Membresia.tsx and MembershipGate.tsx. This change signifies a move towards a fully integrated in-app experience, reducing dependencies on external communication tools and enhancing the overall professionalism of the gymflow application.

Results After Implementation

The introduction of the new payment flow has yielded immediate benefits. Users now experience a smoother, more intuitive process for renewing or purchasing memberships. The clear selection of payment methods and integrated processing reduces confusion and incomplete transactions. For the development team, the usePayments hook provides a modular and maintainable way to handle payment logic, making future enhancements or additions of new payment methods significantly easier.

Key Insight

Migrating from ad-hoc, externally reliant processes to a structured, in-app solution dramatically improves both user experience and developer maintainability. Custom React hooks are powerful tools for abstracting complex logic, like payment processing, into reusable and testable units. When designing core functionalities, prioritizing a cohesive, integrated user journey over fragmented external communication channels leads to a more robust and professional application.

Generated with Gitvlg.com