| Server IP : 65.1.209.187 / Your IP : 216.73.216.144 Web Server : nginx/1.24.0 System : Linux ip-172-31-5-206 6.14.0-1015-aws #15~24.04.1-Ubuntu SMP Tue Sep 23 22:44:48 UTC 2025 x86_64 User : ( 1001) PHP Version : 8.3.6 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/drjunior_wordpress/wp-content/themes/drjunior/templates/ |
Upload File : |
<?php
/**
* Template Name: Payment Page
* Description: Payment gateway initial page for course fee collection
*/
// This is a standalone template with its own header/footer design (similar to admissions)
// Check for payment status from query parameters
$payment_status = isset($_GET['status']) ? sanitize_text_field($_GET['status']) : '';
$merchant_txn_no = isset($_GET['merchant_txn_no']) ? sanitize_text_field($_GET['merchant_txn_no']) : '';
$txn_id = isset($_GET['txn_id']) ? sanitize_text_field($_GET['txn_id']) : '';
$response_code = isset($_GET['response_code']) ? sanitize_text_field($_GET['response_code']) : '';
$payment_message = isset($_GET['message']) ? sanitize_text_field($_GET['message']) : '';
// Determine page mode: 'success', 'failed', or 'form' (default)
$page_mode = 'form';
if ($payment_status === 'success') {
$page_mode = 'success';
} elseif ($payment_status === 'failed' || $payment_status === 'failure') {
$page_mode = 'failed';
}
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title><?php wp_title('|', true, 'right');
bloginfo('name'); ?> - Payment</title>
<meta name="description" content="Dr. Junior Course Fee Payment - Select your class and payment option">
<!-- Favicons -->
<link href="<?php echo get_template_directory_uri(); ?>/assets/admissions/img/favicon.png" rel="icon">
<link href="<?php echo get_template_directory_uri(); ?>/assets/admissions/img/apple-touch-icon.png"
rel="apple-touch-icon">
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Charm:wght@400;700&display=swap" rel="stylesheet">
<?php wp_head(); ?>
<style>
/* Payment Page Custom Styles */
.payment-hero {
background: linear-gradient(135deg, #142e6c 0%, #2d8ca4 100%);
min-height: 100vh;
padding: 120px 0 60px 0;
}
.payment-card {
background: #fff;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
padding: 40px;
max-width: 900px;
margin: 0 auto;
}
.payment-header {
text-align: center;
margin-bottom: 40px;
}
.payment-header h1 {
color: #2d465e;
font-size: 32px;
font-weight: 700;
margin-bottom: 10px;
}
.payment-header p {
color: #666;
font-size: 16px;
}
/* User Details Form */
.user-details-form {
margin-bottom: 30px;
}
.form-row {
margin-bottom: 20px;
}
.form-group {
position: relative;
}
.form-group label {
display: block;
font-size: 16px;
font-weight: 600;
color: #2d465e;
margin-bottom: 10px;
}
.form-group .required {
color: #dc3545;
font-weight: bold;
}
.form-input {
width: 100%;
padding: 15px 20px;
font-size: 16px;
border: 2px solid #e0e0e0;
border-radius: 10px;
background: #fff;
color: #333;
transition: all 0.3s ease;
}
.form-input:focus {
outline: none;
border-color: #2d8ca4;
box-shadow: 0 0 0 3px rgba(45, 140, 164, 0.1);
}
.form-input::placeholder {
color: #999;
}
.form-input.error {
border-color: #dc3545;
}
.error-text {
color: #dc3545;
font-size: 13px;
margin-top: 5px;
display: none;
}
.error-text.show {
display: block;
}
/* Phone Input Group */
.phone-input-group {
display: flex;
gap: 10px;
}
.country-code-wrapper {
display: flex;
align-items: center;
position: relative;
flex-shrink: 0;
}
.country-code-prefix {
position: absolute;
left: 15px;
font-size: 16px;
color: #333;
font-weight: 600;
z-index: 1;
}
.country-code-input {
width: 80px;
padding-left: 30px !important;
text-align: center;
}
.phone-input {
flex: 1;
}
.phone-input-group .form-input.error {
border-color: #dc3545;
}
.class-selector {
margin-bottom: 40px;
}
.class-selector label {
display: block;
font-size: 16px;
font-weight: 600;
color: #2d465e;
margin-bottom: 12px;
}
.class-selector .required {
color: #dc3545;
font-weight: bold;
}
.class-selector select {
width: 100%;
padding: 15px 20px;
font-size: 16px;
border: 2px solid #e0e0e0;
border-radius: 10px;
background: #fff;
color: #333;
cursor: pointer;
transition: all 0.3s ease;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232d8ca4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 20px;
}
.class-selector select:focus {
outline: none;
border-color: #2d8ca4;
box-shadow: 0 0 0 3px rgba(45, 140, 164, 0.1);
}
.fee-table-container {
display: none;
animation: fadeIn 0.4s ease;
}
.fee-table-container.show {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fee-table-title {
text-align: center;
margin-bottom: 25px;
}
.fee-table-title h2 {
color: #2d465e;
font-size: 24px;
font-weight: 600;
}
.fee-table-title .class-name {
color: #2d8ca4;
font-weight: 700;
}
.fee-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 30px;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.fee-table thead {
background: linear-gradient(135deg, #2d465e 0%, #2d8ca4 100%);
}
.fee-table thead th {
color: #fff;
font-weight: 600;
font-size: 14px;
padding: 18px 15px;
text-align: center;
border: none;
}
.fee-table tbody tr {
transition: all 0.3s ease;
cursor: pointer;
}
.fee-table tbody tr:hover {
background: #f0f9fb;
}
.fee-table tbody tr.selected {
background: #e3f5f9;
box-shadow: inset 0 0 0 2px #2d8ca4;
}
.fee-table tbody td {
padding: 18px 15px;
text-align: center;
border-bottom: 1px solid #eee;
font-size: 15px;
color: #333;
}
.fee-table tbody td:first-child {
font-weight: 600;
color: #2d465e;
}
.payment-option-radio {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: #2d8ca4;
}
.amount-highlight {
font-weight: 700;
color: #2d8ca4;
font-size: 18px;
}
.gst-note {
text-align: center;
background: #fff8e6;
border: 1px solid #ffe0a6;
border-radius: 8px;
padding: 12px 20px;
margin-bottom: 25px;
font-size: 14px;
color: #8a6914;
}
.gst-note i {
margin-right: 8px;
}
.proceed-btn {
display: block;
width: 100%;
max-width: 350px;
margin: 0 auto;
padding: 18px 40px;
background: linear-gradient(135deg, #ff9900 0%, #ff6600 100%);
color: #fff;
border: none;
border-radius: 50px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 6px 20px rgba(255, 102, 0, 0.3);
}
.proceed-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 102, 0, 0.4);
}
.proceed-btn:disabled {
background: #ccc;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.back-link {
display: block;
text-align: center;
margin-top: 20px;
color: #666;
font-size: 14px;
text-decoration: none;
}
.back-link:hover {
color: #2d8ca4;
}
/* Payment Status Styles */
.payment-status {
text-align: center;
padding: 40px 20px;
}
.status-icon {
font-size: 80px;
margin-bottom: 25px;
}
.status-icon.success {
color: #28a745;
}
.status-icon.failed {
color: #dc3545;
}
.status-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 15px;
}
.status-title.success {
color: #28a745;
}
.status-title.failed {
color: #dc3545;
}
.status-message {
font-size: 16px;
color: #666;
margin-bottom: 30px;
line-height: 1.6;
}
.transaction-details {
background: #f8f9fa;
border-radius: 10px;
padding: 20px;
margin: 25px 0;
text-align: left;
}
.transaction-details h4 {
font-size: 16px;
color: #2d465e;
margin-bottom: 15px;
font-weight: 600;
}
.transaction-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #e9ecef;
font-size: 14px;
}
.transaction-row:last-child {
border-bottom: none;
}
.transaction-row .label {
color: #666;
}
.transaction-row .value {
color: #333;
font-weight: 600;
word-break: break-all;
}
.error-banner {
background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
border: 1px solid #fc8181;
border-radius: 10px;
padding: 20px;
margin-bottom: 30px;
}
.error-banner h4 {
color: #c53030;
font-size: 16px;
margin-bottom: 10px;
font-weight: 600;
}
.error-banner p {
color: #742a2a;
font-size: 14px;
margin: 0;
}
.home-btn {
display: inline-block;
padding: 15px 40px;
background: linear-gradient(135deg, #2d8ca4 0%, #142e6c 100%);
color: #fff;
border: none;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 6px 20px rgba(45, 140, 164, 0.3);
}
.home-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(45, 140, 164, 0.4);
color: #fff;
}
.retry-section {
margin-top: 40px;
padding-top: 30px;
border-top: 2px solid #e9ecef;
}
.retry-section h3 {
font-size: 20px;
color: #2d465e;
margin-bottom: 20px;
font-weight: 600;
}
/* Responsive */
@media (max-width: 768px) {
.payment-hero {
padding: 100px 15px 40px 15px;
}
.payment-card {
padding: 25px 20px;
border-radius: 15px;
}
.payment-header h1 {
font-size: 24px;
}
.fee-table {
display: block;
overflow-x: auto;
}
.fee-table thead th,
.fee-table tbody td {
padding: 12px 10px;
font-size: 13px;
}
.proceed-btn {
padding: 15px 30px;
font-size: 16px;
}
}
/* Logo styling */
.payment-logo {
text-align: center;
margin-bottom: 30px;
}
.payment-logo img {
max-width: 200px;
height: auto;
}
/* Selected payment summary */
.payment-summary {
display: none;
background: linear-gradient(135deg, #e3f5f9 0%, #f0f9fb 100%);
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
border: 1px solid #bde4ec;
}
.payment-summary.show {
display: block;
}
.payment-summary h4 {
color: #2d465e;
font-size: 16px;
margin-bottom: 12px;
font-weight: 600;
}
.payment-summary .summary-row {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 15px;
}
.payment-summary .summary-row span:first-child {
color: #666;
}
.payment-summary .summary-row span:last-child {
color: #333;
font-weight: 600;
}
.payment-summary .total-row {
border-top: 2px solid #2d8ca4;
padding-top: 12px;
margin-top: 12px;
}
.payment-summary .total-row span:last-child {
color: #2d8ca4;
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body <?php body_class('index-page payment-page'); ?>>
<?php wp_body_open(); ?>
<!-- Top Links Bar -->
<div class="col-md-12 fixed-top white-bg top-links">
<div class="container">
<div class="row">
<div class="col-9 col-lg-9">
<ul>
<li class="top-ling-mg-rt"><a href="mailto:support@drjunior.in"><img
src="<?php echo get_template_directory_uri(); ?>/assets/admissions/img/email-icon.jpg" />
support@drjunior.in</a></li>
<li><a href="tel:+917994998797"><img
src="<?php echo get_template_directory_uri(); ?>/assets/admissions/img/phone-icn.jpg" /> +91
7994998797</a></li>
</ul>
</div>
<div class="col-3 col-lg-3 d-flex justify-content-lg-end">
<ul>
<li><a target="_blank" href="https://www.facebook.com/Dr.Juniorofficial"><img
src="<?php echo get_template_directory_uri(); ?>/assets/admissions/img/facebook.jpg" /></a></li>
<li><a target="_blank"
href="https://wa.me/+917994998797?text=Hi, I'm reaching out to you through your website!"><img
src="<?php echo get_template_directory_uri(); ?>/assets/admissions/img/whatsapp.jpg" /></a></li>
<li><a target="_blank" href="https://www.instagram.com/drjunior.medical/"><img
src="<?php echo get_template_directory_uri(); ?>/assets/admissions/img/instagram.jpg" /></a></li>
<li><a target="_blank" href="https://www.youtube.com/@doctor.junior"><img
src="<?php echo get_template_directory_uri(); ?>/assets/admissions/img/youtube.jpg" /></a></li>
</ul>
</div>
</div>
</div>
</div>
<main class="main">
<!-- Payment Hero Section -->
<section class="payment-hero">
<div class="container">
<div class="payment-card" <?php echo ($page_mode === 'form') ? ' data-aos="fade-up"' : ''; ?>>
<!-- Logo -->
<div class="payment-logo">
<a href="<?php echo esc_url(home_url('/')); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/assets/admissions/img/logo.png"
alt="Dr. Junior Logo" />
</a>
</div>
<?php if ($page_mode === 'success'): ?>
<!-- Payment Success -->
<div class="payment-status">
<div class="status-icon success">
<i class="bi bi-check-circle-fill"></i>
</div>
<h2 class="status-title success">Payment Successful!</h2>
<p class="status-message">
Thank you for your payment. Your enrollment has been confirmed.<br>
Our team will contact you shortly with further details.
</p>
<?php if ($merchant_txn_no || $txn_id): ?>
<div class="transaction-details">
<h4><i class="bi bi-receipt" style="margin-right: 8px;"></i>Transaction Details</h4>
<?php if ($txn_id): ?>
<div class="transaction-row">
<span class="label">Transaction ID:</span>
<span class="value"><?php echo esc_html($txn_id); ?></span>
</div>
<?php endif; ?>
<?php if ($merchant_txn_no): ?>
<div class="transaction-row">
<span class="label">Reference No:</span>
<span class="value"><?php echo esc_html($merchant_txn_no); ?></span>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<a href="<?php echo esc_url(home_url('/')); ?>" class="home-btn">
<i class="bi bi-house-fill" style="margin-right: 10px;"></i>Go to Homepage
</a>
</div>
<?php elseif ($page_mode === 'failed'): ?>
<!-- Payment Failed -->
<div class="payment-status">
<div class="status-icon failed">
<i class="bi bi-x-circle-fill"></i>
</div>
<h2 class="status-title failed">Payment Failed</h2>
<p class="status-message">
Unfortunately, your payment could not be processed.<br>
Please try again or contact our support team for assistance.
</p>
<div class="transaction-details">
<h4><i class="bi bi-exclamation-triangle" style="margin-right: 8px;"></i>Error Details</h4>
<?php if ($payment_message): ?>
<div class="transaction-row">
<span class="label">Message:</span>
<span class="value"><?php echo esc_html($payment_message); ?></span>
</div>
<?php endif; ?>
<?php if ($response_code): ?>
<div class="transaction-row">
<span class="label">Error Code:</span>
<span class="value"><?php echo esc_html($response_code); ?></span>
</div>
<?php endif; ?>
<?php if ($merchant_txn_no): ?>
<div class="transaction-row">
<span class="label">Reference No:</span>
<span class="value"><?php echo esc_html($merchant_txn_no); ?></span>
</div>
<?php endif; ?>
</div>
</div>
<!-- Retry Payment Section -->
<div class="retry-section">
<h3><i class="bi bi-arrow-repeat" style="margin-right: 10px;"></i>Retry Payment</h3>
<?php else: ?>
<!-- Normal Payment Form Header -->
<div class="payment-header">
<h1>Payment Gateway</h1>
<p>Select your class and choose a payment option to proceed</p>
</div>
<?php endif; ?>
<?php if ($page_mode !== 'success'): ?>
<!-- User Details Form -->
<div class="user-details-form">
<div class="form-row">
<div class="form-group">
<label for="parentName"><i class="bi bi-person-fill"
style="margin-right: 8px; color: #2d8ca4;"></i>Parent Name <span class="required">*</span></label>
<input type="text" id="parentName" name="parent_name" class="form-input"
placeholder="Enter parent's full name" required>
<div class="error-text" id="parentNameError"></div>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="studentName"><i class="bi bi-mortarboard-fill"
style="margin-right: 8px; color: #2d8ca4;"></i>Student Name <span
class="required">*</span></label>
<input type="text" id="studentName" name="student_name" class="form-input"
placeholder="Enter student's full name" required>
<div class="error-text" id="studentNameError"></div>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="phoneNumber"><i class="bi bi-telephone-fill"
style="margin-right: 8px; color: #2d8ca4;"></i>Phone Number <span
class="required">*</span></label>
<div class="phone-input-group">
<div class="country-code-wrapper">
<span class="country-code-prefix">+</span>
<input type="text" id="countryCode" name="country_code" class="form-input country-code-input"
value="91" maxlength="4" placeholder="91">
</div>
<input type="tel" id="phoneNumber" name="phone_number" class="form-input phone-input"
placeholder="Enter mobile number" maxlength="15" required>
</div>
<div class="error-text" id="phoneNumberError"></div>
</div>
</div>
</div>
<!-- Class Selector -->
<div class="class-selector">
<label for="classSelect"><i class="bi bi-book-fill" style="margin-right: 8px; color: #2d8ca4;"></i>Select
Your Class / Standard <span class="required">*</span></label>
<select id="classSelect" name="class">
<option value="">-- Select Class --</option>
<option value="5">Class 5</option>
<option value="6">Class 6</option>
<option value="7">Class 7</option>
<option value="8">Class 8</option>
<option value="9_10">Class 9 & 10</option>
</select>
</div>
<!-- Fee Table Container -->
<div class="fee-table-container" id="feeTableContainer">
<div class="fee-table-title">
<h2>Fee Structure for <span class="class-name" id="selectedClassName">Class 5</span></h2>
</div>
<!-- GST Note -->
<div class="gst-note">
<i class="bi bi-info-circle-fill"></i>
All prices are inclusive of GST. Please select a payment option below.
</div>
<!-- Fee Table -->
<table class="fee-table">
<thead>
<tr>
<th>Select</th>
<th>Payment Type</th>
<th>Amount (₹)</th>
<th>Description</th>
</tr>
</thead>
<tbody id="feeTableBody">
<!-- Rows will be populated by JavaScript -->
</tbody>
</table>
<!-- Payment Summary -->
<div class="payment-summary" id="paymentSummary">
<h4><i class="bi bi-receipt" style="margin-right: 8px;"></i>Payment Summary</h4>
<div class="summary-row">
<span>Class:</span>
<span id="summaryClass">-</span>
</div>
<div class="summary-row">
<span>Payment Type:</span>
<span id="summaryType">-</span>
</div>
<div class="summary-row total-row">
<span>Amount to Pay:</span>
<span id="summaryAmount">₹0</span>
</div>
</div>
<!-- Proceed Button -->
<button type="button" class="proceed-btn" id="proceedBtn" disabled>
<i class="bi bi-shield-lock-fill" style="margin-right: 10px;"></i>Proceed to Payment
</button>
</div>
<!-- Back Link -->
<a href="<?php echo esc_url(home_url('/admissions')); ?>" class="back-link">
<i class="bi bi-arrow-left"></i> Back to Admissions
</a>
<?php if ($page_mode === 'failed'): ?>
</div><!-- Close retry-section -->
<?php endif; ?>
<?php endif; ?><!-- End if not success -->
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer id="footer" class="footer dark-background">
<div class="container">
<div class="row">
<div class="col-lg-2">
<img src="<?php echo get_template_directory_uri(); ?>/assets/admissions/img/footer-logo.png" />
</div>
<div class="col-lg-4 f-tp-mg">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="<?php echo get_template_directory_uri(); ?>/assets/admissions/img/address.png" alt="...">
</div>
<div class="flex-grow-1 ms-4">
<p>DR JUNIOR PRIVATE LIMITED,<br>40/3246 C, 9th Floor, S L Plaza,<br />Palarivattom, Ernakulam<br />Kerala 682025
</p>
</div>
</div>
</div>
<div class="col-lg-3 f-tp-mg">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="<?php echo get_template_directory_uri(); ?>/assets/admissions/img/phone-ftr.png" alt="...">
</div>
<div class="flex-grow-1 ms-4">
<p><a href="tel:+917994998797" style="color: inherit; text-decoration: none;">+917994998797</a><br />
</p>
</div>
</div>
</div>
<div class="col-lg-3 f-tp-mg">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="<?php echo get_template_directory_uri(); ?>/assets/admissions/img/mail-ftr.png" alt="...">
</div>
<div class="flex-grow-1 ms-4">
<p><a href="mailto:support@drjunior.in"
style="color: inherit; text-decoration: none;">support@drjunior.in</a></p>
</div>
</div>
</div>
<div class="col-md-12 border-b pd-btm">
<div class="row">
<div class="col-lg-6 ">
<div class="wid-40 border-r">
<h4 class="lime-color">Quick Links</h4>
</div>
<div class="wid-60 ftr-link mt-ftr">
<ul>
<li><a href="<?php echo esc_url(home_url('/')); ?>">Home</a></li>
<li><a href="<?php echo esc_url(home_url('/about')); ?>">About Us</a></li>
<li><a href="<?php echo esc_url(home_url('/features')); ?>">Features</a></li>
<li><a href="<?php echo esc_url(home_url('/contacts')); ?>">Contact Us</a></li>
</ul>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-lg-end flex-wrap f-tp-mg">
<div class="wid-40 border-r">
<h4 class="lime-color">Socialmedia</h4>
</div>
<div class="wid-45 ftr-link mt-ftr-s">
<ul>
<li><a target="_blank" href="https://www.facebook.com/Dr.Juniorofficial"><img
src="<?php echo get_template_directory_uri(); ?>/assets/admissions/img/facebook-ftr.png"></a>
</li>
<li><a target="_blank" href="https://www.linkedin.com/company/dr_junior_medical"><img
src="<?php echo get_template_directory_uri(); ?>/assets/admissions/img/link-ftr.png" /></a></li>
<li><a target="_blank" href="https://www.instagram.com/drjunior.medical/"><img
src="<?php echo get_template_directory_uri(); ?>/assets/admissions/img/insta-ftr.png" /></a>
</li>
<li><a target="_blank" href="https://www.youtube.com/@doctor.junior"><img
src="<?php echo get_template_directory_uri(); ?>/assets/admissions/img/youtube-ftr.png" /></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-12 copy-sec">
<span>© <?php echo date('Y'); ?>. All rights reserved</span>
</div>
</div>
</div>
</footer>
<!-- WhatsApp Button -->
<a target="_blank" href="https://wa.me/7994998797?text=Hello%20there%2C%20I%20have%20a%20question%20about%20payment!"
class="whatsaap-scroll"><img
src="<?php echo get_template_directory_uri(); ?>/assets/admissions/img/whatsaap.png" /></a>
<!-- Scroll Top -->
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i
class="bi bi-chevron-up icn-fnt"></i></a>
<?php wp_footer(); ?>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Fee structure data based on the uploaded image
const feeData = {
'5': {
name: 'Class 5',
totalFee: 8260, // 2000 + 3130 + 3130
options: [
{ type: 'full', label: 'Full Payment', amount: 8260, description: 'Pay complete fee at once' },
{ type: 'initial', label: 'Initial Payment', amount: 2000, description: 'Pay now to start enrollment' },
{ type: 'first', label: 'First Instalment', amount: 3130, description: 'After initial payment' },
{ type: 'second', label: 'Second Instalment', amount: 3130, description: 'Final instalment' }
]
},
'6': {
name: 'Class 6',
totalFee: 9440, // 2000 + 3720 + 3720
options: [
{ type: 'full', label: 'Full Payment', amount: 9440, description: 'Pay complete fee at once' },
{ type: 'initial', label: 'Initial Payment', amount: 2000, description: 'Pay now to start enrollment' },
{ type: 'first', label: 'First Instalment', amount: 3720, description: 'After initial payment' },
{ type: 'second', label: 'Second Instalment', amount: 3720, description: 'Final instalment' }
]
},
'7': {
name: 'Class 7',
totalFee: 10620, // 2000 + 4310 + 4310
options: [
{ type: 'full', label: 'Full Payment', amount: 10620, description: 'Pay complete fee at once' },
{ type: 'initial', label: 'Initial Payment', amount: 2000, description: 'Pay now to start enrollment' },
{ type: 'first', label: 'First Instalment', amount: 4310, description: 'After initial payment' },
{ type: 'second', label: 'Second Instalment', amount: 4310, description: 'Final instalment' }
]
},
'8': {
name: 'Class 8',
totalFee: 10620, // 2000 + 4310 + 4310
options: [
{ type: 'full', label: 'Full Payment', amount: 10620, description: 'Pay complete fee at once' },
{ type: 'initial', label: 'Initial Payment', amount: 2000, description: 'Pay now to start enrollment' },
{ type: 'first', label: 'First Instalment', amount: 4310, description: 'After initial payment' },
{ type: 'second', label: 'Second Instalment', amount: 4310, description: 'Final instalment' }
]
},
'9_10': {
name: 'Class 9 & 10',
totalFee: 11800, // 2000 + 4900 + 4900
options: [
{ type: 'full', label: 'Full Payment', amount: 11800, description: 'Pay complete fee at once' },
{ type: 'initial', label: 'Initial Payment', amount: 2000, description: 'Pay now to start enrollment' },
{ type: 'first', label: 'First Instalment', amount: 4900, description: 'After initial payment' },
{ type: 'second', label: 'Second Instalment', amount: 4900, description: 'Final instalment' }
]
}
};
const classSelect = document.getElementById('classSelect');
const feeTableContainer = document.getElementById('feeTableContainer');
const feeTableBody = document.getElementById('feeTableBody');
const selectedClassName = document.getElementById('selectedClassName');
const paymentSummary = document.getElementById('paymentSummary');
const proceedBtn = document.getElementById('proceedBtn');
let selectedPayment = null;
// Handle class selection
classSelect.addEventListener('change', function () {
const classValue = this.value;
if (!classValue) {
feeTableContainer.classList.remove('show');
paymentSummary.classList.remove('show');
proceedBtn.disabled = true;
selectedPayment = null;
return;
}
const classData = feeData[classValue];
selectedClassName.textContent = classData.name;
// Build table rows
let tableHTML = '';
classData.options.forEach((option, index) => {
tableHTML += `
<tr data-type="${option.type}" data-amount="${option.amount}" data-label="${option.label}">
<td><input type="radio" name="paymentOption" class="payment-option-radio" value="${option.type}" /></td>
<td>${option.label}</td>
<td class="amount-highlight">₹${option.amount.toLocaleString('en-IN')}</td>
<td>${option.description}</td>
</tr>
`;
});
feeTableBody.innerHTML = tableHTML;
feeTableContainer.classList.add('show');
// Reset selection
paymentSummary.classList.remove('show');
proceedBtn.disabled = true;
selectedPayment = null;
// Add click handlers to rows
const rows = feeTableBody.querySelectorAll('tr');
rows.forEach(row => {
row.addEventListener('click', function () {
// Remove selected class from all rows
rows.forEach(r => r.classList.remove('selected'));
// Add selected class to clicked row
this.classList.add('selected');
// Check the radio button
const radio = this.querySelector('input[type="radio"]');
radio.checked = true;
// Update selection
selectedPayment = {
class: classData.name,
classValue: classValue,
type: this.dataset.type,
label: this.dataset.label,
amount: parseInt(this.dataset.amount)
};
// Update summary
document.getElementById('summaryClass').textContent = selectedPayment.class;
document.getElementById('summaryType').textContent = selectedPayment.label;
document.getElementById('summaryAmount').textContent = '₹' + selectedPayment.amount.toLocaleString('en-IN');
paymentSummary.classList.add('show');
proceedBtn.disabled = false;
});
});
});
// Handle proceed button
proceedBtn.addEventListener('click', function () {
// Validate user details
const parentName = document.getElementById('parentName');
const studentName = document.getElementById('studentName');
const phoneNumber = document.getElementById('phoneNumber');
let hasErrors = false;
// Reset error states
parentName.classList.remove('error');
studentName.classList.remove('error');
phoneNumber.classList.remove('error');
const countryCodeEl = document.getElementById('countryCode');
if (countryCodeEl) countryCodeEl.classList.remove('error');
document.getElementById('parentNameError').classList.remove('show');
document.getElementById('studentNameError').classList.remove('show');
document.getElementById('phoneNumberError').classList.remove('show');
// Validate Parent Name
if (!parentName.value.trim()) {
parentName.classList.add('error');
const errorEl = document.getElementById('parentNameError');
errorEl.textContent = 'Please enter parent name';
errorEl.classList.add('show');
hasErrors = true;
}
// Validate Student Name
if (!studentName.value.trim()) {
studentName.classList.add('error');
const errorEl = document.getElementById('studentNameError');
errorEl.textContent = 'Please enter student name';
errorEl.classList.add('show');
hasErrors = true;
}
// Validate Phone Number (international support: 6-15 digits)
const countryCode = document.getElementById('countryCode');
const countryCodeRegex = /^[0-9]{1,4}$/;
const phoneRegex = /^[0-9]{6,15}$/;
// Validate country code
if (!countryCode.value.trim()) {
countryCode.classList.add('error');
const errorEl = document.getElementById('phoneNumberError');
errorEl.textContent = 'Please enter country code';
errorEl.classList.add('show');
hasErrors = true;
} else if (!countryCodeRegex.test(countryCode.value)) {
countryCode.classList.add('error');
const errorEl = document.getElementById('phoneNumberError');
errorEl.textContent = 'Please enter a valid country code (1-4 digits)';
errorEl.classList.add('show');
hasErrors = true;
}
// Validate phone number
if (!phoneNumber.value.trim()) {
phoneNumber.classList.add('error');
const errorEl = document.getElementById('phoneNumberError');
errorEl.textContent = 'Please enter phone number';
errorEl.classList.add('show');
hasErrors = true;
} else if (!phoneRegex.test(phoneNumber.value)) {
phoneNumber.classList.add('error');
const errorEl = document.getElementById('phoneNumberError');
errorEl.textContent = 'Please enter a valid phone number (6-15 digits)';
errorEl.classList.add('show');
hasErrors = true;
}
// Validate class selection
if (!classSelect.value) {
alert('Please select a class');
classSelect.focus();
return;
}
// Validate payment option
if (!selectedPayment) {
alert('Please select a payment option');
return;
}
if (hasErrors) {
// Scroll to first error
const firstError = document.querySelector('.form-input.error');
if (firstError) {
firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
firstError.focus();
}
return;
}
// Prepare payment data with user details
const paymentData = {
...selectedPayment,
parentName: parentName.value.trim(),
studentName: studentName.value.trim(),
countryCode: countryCode.value.trim(),
phoneNumber: phoneNumber.value.trim(),
fullPhone: '+' + countryCode.value.trim() + phoneNumber.value.trim()
};
// Store selection in sessionStorage for the next page
sessionStorage.setItem('drjunior_payment', JSON.stringify(paymentData));
// Initiate payment via LMS Platform API
const lmsPlatformUrl = '<?php echo esc_url(drjunior_get_lms_platform_url()); ?>';
if (!lmsPlatformUrl) {
alert('Payment gateway is not configured. Please contact support.');
return;
}
// Show loading state
proceedBtn.disabled = true;
proceedBtn.innerHTML = '<i class="bi bi-hourglass-split" style="margin-right: 10px;"></i>Processing...';
// Prepare API payload
const baseUrl = window.location.origin;
const apiPayload = {
amount: paymentData.amount.toFixed(2),
entity_id: 1,
entity_type: "subscription",
customerDetails: {
parentName: paymentData.parentName,
studentName: paymentData.studentName,
phoneNumberCountryCode: paymentData.countryCode,
phoneNumberWithoutCountryCode: paymentData.phoneNumber,
},
successRedirectUrl: `${baseUrl}/payment`,
failureRedirectUrl: `${baseUrl}/payment`
};
// Make AJAX request to initiate payment
fetch(lmsPlatformUrl + '/payment/icici/initiate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(apiPayload)
})
.then(response => {
if (!response.ok) {
throw new Error('Payment initiation failed. Please try again.');
}
return response.json();
})
.then(resonseBody => {
const data = resonseBody.data;
if (data && data[0] && data[0].payment_url) {
const paymentUrl = data[0].payment_url;
// Store payment data for reference
sessionStorage.setItem('drjunior_payment', JSON.stringify({
...paymentData,
transactionId: data.transaction_id || null
}));
// Redirect to payment gateway
window.location.href = paymentUrl;
} else {
throw new Error(data.message || 'Failed to get payment URL. Please try again.');
}
})
.catch(error => {
console.error('Payment Error:', error);
alert('Payment Error: ' + error.message);
// Reset button state
proceedBtn.disabled = false;
proceedBtn.innerHTML = '<i class="bi bi-shield-lock-fill" style="margin-right: 10px;"></i>Proceed to Payment';
});
});
// Initialize AOS if available
if (typeof AOS !== 'undefined') {
AOS.init({
duration: 600,
easing: 'ease-in-out',
once: true,
mirror: false
});
}
// Scroll top button
const scrollTop = document.getElementById('scroll-top');
window.addEventListener('scroll', function () {
if (window.scrollY > 100) {
scrollTop.classList.add('active');
} else {
scrollTop.classList.remove('active');
}
});
scrollTop.addEventListener('click', function (e) {
e.preventDefault();
window.scrollTo({ top: 0, behavior: 'smooth' });
});
});
</script>
</body>
</html>