105 lines
6.7 KiB
Plaintext
105 lines
6.7 KiB
Plaintext
<div id="bankDetailsModal" class="modal-overlay">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title">Update Bank Details</h2>
|
|
<button class="modal-close" onclick="closeBankDetailsModal()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="payment-form" class="modal-form">
|
|
<div class="payment-option" onclick="selectPaymentOption('card')">
|
|
<h4>Credit or Debit Card</h4>
|
|
<p>Pay securely with your card</p>
|
|
</div>
|
|
<div id="card-details" class="payment-details">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="card-number" class="input-field" placeholder=" " required>
|
|
<label for="card-number" class="input-label">Card Number *</label>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="expiry-date" class="input-field" placeholder=" " required>
|
|
<label for="expiry-date" class="input-label">Expiry Date (MM/YY) *</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="security-code" class="input-field" placeholder=" " oninput="validateCVVVV(this)" onkeypress="return preventInvalidCVVChars(event)" maxlength="4" required>
|
|
<label for="security-code" class="input-label">Security Code *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="security-code-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
Please enter a valid security code
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="card-zip" class="input-field" placeholder=" " oninput="validateZipCode(this)" onkeypress="return preventNonNumericZip(event)" maxlength="10" required>
|
|
<label for="card-zip" class="input-label">ZIP Code *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="card-zip-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
ZIP code should contain only numbers
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="payment-option" onclick="selectPaymentOption('bank')">
|
|
<h4>Bank Account (ACH)</h4>
|
|
<p>Direct bank transfer</p>
|
|
</div>
|
|
<div id="bank-details" class="payment-details">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="bank-name" class="input-field" placeholder=" " oninput="validateBankName(this)" onkeypress="return preventInvalidBankNameChars(event)" required>
|
|
<label for="bank-name" class="input-label">Bank Name *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="bank-name-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
Bank name should contain letters and cannot be only numbers or special characters
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="account-number" class="input-field" placeholder=" " oninput="validateAccountNumber(this)" onkeypress="return preventInvalidAccountNumberChars(event)" required>
|
|
<label for="account-number" class="input-label">Account Number *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="account-number-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
Please enter a valid account number
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="routing-number" class="input-field" placeholder=" " required>
|
|
<label for="routing-number" class="input-label">Routing Number *</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<select id="account-type" class="select-field" required>
|
|
<option value="" disable selected style="display: none"></option>
|
|
<option value="checking">Checking</option>
|
|
<option value="savings">Savings</option>
|
|
</select>
|
|
<label for="account-type" class="input-label">Account Type *</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="account-holder-name" class="input-field" placeholder=" " oninput="validateAccountHolderName(this)" onkeypress="return preventInvalidAccountHolderChars(event)" required>
|
|
<label for="account-holder-name" class="input-label">Account Holder Name *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="account-holder-name-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
Account holder name should only contain letters and spaces
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="button" class="cancel-btn" onclick="closeBankDetailsModal()">Cancel</button>
|
|
<button type="submit" class="save-btn" id="saveBankDetailsBtn">Update Bank Details</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div> |