Styled Paper - Copy this React, Mui Component to your project

Import React, { useState } from 'react'; import axios from 'axios'; const PaymentForm = () => { const [amount, setAmount] = useState(''); const [orderDescription, setOrderDescription] = useState(''); const [orderType, setOrderType] = useState(''); const [language, setLanguage] = useState('vn'); const [bankCode, setBankCode] = useState(''); const handlePayment = async (e) => { e.preventDefault(); try { const response = await axios.post('/api/payment/create_payment_url', { amount, orderDescription, orderType, language, bankCode, }); if (response.data && response.data.data) { window.location.href = response.data.data; } } catch (error) { console.error('Error creating payment:', error); } }; return ( <div> <h1>Thanh toán VNPay</h1> <form onSubmit={handlePayment}> <div> <label>Số tiền:</label> <input type="number" value={amount} onChange={(e) => setAmount(e.target.value)} required /> </div> <div> <label>Mô tả đơn hàng:</label> <input type="text" value={orderDescription} onChange={(e) => setOrderDescription(e.target.value)} required /> </div> <div> <label>Loại đơn hàng:</label> <input type="text" value={orderType} onChange={(e) => setOrderType(e.target.value)} required /> </div> <div> <label>Ngôn ngữ:</label> <select value={language} onChange={(e) => setLanguage(e.target.value)} > <option value="vn">Tiếng Việt</option> <option value="en">English</option> </select> </div> <div> <label>Mã ngân hàng:</label> <input type="text" value={bankCode} onChange={(e) => setBankCode(e.target.value)} /> </div> <button type="submit">Thanh toán</button> </form> </div> ); }; export default PaymentForm; cải thiện giao diện cho trang này