Wire payments UI and fix frontend tests

frontend/src/styles.css

@@ -108,6 +108,98 @@ h1 {
   margin-top: 48px;
 }
 
+.payments {
+  margin-top: 48px;
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 24px;
+  padding: 28px;
+  box-shadow: 0 18px 32px rgba(23, 23, 23, 0.08);
+}
+
+.payments-header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+}
+
+.payments-subtitle {
+  margin: 8px 0 0;
+  color: #5c5a5f;
+}
+
+.payments-badge {
+  background: #1c1b1f;
+  color: #fff;
+  padding: 6px 12px;
+  border-radius: 999px;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.payments-form {
+  margin-top: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 16px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 14px;
+  color: #3c3a3f;
+}
+
+.field input,
+.field select {
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid #dad3ca;
+  font-size: 14px;
+}
+
+.payments-actions {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px;
+}
+
+.payments-actions button {
+  padding: 10px 18px;
+  border-radius: 999px;
+  border: none;
+  background: #1c1b1f;
+  color: white;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.payments-actions button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.helper {
+  font-size: 13px;
+  color: #5c5a5f;
+  margin: 0;
+}
+
+.payment-result {
+  margin-top: 16px;
+  background: #f5f5f5;
+  border-radius: 12px;
+  padding: 12px;
+  font-size: 12px;
+  overflow-x: auto;
+}
+
 .grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));