forked from dhairyagothi/StationGuide
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
105 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,108 @@ | ||
| import React from 'react'; | ||
| import React, { useState } from 'react'; | ||
|
|
||
| const Payment = () => { | ||
| const [paymentMethod, setPaymentMethod] = useState(''); | ||
| const [cardNumber, setCardNumber] = useState(''); | ||
| const [expiryDate, setExpiryDate] = useState(''); | ||
| const [cvv, setCvv] = useState(''); | ||
|
|
||
| const handleSubmit = (e) => { | ||
| e.preventDefault(); | ||
| // Handle payment submission logic here | ||
| console.log('Payment submitted:', { paymentMethod, cardNumber, expiryDate, cvv }); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="min-h-screen flex justify-center items-center bg-blue-100"> | ||
| <h1 className="text-3xl font-semibold text-blue-900">Payment Page</h1> | ||
| </div> | ||
| <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-md"> | ||
| <h1 className="text-3xl font-semibold text-blue-900 mb-6">Payment Page</h1> | ||
| <form onSubmit={handleSubmit}> | ||
| <div className="mb-4"> | ||
| <label className="block text-gray-700 text-sm font-bold mb-2"> | ||
| Select Payment Method | ||
| </label> | ||
| <select | ||
| className="w-full px-3 py-2 border rounded-md" | ||
| value={paymentMethod} | ||
| onChange={(e) => setPaymentMethod(e.target.value)} | ||
| required | ||
| > | ||
| <option value="">Choose a payment method</option> | ||
| <option value="credit_card">Credit Card</option> | ||
| <option value="debit_card">Debit Card</option> | ||
| <option value="apple_pay">Apple Pay</option> | ||
| <option value="google_pay">Google Pay</option> | ||
| </select> | ||
| </div> | ||
|
|
||
| {paymentMethod === 'credit_card' || paymentMethod === 'debit_card' ? ( | ||
| <> | ||
| <div className="mb-4"> | ||
| <label className="block text-gray-700 text-sm font-bold mb-2"> | ||
| Card Number | ||
| </label> | ||
| <input | ||
| type="text" | ||
| className="w-full px-3 py-2 border rounded-md" | ||
| value={cardNumber} | ||
| onChange={(e) => setCardNumber(e.target.value)} | ||
| required | ||
| /> | ||
| </div> | ||
| <div className="flex mb-4"> | ||
| <div className="w-1/2 mr-2"> | ||
| <label className="block text-gray-700 text-sm font-bold mb-2"> | ||
| Expiry Date | ||
| </label> | ||
| <input | ||
| type="text" | ||
| className="w-full px-3 py-2 border rounded-md" | ||
| placeholder="MM/YY" | ||
| value={expiryDate} | ||
| onChange={(e) => setExpiryDate(e.target.value)} | ||
| required | ||
| /> | ||
| </div> | ||
| <div className="w-1/2 ml-2"> | ||
| <label className="block text-gray-700 text-sm font-bold mb-2"> | ||
| CVV | ||
| </label> | ||
| <input | ||
| type="text" | ||
| className="w-full px-3 py-2 border rounded-md" | ||
| value={cvv} | ||
| onChange={(e) => setCvv(e.target.value)} | ||
| required | ||
| /> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ) : null} | ||
|
|
||
|
|
||
| {paymentMethod === 'apple_pay' || paymentMethod === 'google_pay' ? ( | ||
| <div className="mb-4"> | ||
| <label className="block text-gray-700 text-sm font-bold mb-2"> | ||
| UPI ID | ||
| </label> | ||
| <input | ||
| type="text" | ||
| className="w-full px-3 py-2 border rounded-md" | ||
| placeholder="Enter your UPI ID" | ||
| // Add value and onChange handlers here | ||
| /> | ||
| </div> | ||
| ) : null} | ||
|
|
||
| <button | ||
| type="submit" | ||
| className="w-full bg-blue-500 text-white font-bold py-2 px-4 rounded-md hover:bg-blue-600 transition duration-300" | ||
| > | ||
| Pay Now | ||
| </button> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Payment; | ||
| export default Payment; |