💡[FEATURE]: Add a Payment Page

[siddheshhr]

Title: Implement Checkout with Mock Payment Flow (Payment.jsx & Success.jsx)

• Description:

Currently, clicking the checkout and payment details is all in on one page instead of this in the cart adding a button to which onclicking will redirect to payment gateway page. This issue proposes the creation of a checkout flow using React components:
Payment.jsx: This component will serve as a form for users to enter mock (invalid) payment card details for demonstration purposes. It should include fields for:
currently:

• Cardholder Name
• Card Number (16 digits, non-functional validation)
• Expiration Date (MM/YY format, non-functional validation)
• CVV (3-digit code, non-functional validation)
• Billing Address (optional)

Success.jsx: Upon submitting the form in Payment.jsx, this component will display a success message indicating a successful order placement (even though the payment details are mock).

• Mock Payment Flow:

1. Clicking "Proceed to Checkout" redirects the user to Payment.jsx.
2. The user enters mock card details in the form.
3. Submitting the form triggers navigation to Success.jsx, displaying the "Thank you, your order has been placed!" message.

Alternatives Considered:

Integrating a real payment gateway: This is not feasible for a mock flow but could be an option for future development.
Implementing basic form validation: While not necessary for this demo, it could improve user experience.

I have started working on this please assign me this issue

[github-actions]

Congratulations, @siddheshhr! 🎉 Thank you for creating your issue. Your contribution is greatly appreciated and we look forward to working with you to resolve the issue. Keep up the great work!

We will promptly review your changes and offer feedback. Keep up the excellent work! Kindly remember to check our contributing guidelines

[siddheshhr]

GSSOC:I have started working on this please assign me this issue