Issue #34 — Frontend: Paystack Inline Payment Component

[yusuftomilola]

Location: frontend/components/payments/PaystackPaymentButton.tsx

Description

ManageHub uses Paystack for payment processing. Rather than redirecting the member to a separate page, Paystack supports an inline popup that keeps the user on the platform. This component wraps the Paystack inline JS SDK, calls the backend to get an authorization_url, and opens the Paystack popup for the member to complete their payment.

The Paystack inline script (https://js.paystack.co/v1/inline.js) exposes a window.PaystackPop.setup() method. The public key is stored in the NEXT_PUBLIC_PAYSTACK_PUBLIC_KEY environment variable.

Acceptance Criteria

• The component is created at frontend/components/payments/PaystackPaymentButton.tsx
• Accepts props:
  • bookingId: string
  • amountKobo: number (used for display only — the actual charge amount is set server-side)
  • onSuccess?: () => void — callback fired after Paystack confirms payment
  • onClose?: () => void — callback fired if the user closes the popup without paying
• On button click, calls useInitiatePayment to get the reference and authorizationUrl from the backend
• After receiving the reference, opens the Paystack popup using window.PaystackPop.setup() with:
  • key: NEXT_PUBLIC_PAYSTACK_PUBLIC_KEY
  • email: the logged-in user's email (from auth store)
  • amount: amountKobo
  • ref: the reference from the backend
  • onSuccess: calls the onSuccess prop and invalidates relevant queries
  • onCancel: calls the onClose prop
• The Paystack inline script is loaded via a <Script> tag (Next.js next/script) with strategy="beforeInteractive" or handled with a load check
• The button shows a loading state while the useInitiatePayment mutation is pending
• npx tsc --noEmit passes with no errors