Untitled

.payment-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f7f7f7;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.payment-container h1 {
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

.payment-option {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.payment-option:hover {
  background-color: #e0e0e0;
}

.payment-option img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.payment-option span {
  font-size: 18px;
}

.payment-container button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.payment-container button:hover {
  background-color: #0056b3;
}

.payment-status {
  font-size: 24px;
  text-align: center;
  margin-top: 20px;
  color: green;
}




import React from 'react';
import './PaymentPage.css';
import upiImage from './upi.png';
import cardImage from './card.png';
import netbankingImage from './netbanking.png';
import cashOnDeliveryImage from './cash-on-delivery.png';

class PaymentPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: null,
      paymentDone: false
    };
  }

  handleOptionSelect = (option) => {
    this.setState({ selectedOption: option });
  };

  handlePayment = () => {
    if (this.state.selectedOption) {
      this.setState({ paymentDone: true });
    } else {
      alert('Please select a payment option');
    }
  };

  render() {
    return (
      <div className="payment-container">
        <h1>Choose Payment Method</h1>
        <div className="payment-option" onClick={() => this.handleOptionSelect('UPI')}>
          <img src={upiImage} alt="UPI" />
          <span>UPI</span>
        </div>
        <div className="payment-option" onClick={() => this.handleOptionSelect('Card')}>
          <img src={cardImage} alt="Card" />
          <span>Card</span>
        </div>
        <div className="payment-option" onClick={() => this.handleOptionSelect('Netbanking')}>
          <img src={netbankingImage} alt="Netbanking" />
          <span>Netbanking</span>
        </div>
        <div className="payment-option" onClick={() => this.handleOptionSelect('Cash on Delivery')}>
          <img src={cashOnDeliveryImage} alt="Cash on Delivery" />
          <span>Cash on Delivery</span>
        </div>
        {!this.state.paymentDone && (
          <button onClick={this.handlePayment}>Pay</button>
        )}
        {this.state.paymentDone && (
          <div className="payment-status">Payment Done</div>
        )}
      </div>
    );
  }
}

export default PaymentPage;