Implement parsing URL parameters.

src/App.css

@@ -77,8 +77,8 @@ body {
   height: 100vh;
   height: 100svh;
   display: grid;
-  grid-template-columns: 1fr 1.3fr 0.5fr 1fr;
-  grid-template-rows: 1rem 1rem 1rem 1rem;
+  grid-template-columns: 1fr 1.5fr 0.5fr 1fr;
+  grid-template-rows: 2rem 2rem 2rem 2rem;
   grid-row-gap: 15px;
 }
 .child {
@@ -100,3 +100,12 @@ body {
   font-size: 1.3125rem;
   font-weight: bold;
 }
+input, select {
+  font-size: 16px;
+  font-size: max(16px, 1em);
+  font-family: inherit;
+  padding: 0.25em 0.5em;
+  background-color: #fff;
+  border: 2px solid gray;
+  border-radius: 4px;
+}

src/App.jsx

@@ -8,8 +8,19 @@ function App() {
   const [payerAddress, setPayerAddress] = useState('');
   const [clientId, setClientId] = useState('');
   const [payerBankAccount, setPayerBankAccount] = useState('');
+  const [amount, setAmount] = useState('0-00');
+
+  const handleBlur = () => {
+    console.log(amount);
+    console.log(payerBankAccount);
+    console.log(payerINN);
+  };
 
   useEffect(() => {
+    const URLParams = new URLSearchParams(window.location.search);
+    const cnum = URLParams.get('cnum');
+    const ftype = URLParams.get('type');
+
     const fetchUsingAsyncAwaitWithFetchApi = async () => {
       const response = await fetch('/pmtvalidation/validate/', {
         method: 'POST',
@@ -20,8 +31,8 @@ function App() {
         body: JSON.stringify({
           fields: [
             { name: 'payer_account' },
-            { name: 'client_id', value: '00234052' },
-            { name: 'form_type', value: 'EXT-RUB' },
+            { name: 'client_id', value: cnum },
+            { name: 'form_type', value: ftype },
           ],
           action: 'getClientInfo',
         }),
@@ -58,16 +69,30 @@ function App() {
           <div className="child">{`${payerName} ${clientId}`}</div>
           <div className="child">Номер счета:</div>
           <div className="child">
-            <select>
-              <option>{payerBankAccount}</option>
+            <select
+              onChange={(e) => setPayerBankAccount(e.target.value)}
+              onBlur={handleBlur}
+            >
+              <option id="1">{payerBankAccount}</option>
             </select>
           </div>
           <div className="child">ИНН:</div>
-          <div className="child">{payerINN}</div>
+          <div className="child">
+            <input
+              value={payerINN}
+              onChange={(e) => setPayerINN(e.target.value)}
+              onBlur={handleBlur}
+              style={{ maxWidth: '16ch' }}
+            />
+          </div>
           <div className="child">Сумма:</div>
           <div className="child">
             <span>
-              <input value="0-00"></input>
+              <input
+                value={amount}
+                onChange={(e) => setAmount(e.target.value)}
+                onBlur={handleBlur}
+              />
               RUB
             </span>
           </div>