# easy-invoice/2.2.0/templates/payment-section.php

Easy Invoice – Invoice Generator, PDF Quotes & Payments, version 2.2.0. 1,024 lines.

- Page: https://pluginprobe.com/plugins/easy-invoice/2.2.0/code/templates/payment-section.php
- Raw: https://pluginprobe.com/plugins/easy-invoice/2.2.0/raw/templates/payment-section.php
- Modified: 2025-08-19T12:00:36+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/easy-invoice/2.2.0/code/templates/payment-section.php#L10-L20`.

```php
<?php
/**
 * Payment Section Template
 * 
 * Displays payment options and processing UI
 * 
 * @package EasyInvoice
 * @since 1.0.0
 */

// Get invoice data
$invoice_id = get_the_ID();
$invoice = new \EasyInvoice\Models\Invoice(get_post($invoice_id));
$total_amount = $invoice->getTotal();
$currency_code = $invoice->getCurrencyCode() ?: 'USD';

// If currency is "global", use the global setting
if ($currency_code === 'global') {
    $currency_code = get_option('easy_invoice_currency_code', 'USD');
}

$currency_symbol = \EasyInvoice\Helpers\CurrencyHelper::getCurrencySymbol($currency_code);

// Get available payment gateways
$payment_controller = new \EasyInvoice\Controllers\PaymentController();
$available_gateways = $payment_controller->getAvailableGateways($invoice_id);

// Get nonce for AJAX security
$payment_nonce = wp_create_nonce('easy_invoice_payment');


?>

<div class="easy-invoice-payment-sidebar">
    <!-- Header -->
    <div class="payment-header">
        <div class="header-content">
            <h2><?php _e('Payment', 'easy-invoice'); ?></h2>
            <div class="invoice-summary">
                <span class="invoice-number"><?php echo esc_html($invoice->getNumber()); ?></span>
                <span class="invoice-date"><?php echo esc_html(date_i18n('M j, Y', strtotime($invoice->getIssueDate()))); ?></span>
            </div>
        </div>

        <div class="amount-display">
            <div class="amount-label"><?php _e('Total Amount', 'easy-invoice'); ?></div>
            <div class="amount-value">
                <?php echo esc_html($currency_symbol . number_format($total_amount, 2)); ?>
            </div>
        </div>
    </div>

    <?php if (empty($available_gateways)): ?>
        <div class="no-payment-methods">
            <div class="empty-state">
                <div class="empty-icon">
                    <i class="fas fa-credit-card"></i>
                </div>
                <h3><?php _e('No Payment Methods', 'easy-invoice'); ?></h3>
                <p><?php _e('Payment methods are not configured for this invoice.', 'easy-invoice'); ?></p>
            </div>
        </div>
    <?php else: ?>
        <form id="easy-invoice-payment-form" class="payment-form">
            <input type="hidden" name="invoice_id" value="<?php echo esc_attr($invoice_id); ?>">
            <input type="hidden" name="payment_nonce" value="<?php echo esc_attr($payment_nonce); ?>">
            <input type="hidden" name="payment_amount" id="payment_amount" value="<?php echo esc_attr($total_amount); ?>">
            <input type="hidden" name="payment_note" id="payment_note" value="">
            <input type="hidden" name="action" value="easy_invoice_process_payment">
            <input type="hidden" name="is_partial_payment" id="is_partial_payment" value="0">
            <input type="hidden" name="payment_method" id="payment_method" value="">
            
            <?php 
            // Add partial payments form before payment gateways (only if enabled)
            do_action('easy_invoice_payment_gateways_before', $invoice);
            
            ?>
            
            <!-- Payment Methods -->
            <div class="payment-methods">
                <label class="section-label"><?php _e('Payment Method', 'easy-invoice'); ?></label>
                
                <div class="method-options">
                <?php foreach ($available_gateways as $gateway): ?>
                        <div class="method-option" data-gateway="<?php echo esc_attr($gateway['id']); ?>">
                            <input type="radio" 
                                   name="payment_method_radio" 
                                   id="payment_method_<?php echo esc_attr($gateway['id']); ?>"
                                   value="<?php echo esc_attr($gateway['id']); ?>"
                                   class="method-radio">
                            
                            <label for="payment_method_<?php echo esc_attr($gateway['id']); ?>" class="method-label">
                                <div class="method-content">
                                    <div class="method-icon">
                                        <?php if (!empty($gateway['icon'])): ?>
                                            <i class="<?php echo esc_attr($gateway['icon']); ?>"></i>
                                        <?php else: ?>
                                            <i class="fas fa-credit-card"></i>
                                        <?php endif; ?>
                                    </div>
                                    
                                    <div class="method-details">
                                        <div class="method-name"><?php echo esc_html($gateway['title']); ?></div>
                                        <?php if (!empty($gateway['description'])): ?>
                                            <div class="method-description"><?php echo esc_html($gateway['description']); ?></div>
                                        <?php endif; ?>
                                    </div>
                                    
                                    <div class="method-check">
                                        <div class="checkmark"></div>
                                    </div>
                                </div>
                            </label>
                            
                            <!-- Gateway-specific content will be loaded here -->
                            <div class="gateway-content" id="gateway-content-<?php echo esc_attr($gateway['id']); ?>" style="display: none;"></div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>

            <!-- Messages -->
            <div class="message-area" id="payment-message-area"></div>

            <!-- Submit Button -->
            <div class="submit-section">
                <button type="submit" id="pay-now-button" class="submit-button" disabled>
                    <span class="button-text"><?php _e('Pay', 'easy-invoice'); ?> <?php echo esc_html($currency_symbol . number_format($total_amount, 2)); ?></span>
                    <div class="button-loader hidden">
                        <div class="loader"></div>
                        <span><?php _e('Processing...', 'easy-invoice'); ?></span>
                    </div>
                </button>
                
                <div class="security-note">
                    <i class="fas fa-lock"></i>
                    <span><?php _e('Your payment is secure and encrypted', 'easy-invoice'); ?></span>
                </div>
            </div>
        </form>
    <?php endif; ?>
</div>

<style>
/* Clean SaaS Payment Sidebar */
.easy-invoice-payment-sidebar {
    background: #ffffff;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #e5e7eb;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.05);
}

/* Header */
.payment-header {
    padding: 32px 24px 24px;
    border-bottom: 1px solid #f3f4f6;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.header-content h2 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
}

.invoice-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #6b7280;
}

.invoice-number {
    font-weight: 500;
    color: #374151;
}

.invoice-date {
    color: #9ca3af;
}

.amount-display {
    margin-top: 20px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.amount-label {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.amount-value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    line-height: 1;
}

/* No Payment Methods */
.no-payment-methods {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.empty-state {
    text-align: center;
    max-width: 280px;
}

.empty-icon {
    width: 48px;
    height: 48px;
    background: #f3f4f6;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #9ca3af;
    font-size: 20px;
}

.empty-state h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #374151;
}

.empty-state p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

/* Payment Form */
.payment-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow-y: auto;
}

/* Payment Methods */
.payment-methods {
    margin-bottom: 24px;
}

.section-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 16px;
}

.method-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Gateway Content */
.gateway-content {
    padding: 20px;
    background: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    border-top: 2px solid #10b981;
}

.gateway-content h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    line-height: 1.4;
}

.gateway-content p {
    margin: 0 0 12px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
}

.gateway-content .bank-details,
.gateway-content .payment-reference {
    margin: 16px 0;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.gateway-content .payment-reference {
    background: #f0f7ff;
    border-left: 4px solid #0073aa;
}

.gateway-content .reference-note {
    font-style: italic;
    color: #6b7280;
    margin-top: 8px;
    font-size: 13px;
}

.gateway-content .payment-proof-form {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}



/* Gateway-specific instruction styles */
.gateway-content .bank-transfer-instructions,
.gateway-content .cheque-payment-instructions,
.gateway-content .cash-payment-instructions {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    border-left: none;
}

.gateway-content .bank-details-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.gateway-content .bank-details-table th,
.gateway-content .bank-details-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

.gateway-content .bank-details-table th {
    width: 40%;
    font-weight: 600;
    color: #374151;
}

.gateway-content .cheque-details,
.gateway-content .cash-details {
    margin-bottom: 16px;
}

.gateway-content .payable-to,
.gateway-content .invoice-number {
    font-size: 16px;
    margin: 8px 0 16px;
    color: #0073aa;
    font-weight: 600;
}

.gateway-content .mailing-address {
    padding: 12px;
    background: #f0f7ff;
    border-left: 3px solid #0073aa;
    margin-top: 8px;
    border-radius: 6px;
}

.gateway-content .cheque-notification-form {
    margin-top: 20px;
    border-top: 1px solid #e5e7eb;
    padding-top: 16px;
}

.gateway-content .submit-notification-btn {
    background: #0073aa;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.gateway-content .submit-notification-btn:hover {
    background: #005d8c;
}

.gateway-content .submit-notification-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}



.method-option {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    transition: all 0.2s ease;
    background: #ffffff;
    overflow: hidden;
}

.method-option:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.method-option.selected {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    background: #f0fdf4;
}

.method-radio {
    display: none;
}

.method-label {
    display: block;
    padding: 20px;
    cursor: pointer;
    margin: 0;
}

.method-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.method-icon {
    width: 40px;
    height: 40px;
    background: #f9fafb;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.method-option.selected .method-icon {
    background: #10b981;
    color: #ffffff;
}

.method-details {
    flex: 1;
    min-width: 0;
}

.method-name {
    font-weight: 600;
    font-size: 15px;
    color: #111827;
    margin-bottom: 4px;
}

.method-description {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

.method-check {
    flex-shrink: 0;
}

.checkmark {
    width: 24px;
    height: 24px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    position: relative;
    transition: all 0.2s ease;
}

.checkmark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.method-option.selected .checkmark {
    background: #10b981;
    border-color: #10b981;
}

.method-option.selected .checkmark::after {
    opacity: 1;
}



/* Message Area */
.message-area {
    margin-bottom: 24px;
    min-height: 20px;
}

.payment-message {
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.payment-message.success {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}

.payment-message.error {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.payment-message.warning {
    background: #fffbeb;
    color: #d97706;
    border-color: #fed7aa;
}

.payment-message.info {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}



/* Submit Section */
.submit-section {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid #f3f4f6;
}

.submit-button {
    width: 100%;
    padding: 18px 24px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.submit-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.submit-button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.submit-button:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.button-loader {
    display: flex;
    align-items: center;
    gap: 10px;
}

.button-loader.hidden {
    display: none;
}

.loader {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 13px;
    color: #6b7280;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
}

.security-note i {
    font-size: 14px;
    color: #10b981;
}

/* Responsive */
@media (max-width: 768px) {
    .easy-invoice-payment-sidebar {
        width: 100%;
        height: 100vh;
    }
    
    .payment-header {
        padding: 24px 20px 20px;
    }
    
    .payment-form {
        padding: 20px;
    }
    
    .method-label {
        padding: 16px;
    }
    
    .submit-button {
        padding: 16px 20px;
    }
}

/* Scrollbar */
.payment-form::-webkit-scrollbar {
    width: 6px;
}

.payment-form::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.payment-form::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.payment-form::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}



/* Utility */
.hidden {
    display: none !important;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const paymentForm = document.getElementById('easy-invoice-payment-form');
    const payButton = document.getElementById('pay-now-button');
    const messageArea = document.getElementById('payment-message-area');
    const paymentMethods = document.querySelectorAll('input[name="payment_method_radio"]');
    const paymentAmountInput = document.getElementById('payment_amount');
    
    window.selectedGateway = null;
    
    // Initialize payment methods
    paymentMethods.forEach(method => {
        method.addEventListener('change', handlePaymentMethodChange);
    });
    
    // Handle payment amount changes
    if (paymentAmountInput) {
        paymentAmountInput.addEventListener('input', updatePayButtonText);
        paymentAmountInput.addEventListener('change', updatePayButtonText);
    }
    
    // Initialize button text on page load (always call this)
    updatePayButtonText();
    
    // Also call it after a short delay to ensure all elements are loaded
    setTimeout(() => {
        updatePayButtonText();
        console.log('updatePayButtonText called on page load (delayed)');
    }, 500);
    
    // Handle form submission
    paymentForm.addEventListener('submit', handlePaymentSubmit);
    
    function handlePaymentMethodChange(e) {
        window.selectedGateway = e.target.value;
        const methodEntry = e.target.closest('.method-option');
        
        console.log('Payment method changed to:', window.selectedGateway);
        console.log('Pay button before:', payButton.disabled);
        
        // Update UI
        document.querySelectorAll('.method-option').forEach(entry => {
            entry.classList.remove('selected');
        });
        methodEntry.classList.add('selected');
        
        // Update hidden payment_method field
        const paymentMethodField = document.getElementById('payment_method');
        if (paymentMethodField) {
            paymentMethodField.value = window.selectedGateway;
        }
        
        // Enable pay button
        payButton.disabled = false;
        console.log('Pay button after:', payButton.disabled);
        
        // Load gateway-specific content
        loadGatewayContent(window.selectedGateway);
    }
    
    function loadGatewayContent(gateway) {
        // Find the specific gateway content div for this gateway
        const contentDiv = document.getElementById('gateway-content-' + gateway);
        
        if (!contentDiv) {
            console.error('Gateway content div not found for:', gateway);
            return;
        }
        
        // Hide all gateway content divs first
        document.querySelectorAll('.gateway-content').forEach(div => {
            div.style.display = 'none';
        });
        
        // Clear existing content
        contentDiv.innerHTML = '';
        

            // Load gateway content via AJAX
            console.log('Loading gateway content for:', gateway);
            console.log('Content div:', contentDiv);
            
            // Get form data for the request
            const formData = new FormData();
            formData.append('action', 'easy_invoice_get_payment_instructions');
            formData.append('gateway', gateway);
            formData.append('invoice_id', document.querySelector('input[name="invoice_id"]').value);
            formData.append('nonce', document.querySelector('input[name="payment_nonce"]').value);
            
            fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                console.log('Response status:', response.status);
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(response => {
                console.log('Response:', response);
                if (response.success && response.data.instructions) {
                    console.log('Instructions found, displaying content');
                    contentDiv.innerHTML = response.data.instructions;
                    contentDiv.style.display = 'block';
                } else {
                    console.log('No instructions found, hiding content');
                    contentDiv.style.display = 'none';
                }
            })
            .catch(error => {
                console.error('Error loading gateway content:', error);
                contentDiv.style.display = 'none';
            });
    }
    
    function loadGatewayContentViaAjax(gateway, contentDiv) {
        console.log('Loading gateway content via AJAX for:', gateway);
        
        // Get form data for the request
        const formData = new FormData();
        formData.append('action', 'easy_invoice_get_payment_instructions');
        formData.append('gateway', gateway);
        formData.append('invoice_id', document.querySelector('input[name="invoice_id"]').value);
        formData.append('nonce', document.querySelector('input[name="payment_nonce"]').value);
        
        // Fetch instructions from the server
        fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
            method: 'POST',
            body: formData
        })
        .then(response => {
            console.log('Response status:', response.status);
            return response.json();
        })
        .then(response => {
            console.log('Response:', response);
            if (response.success && response.data.instructions) {
                console.log('Content div before insertion:', contentDiv);
                console.log('Instructions to insert:', response.data.instructions);
                contentDiv.innerHTML = response.data.instructions;
                console.log('Content div after insertion:', contentDiv);
                console.log('Content div innerHTML:', contentDiv.innerHTML);
                console.log('Content div display style:', contentDiv.style.display);
                console.log('Instructions loaded successfully');
                // Show the content div only after successful AJAX response
                contentDiv.style.display = 'block';
            } else {
                console.log('No instructions received for gateway:', gateway);
                console.log('Hiding gateway content div');
                contentDiv.style.display = 'none';
            }
        })
        .catch(error => {
            console.error('Error loading gateway content:', error);
            console.log('Hiding gateway content div due to error');
            contentDiv.style.display = 'none';
        });
    }
    

    
    function handlePaymentSubmit(e) {
        e.preventDefault();
        payButton.disabled = true;
        
        if (!window.selectedGateway) {
            showPaymentMessage('Please select a payment method first.', 'error');
            payButton.disabled = false;
            return;
        }
        
        // Show loading state
        payButton.querySelector('.button-text').classList.add('hidden');
        payButton.querySelector('.button-loader').classList.remove('hidden');
        
        // Handle all payment methods (PayPal, etc.)
        processStandardPayment();
    }
    

    
    function processStandardPayment() {
        console.log('Processing standard payment');
        
        // Get form data
        const formData = new FormData(paymentForm);
        
        // Add payment method to form data
        formData.append('payment_method', window.selectedGateway);
        
        console.log('Form data:', Object.fromEntries(formData));
        
        // Get AJAX URL from WordPress
        const ajaxUrl = '<?php echo admin_url('admin-ajax.php'); ?>';
        
        fetch(ajaxUrl, {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(response => {
            if (response.success) {
                handlePaymentSuccess(response.data);
            } else {
                const errorMsg = response.data && response.data.message 
                    ? response.data.message 
                    : 'Payment processing failed.';
                showPaymentMessage(errorMsg, 'error');
                resetPayButton();
            }
        })
        .catch(error => {
            console.error('Payment AJAX error:', error);
            showPaymentMessage('Server error during payment. Please try again.', 'error');
            resetPayButton();
        });
    }
    

    
    function handlePaymentSuccess(data) {
        // Handle redirect if provided (for PayPal and other external gateways)
        if (data.redirect_url) {
            // Get gateway-specific message or use default
            const redirectMessage = data.message || 'Redirecting to payment gateway to complete your payment...';
            
            // Update button state to show redirecting
            payButton.querySelector('.button-text').textContent = 'Processing...';
            payButton.querySelector('.button-loader').classList.add('hidden');
            payButton.querySelector('.button-text').classList.remove('hidden');
            payButton.disabled = true;
            
            // Show redirect message
            showPaymentMessage(redirectMessage, 'info');
            
            // Redirect immediately
            setTimeout(() => {
                window.location.href = data.redirect_url;
            }, 1000);
            return;
        }
        
        // For successful payments without redirect
        // Update button state
        payButton.querySelector('.button-text').textContent = 'Payment Successful!';
        payButton.querySelector('.button-loader').classList.add('hidden');
        payButton.querySelector('.button-text').classList.remove('hidden');
        payButton.disabled = true;
        
        // Show success message
        showPaymentMessage(data.message || 'Payment successful!', 'success');
        
        // Reload the page after delay
        setTimeout(() => {
            window.location.reload();
        }, 2000);
    }
    
    function showPaymentMessage(message, type) {
        let icon = 'info-circle';
        if (type === 'success') {
            icon = 'check-circle';
        } else if (type === 'error') {
            icon = 'exclamation-triangle';
        } else if (type === 'warning') {
            icon = 'exclamation-triangle';
        }
        
        messageArea.innerHTML = `
            <div class="payment-message ${type}">
                <i class="fas fa-${icon}"></i>
                ${message}
            </div>
        `;
    }
    
    function updatePayButtonText() {
        // Get payment amount from the hidden field (updated by partial payments)
        const hiddenPaymentAmount = document.getElementById('payment_amount');
        const paymentAmount = hiddenPaymentAmount ? hiddenPaymentAmount.value : '0';
        const currencySymbol = '<?php echo esc_js($currency_symbol); ?>';
        
        console.log('updatePayButtonText called');
        console.log('Hidden payment amount:', paymentAmount);
        console.log('Currency symbol:', currencySymbol);
        
        if (paymentAmount && paymentAmount > 0) {
            const formattedAmount = parseFloat(paymentAmount).toFixed(2);
            payButton.querySelector('.button-text').textContent = `Pay ${currencySymbol}${formattedAmount}`;
            console.log('Updated button text to:', `Pay ${currencySymbol}${formattedAmount}`);
        } else {
            payButton.querySelector('.button-text').textContent = 'Pay';
            console.log('Updated button text to: Pay');
        }
    }
    
    // Make the function globally accessible
    window.updatePayButtonText = updatePayButtonText;
    
    function resetPayButton() {
        payButton.querySelector('.button-text').textContent = 'Pay Now';
        payButton.querySelector('.button-loader').classList.add('hidden');
        payButton.querySelector('.button-text').classList.remove('hidden');
        payButton.disabled = false;
    }
    

    

});
</script>

<?php 
// Allow Pro plugins to add additional variables
do_action('easy_invoice_payment_form_variables');
?>
```