生活缴费平台搭建

import React, { useState } from 'react';

function PaymentPage() {
  const [amount, setAmount] = useState('');
  const [paymentMethod, setPaymentMethod] = useState('credit_card');

  const handlePayment = async () => {
    try {
      // 调用后端支付接口
      const response = await fetch('/api/pay', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ amount, paymentMethod })
      });
      
      if (response.ok) {
        alert('Payment successful!');
      } else {
        alert('Payment failed. Please try again.');
      }
    } catch (error) {
      console.error('Payment error:', error);
      alert('An error occurred during payment. Please try again later.');
    }
  };

  return (
    <div>
      <h1>Make a Payment</h1>
      <label>
        Amount:
        <input type="number" value={amount} onChange={(e) => setAmount(e.target.value)} />
      </label>
      <br />
      <label>
        Payment Method:
        <select value={paymentMethod} onChange={(e) => setPaymentMethod(e.target.value)}>
          <option value="credit_card">Credit Card</option>
          <option value="paypal">PayPal</option>
        </select>
      </label>
      <br />
      <button onClick={handlePayment}>Pay Now</button>
    </div>
  );
}

export default PaymentPage;