Failure

The Failure component provides feedback when a payment attempt has failed. It informs the user of the issue and includes a button to navigate back to the homepage for another attempt or further assistance.

Props

The Failure component does not accept any props.

Dependencies

• react-router-dom: Uses Link to navigate the user back to the home page after a failed payment.

• react-icons: Uses FaCircleXmark to display a failure icon, visually indicating the unsuccessful payment.

Key Style Classes

• Container Styles:

  • w-screen h-screen flex justify-center items-center bg-black: Centers the failure message within a full-screen, dark background for focused user attention.

• Icon and Message Styling:

  • Icon: FaCircleXmark styled with color="red" to signal failure, layered over a white circular background for emphasis.

  • Message Text:

    • Title: text-3xl font-semibold for a prominent "Oops..." message, clearly indicating an issue.

    • Content: text-neutral-200 font-light text-center for the main message text, instructing the user to retry payment.

• Button Styling:

  • Return Button:

    • w-full h-[40px] rounded-lg border bg-neutral-900 text-sm text-neutral-300: Styled as a call-to-action for returning home, with a subtle hover effect (hover:brightness-105) to encourage interaction.

Usage Example

The Failure component can be used as a standalone page or in the payment process flow to handle failed transactions:

<Route path="/failure" element={<Failure />} />

Additional Notes

• Clear Instructions:

  • Provides a straightforward message informing the user of the payment failure, helping them understand the need to retry.

• User Navigation:

  • The "Return Home" button is prominently placed to guide users back to the homepage, allowing them to attempt the payment process again if needed.

• Visual Feedback:

  • The red failure icon and the "Oops..." message provide immediate, clear feedback to users regarding the unsuccessful payment, making the error state easily recognizable.

---

This documentation covers the main aspects of the Failure component.